Design, uninterrupted #176

April 18th, 2011

Today’s post highlights the design of PoundAndGrain.com. The landing page has a nice visual rhythm with strong red color framing and separating the content, clean typography and a number of background patterns to bring visual separation between the different sections. Subtle drop shadows, consistent usage of dotted lines and the radial highlight behind the oversized header typography further highlight the attention to details. The “Work” section deserves a special mention – with its nice sliding transition to the first portfolio entry and the static positioning of navigation buttons that enables comfortable browsing without moving the mouse – within the specific entry and between entries.

Moving the mouse over the thumbnail slideshow of the specific project shows not only the navigation buttons, but also a translucent plus sign that indicates a larger available version. When you click it with the mouse, the larger version is displayed in a lightbox. The styling of the lightbox is my favorite design element – with a thick red outline as a background layer, accented by the thin drop shadow around the screenshot. This layering is further highlighted by the gorgeous styling of the “close”, “prev” and “next” buttons (the later seen on rollover); the only visual gaffe seems to be an extra pixel shift on the folded part of the “prev” button that overlaps the thick outer border of the lightbox.