Today’s post highlights the design of FoundationSix.com. There are two main things that i like about the site – the color palette and the lighting effects. An austere color selection of muted teal, desaturated brick brown and light grayish yellow is masterfully reinforced in all the visual elements. Various shades of teal are used for both the grainy background and the texts in the top half of the site framing the attractive three-dimensional portfolio that occupies the center part. To improve the legibility of navigation links the design uses both all-caps and darker drop shadows (in the same teal hue). Move the mouse over the navigation links to see the inverse inset effect that uses darker hue with lighter drop shadows. Brick brown is only used sparingly in the top part – for the main logo which has a nice rollover effect and adds a little depth by displaying a blurred drop shadow below the navigation bar separator line.

This is a recurring theme throughout the design – using drop shadows, radial gradients and other effects to add perspective and depth without overwhelming the visuals. Note the radial gradient behind the main tagline (“Beauty * Brains”), the perspective tilt of the side thumbnails in the center portfolio piece, the double soft drop shadows cast by the thumbnails (hinting at not one but two light sources), and slight vertical gradient in the bottom part of the site. Instead of being distracting, all of the effects gently guide the eye towards the center that highlights the existing work done by the agency.

Finally, note how the highlight brick brown from the main logo and footer section highlights is used in the left and right thumbnail. While the center thumbnail uses the same teal hue, extending the radial highlight into the footer, it is flanked by perfectly balanced bursts of brown which are then further offset (towards the left and right edge) by the double soft shadows.