There are four differences between the two images. You can cheat and look at the SVN history :)

The original:

The latest:

Almost ready…

Today’s post highlights the design of SkylarAnderson.net. A limited color palette of light beige and light blue for links, combined with a precise grid, plenty of white space and simple typography create a clean, modern and enjoyable design. Beveled horizontal separators divide the main page in three sections. The header features an embedded portfolio slideshow with cross-fading thumbnails of the designer work. Note how the drop shadows and the overlay ribbon create a subtle 3D effect, bringing the slideshow a little closer to the reader. The middle section uses a three-column grid to provide more info, contact information and contact form. A somewhat bright text shadow color hurts the legibility of rather large text sections. Also, the OS-provided “Send” button stands apart from the otherwise beautifully styled text fields.

Today’s post highlights the design of think.dj by Deepak Thomas. An unorthodox single page design has three main sections – each with its own unique layout – executed in the same visual style that binds them together.

Set on the backdrop of a faded monochrome photo of the site creator, the header section features a tag cloud, a flowing introductory text and a row of stylized soft shaped social icons. Moving the mouse over the tag cloud entries reveals a fade-in transition effect that displays a custom tooltip. Moving the mouse over the social icons shows the same fading tooltip effect accompanied by a perfectly timed transition to the full color version of the icon. Note the hints of pinstripe texture on the tag cloud letters – and similarly themed vertical striped texture on the Twitter bird / “dj, thinkdj” image around the embedded tweet in the top-right corner of the header section.

The portfolio section is perhaps the most interesting one. Even though it is set in a precise five-column grid, it strongly deviates from the usual “crowd” of all-too-identical portfolio arrangements. Each column features work highlights in the specific design area, with custom paper-cut inspired vertical separators with small scissor illustrations – further reinforced by the tagline along the leading horizontal separator. Instead of arranging the portfolio as equal-height thumbnails with minimal text, the design adopts a freeform flowing approach. Thumbnails come in different heights, with subheaders and multiline descriptions in between. To maintain the overall site palette each thumbnail shows the monochrome version; this transitions to full-color on mouse rollover. Note how the overall feel is maintained by using the same link tooltip transitions, header text textures and consistent use of link / header colors.

Finally, the footer section features an oversized contact form set against splashes of vibrant orange ink – the first time a gray-blue palette gets a third color. Maintaining the visual connection to the rest of the page, the design uses consistent typography, texture effects and header colors. My favorite element is neatly tucked away in the bottom right corner – a simple swatch of four colors used in site palette – blue, orange, gray and black.