About the Project
CREATIVE FREEDOM
Talk about a team effort! Spec was easily one of the most fun sites that we have ever created. We were pretty much given complete creative freedom to do whatever we wanted, and we took this opportunity to really flex our creative muscles in terms of design and development.
BREAKING NEW GROUND
Our objective was to develop a forward thinking website experience that attracted members of the web design community and revolved around the concept of flat design. To get us there, we were challenged to implement a number of modern web design techniques, focusing on HTML5 animations, parallax scrolling, and responsive design. We leaned heavily in this direction because we were working with a new and innovative product that would appeal to a large number of “overworked” designers. To compliment the product, we felt that the website should also feature new and innovative ideas.
When designing the home page, we decided to add a parallax scroll to serve as the focal point of the home screen. We accomplished this by creating a multilayered background and altering the layers and scroll speeds in CSS.
To continue with our idea of innovation, we used CSS3 and HTML5 to create a number of different transitions throughout the site. We did not want a static page composition that presented all of the content right away, so we developed subtle transitions that would allow for different elements to appear onto the page at a particular scroll points.
Frame by frame animations were also something we wanted to accomplish. We crafted up 4 custom icons in Adobe Illustrator, and were faced with the challenge of animating them. To solve this, we used Flash to create the animations, exported each frame as a png, and combined the images into sprites. With the help of a few lines of code, we were able to turn different sprites into a straightforward hover animation. In the end, it was seamless.
At this point, all that was left was crafting up custom graphics to show the benefits of using responsive banner ads. We had to search through a lot of data to find usable and telling statistics. Once we discussed with the client, we were able to incorporate them into a couple of really nice infographics.