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.