A simple way to create display ad campaigns that run everywhere
Talk about a team effort! Specless 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.
Planning For The Future
The interesting thing about Specless as a business is that it’s at the forefront of a new movement. This lead to two different needs. First, we had to transform the site into a one-pager while we were building it. This was used to toss the Specless name into the conversation sooner due to heavy media coverage on this new business category.
The other need had to do with SEO. While conducting keyword research, we realized that there were not a lot of searches for the keyword phrase “Responsive Ads.” This forced us to think with future use in mind when selecting targeted phrases. In the end, we used some of the more popular current terms, but also brainstormed ideas of what users would potentially search for as this new field becomes more prominent.
Overall, this project was a pleasure to work on. Everyone on the team worked together day in and day out, often putting in extra hours, to make this the best project that we could imagine. All the while, we were motivated by the breakthroughs we were having both on an individual level and as a team. We even received an award from onepagelove.com before the site was actually finished. Upon completion, the site was awarded honorable mention by awwwards.com for site of the day .
The client was great to work with, participating in frequent check-ins via conference call, collaborating on interactions and layouts, providing timely feedback, and best of all, supplying thoughtful content that really helped bring the site together. Our work on this project really speaks for itself, so we invite you to check it out.
“Usman Group truly partnered with our business on this project– they became a highly creative and productive extension of our team where they were always in-tune with our objectives, understood our feedback and went above and beyond to not just simply implement our feedback at face value, but to use those opportunities to expand on our direction and exponentially improve the final product. Their attention to detail was impressive especially considering the tight timing. In the end, we couldn’t be happier with the end result as the site was recognized by countless design blogs and received enough recognition to go from zero traffic to hundreds of unique visitors a day essentially overnight.”Stephen Corby CEO, Product & Design Specless, LLC