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.
Today’s post highlights the design of CreativeSoapbox.com. With earthen brown and light beige as primary colors, desaturated orange is used for section headers and link rollovers. The top half of the page hosts a slide show with portfolio highlights, with an attractive brushstroke texture applied to the background. All-caps right-aligned navigation menu blends into the texture, and provides simple rollover effects that use the primary palette colors. The main content area is a four column layout with a spanning section describing the company services. The custom typography used in the section subheaders can benefit from more consistent kerning – see “RA” pairs in “Branding” and “Interactive”).
The main content section is extended into the footer, using a gradually fading overlay. Consistent usage of colors for texts and rollover links is maintained in the footer section. This section can benefit from a better alignment of its grid columns and those of the main section, especially given the strong visual connection between the two (established by the overlay effect mentioned above).
Today’s post highlights the previous design of ADifferentDesign.be by Kristof Orts (click the image for the full size view). Set in desaturated light brown with a fine noise background texture with a couple of diagonal highlights, the content floats around a pencil-drawn stylized self portrait. Both the portrait and the content text use a dark shade of brown color. A slightly lighter shade of the same color is used for the footer background, completing the minimal color palette. Saturated cerulean contrasts well with golden brown hues, and is used for the navigation menu rollover effects and highlights in the main description section. Three column layout for selected works continues in the footer section for links and contact information, bringing further geometric precision ardoun the hand drawn elements (envelope and banner ribbons). An oversized ampersand sign floating in the background hints at the rich typography, with custom fonts used for the main header and navigation menu subheaders (you can count three different ampersand glyphs).
Today’s post highlights the design of Branded07.com by Rob Palmer. Set in soothing bluish gray palette, the design combines precise geometrical shapes with stylized illustrations to create a unique and vibrant feel. The navigation bar uses a dark noise texture for the background. Note the highlight effect behind the carefully typeset main logo (with the custom shaped letter “a” reused in the favicon), and smooth highlight transitions as the mouse is moved over different navigation menu entries. The same dark noise texture is used in the sidebar that employs different shades of the main bluish gray color for the text elements and the social icons (move the mouse over the icons to see full color versions).
The usually boring search field has received a lot of attention. In addition to using the same color palette and a thick gradient border, the field is surrounded by stylized cloud illustrations, with some of the cloud edges concealing its bottom corners. A vibrant illustration of a puffin bird (wearing the same custom shaped letter “a” below a flowing cape) directs the eye towards the search box, inviting first-time visitors to explore what the site has to offer.
The puffin element is used on other places in the design, and nowhere better than the magnificently constructed footer. The footer is an oversized illustration of a peaceful pond surrounded by blooming cliffs, with a waterfall flowing from it. The diving puffins and the waterfall hint at the “treasures” of hidden content, further inviting the user to explore the site. The footer content is masterfully placed around the illustrations. A simple three-column list of links is set on top of a vertical gradient that guides the eye from the light background of the main content towards the darker shade used for the pond water illustration. While the horizontal separators between the links serve to delimit the rows, both vertical and horizontal fading make sure that they do not draw too much attention away from the links themselves.
And perhaps the best part of the footer is the color selection for the contact form, the bottom navigation and external logos. Set in a few different shades of gray, they blend perfectly with the barren parts of the cliffs surrounding the pond. Note how all the texts in the footer use lighter and darker shadows to improve readability for both light-on-dark and dark-on-light sections.
