My son and daughter taking a walk in the forest

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.

Today’s post highlights the design of MarkJardine.com. Mark is the designer for Tapbots, and the site design borrows heavily from the colors, textures, lighting and geometrical elements from the Tapbots applications (such as Convertbot). Set in a cold monochromatic palette that mixes in saturated steel blue, it uses a simple two-column grid with a separator gutter panel that uses a number of lighting effects to add extra dimensionality to the layout. The main content is using a strict monochromatic palette, adding noise texture to break large areas of white space, subtle drop shadows around the folded corners of embedded images and slightly curved callout contours around the entry texts. Note the marker icons in the separator gutter panels that differentiate between various content types (links, images, video clips, quotes etc).

Today’s post highlights the design of DesignDisease.com. A rich pastel color scheme, a wide array of geometrical patterns, a string two-column grid and consistent use of rollover animations make it a memorable experience.

My favorite part is the usage of the color palette for transitioning between different sections on the main page. The color palette consists of three primary and two secondary colors. Pastel yellow, light blue and brownish gray are used for solid background fills, as well as for section headers and texts. Brick orange and dark purple are used in a few places for the subsection headers. The main page has four sections: the header, the latest project, the main section and the footer. Each section has its own combination of the primary colors for background and foreground, with an intricate bleeding of colors at the seams between the sections.

While other designs feature either an immediate or a smooth color transition between sections with different background, the designers opted out to use semi-random patterns of extruding rectangular blocks that borrow and mix the background colors from both sections at the seams. Color mixing is done in both saturation and value, creating a jagged yet pleasing visual effect along the transition seams. In addition, note how the transition from the header to the latest project uses all five palette colors, with heavy emphasis on orange and purple hues.

The main page features a strong two-column grid. Note how the content in each section is divided in two columns, with perfect inter-section alignment further emphasized by guider line segments and small vertical rectangles along the left edge of the right column. One can even see a “phantom” third column in between the two, containing stylized themed icons corresponding to the subsection headers in the rightmost column.

Finally, the animations. If you move the mouse over the navigation menu, you will see a fading sequence in which the main element (under the mouse) becomes more saturated, while all the other elements gradually fade out. The same effect is applied on other sections – move the mouse over the thumbnail strips in the main section, and over the link lists in the right column. The same effect is applied consistently throughout the site – for example on “With love” and “Portfolio” pages. The only thing i would change would be to make the transition to use saturated colors a gradual process instead of an immediate switch.