The original slides available for download from the SlideShare site.

Design, uninterrupted #156

March 8th, 2011


Today’s post highlights the design of PracticallyModern.com by Jesse Brew (recently featured in the Retro:Active series). The site takes you on a fascinating visual journey that features meticulously chosen images and a great color palette. With only minimal text content for every entry, the main focus is on exploring the visuals that surround us – taken through a retro lens. The images are rich in soft natural browns, yellows, blues and greens, with only minimal incursion towards the red-violet spectrum. The predominant golden browns also form the basis of the supporting graphical elements – from the textured wooden bar in each entry header to brownish yellow links to the textured lead photograph in the site header.

The sidebar navigation is my favorite element here. While most sites resort to a simple bullet list of the recent entries, Jesse has crafted a vertical list of thin thumbnail slivers, each one showing a small visual glimpse of the matching entry. Given such strong reliance on images in the main content column it’s not surprising to see the same amount of visual polish that went into this bar. And finally, if i had to change one thing, i’d play with theming the facebook / twitter buttons, at least for the default state – the bright blues stick out like a sore thumb.

Design, uninterrupted #155

March 4th, 2011

Today’s post highlights the design of SaraWhite.com (@Sara_, as an aside, Sara works as the creative director at MetaLab which is responsible for entry #3 on this series). This soothing tone of this single-page site is set by the creased paper texture and the beautiful watercolor illustration of a blooming lilac tree. Note how some of the rougher brush strokes emulate the physical appearance of a watercolor painting, defined by the paper creases and uneven travel of pigment through the paper pores. This muted lilac color also defines the color palette that adds a darker shade of lilac for section headers, link rollovers and a few tongue-in-cheek illustrations in the second section.

A relaxed tone set by the header illustration is mirrored in simple, human and soft tone of the text sections. Attractively styled thumbnails of Sara’s portfolio and her Flickr stream follow the precise four-column grid of the main content that switches effortlessly to one or two columns as needed. Note that while the thumbnails are not styled with the site’s color palette, they don’t appear to overload the eye with too much color; this can be attributed to subdued tones and a great color balance across the bottom row that stays within a rather narrow hue segment of soft natural colors.

Design, uninterrupted #154

March 3rd, 2011

Today’s post highlights the design of MinTran.com (@mintran). This Tumblr-powered site features a relaxed and attractive color palette of pastel blues, greens and browns, adding a number of fine-grained textures and beautifully styled “badges” in the header and footer; note the vignette typography, varied lighting, top double outlines and worn out texture in these two badges. The main content is laid out in two simple columns, with ample spacing and subdued drop shadows around embedded images. Note how the palette colors are used to code each entry based on its type (link, image, video, search box), and how the color is applied consistently to all the elements in the specific entry – from the thumbnail to background to title caption to hyperlinks.