Design, uninterrupted #158

March 11th, 2011

Today’s post highlights the design of ThemeFuse.com. It’s a nicely spaced and well balanced design that does a great job highlighting the company’s portfolio. A Flash-based carousel of promoted themes features attractive transitions, reflections and a 3D perspective shift as the thumbnails slide in and out. The reflection effect works particularly well with the “shelf” effect created by a fading rectangular outline with a strong vanishing point. Note how the background and texture elements above the fold artfully use a very small brightness interval of light gray, providing just enough visual support to the colorful portfolio – from fading lines to background swooshes to beveled outlines.

A combination of dark slate gray and orange is used for action buttons, section headers and hyperlinks with content transitioning from two columns (note the right alignment of the left column) to three columns, with an interactive thumbnail strip in between. I particularly like the white icons in the header titles of the last three sections, with just the right amount of dark drop shadow to prevent them from blending into the background. However, it feels that the action buttons should be center-aligned and not skew each column to the left.

If you follow this series, you’d notice that i’m a big fan of using monochrome theming for large rows of social icons. Given rather small sizes of those icons and their desire to be immediately recognizable, it’s no wonder that they augment the vector lines and typography with strong and often saturated colors. Placing a number of such icons in an otherwise balanced color palette usually creates too much visual noise and breaks the overall visual structure. However, a full-color strip of social icons looks just right on this page – playing off of color splashes in the large portfolio carousel, and, more importantly, following the saturation levels, horizontal layout and rough dimensions of vibrant icons in the smaller highlight strip. Speaking of which – move the mouse over those small thumbnails to see custom styled fading popups with bigger images.