Design, uninterrupted #81

October 13th, 2010

Today’s post highlights the design of ShannonMoeller.com. Clean typography, simple grid and precise visual balance are combined with a pastel color scheme and light graphical elements to create an inviting and humane experience.

The playful tone is set by a dashed path of a paper airplane that circles the current location in the navigation menu (click on different menu items to see how this element anchors the top of the page). Directly below we find a portfolio arranged in a slightly uneven grid of faux-3D paper notes. A repeating muted pattern of salamanders and a stylized illustration of an oversized green refrigerator complete the header section. The refrigerator illustration creates a certain visual perspective mismatch – it is positioned as a three-dimensional object with shadows between its stands that match the edge highlights. However, the wooden pattern behind it and the rather flat flow of portfolio thumbnails negate this perceived depth and create a certain unease the more you analyze the scene.

The bottom half highlights the internet activity of the designer – blog entries, tweets, pictures and music. Move the mouse over the subsection header to see the rollover effects (color and captions). Note how the uneven grid of the portfolio thumbnails is repeated in the layout of picture and album thumbnails. A consistent muted palette of sand yellow and desaturated blue completes this part. One suggestion would be to lose the colors of the section header icons and make them monochromatic.

Finally, the footer completes the design, bringing back the salamander background pattern, sketch outline of the refrigerator and the muted sand yellow foreground color.