Design, uninterrupted #41

June 16th, 2010

Today’s post highlights the design of Branded07.com by Rob Palmer. Set in soothing bluish gray palette, the design combines precise geometrical shapes with stylized illustrations to create a unique and vibrant feel. The navigation bar uses a dark noise texture for the background. Note the highlight effect behind the carefully typeset main logo (with the custom shaped letter “a” reused in the favicon), and smooth highlight transitions as the mouse is moved over different navigation menu entries. The same dark noise texture is used in the sidebar that employs different shades of the main bluish gray color for the text elements and the social icons (move the mouse over the icons to see full color versions).

The usually boring search field has received a lot of attention. In addition to using the same color palette and a thick gradient border, the field is surrounded by stylized cloud illustrations, with some of the cloud edges concealing its bottom corners. A vibrant illustration of a puffin bird (wearing the same custom shaped letter “a” below a flowing cape) directs the eye towards the search box, inviting first-time visitors to explore what the site has to offer.

The puffin element is used on other places in the design, and nowhere better than the magnificently constructed footer. The footer is an oversized illustration of a peaceful pond surrounded by blooming cliffs, with a waterfall flowing from it. The diving puffins and the waterfall hint at the “treasures” of hidden content, further inviting the user to explore the site. The footer content is masterfully placed around the illustrations. A simple three-column list of links is set on top of a vertical gradient that guides the eye from the light background of the main content towards the darker shade used for the pond water illustration. While the horizontal separators between the links serve to delimit the rows, both vertical and horizontal fading make sure that they do not draw too much attention away from the links themselves.

And perhaps the best part of the footer is the color selection for the contact form, the bottom navigation and external logos. Set in a few different shades of gray, they blend perfectly with the barren parts of the cliffs surrounding the pond. Note how all the texts in the footer use lighter and darker shadows to improve readability for both light-on-dark and dark-on-light sections.