A Beautiful Site: Smashapp.com
Smashapp is a site dedicated to highlighting coolest apps for the iPhone, iPad and Android devices. The site not only features a flow of fantastic apps, but it also highlights an app of the day. I love many things about the design of this site, but a few items in particular really make it a stand out example for me.
It follows the norms
Often times it gets so tempting to break with convention and the notion of sticking to the norms is inconceivable. Yet, this is exactly what the Smashapp design does; the site follows practically every norm and convention for building web sites. In other words, the structure is based on commonly accepted patterns and limitations of the web.
For example, the site makes use of a loose grid to establish a repeatable layout throughout the site; making the content easy to maintain and update. All typography is easily maintained and custom type faces are applied dynamically via cufon. This eliminates the need to modify images to adjust copy or add new elements. And the header follows a very predictable pattern. The formulaic header ensures ease of use and makes the site feel comfortable.
All of this might lead one to believe the site has a boring design, quite the contrary, it’s absolutely gorgeous. The designer has embraced the needs of a constantly updating site while pumping it full of design goodness.
One of the things that transform an ok web site into an incredible one is the finer details. In this case every last element has been accounted for. Active state for major elements have a slick and clear style applied. All form elements are carefully accounted for, are easy to use, and blend perfectly with the design. Even the footer is refined and polished so that it is clear and easy to use, despite the density of the content it contains.
Of course as designers we understand that the polished details are often the hardest parts to pull off. Even more so, it can be excruciating to translate that level of polish into the final product. Again, sticking to the basic restraints of the web has made this site possible.
Notice that this design lacks a thematic approach. The site is all about apps for mobile devices, and yet we don’t see a single image of an iPhone or iPad in the design? The designer has avoided the obvious visual cliches for the topic of the site and has instead designed with a style in mind. Themes can be so tempting, and are often a crutch. Design based on nothing more than being clean and beautiful can be so much more difficult to achieve.
I would also point out that the site has been refined to the critical elements. This leaves the designer with the freedom to add breathing room between elements. This extra space ensures the contents of the site are easy to consume and avoid being cluttered with every last option imaginable.
The take away
The Smashapp site design shows that a data driven site can be absolutely easy to update and beautiful at the same time. While this combination might appear easy to pull off, I assure you it isn’t. Carefully consider the maintainability and how difficult it will be to update the sites you design. When a sites success is rooted in its ability to continually update, it is critical that you minimize the work to full fill that function.
>EXTRA: For more web design tips from Patrick McNeil, pick up his book the Web Designer’s Idea Book, which provides inspirational examples of winning layout, color, and style directions.