Today’s post highlights the design of Zitrusfrisch.de. A muted monochromatic theme with small splashes of red icons to mark the new entries directs the attention to the main element – a 3*3 grid of elegantly styled highlights of portfolio works. The rest of the information is either hidden in an expanding “More” section in the header or neatly arranged in a small footer section that lists the contact info and provides a row of themed social icons. Moving the mouse over the portfolio thumbnails smoothly transitions to a full-color version, and clicking on the thumbnail shows a modal lightbox window with more details on the specific work and an animating slideshow of additional screenshots.
There is a slight usability problem in expanding the main info section (with the “Mehr” button in the header). Once the section is fully expanded, it can be closed with a small “X” button. However, the location of this button is not in the same spot as the “Mehr” button, requiring additional effort to move the mouse and acquiring a much smaller target to close the expanded section. On a more positive side, note how the thinner right column in this section balances out the wider left column due to the headshot, and how the tilt of the left shoulder directs the attention towards the center axis of the page.
Today’s post highlights the design of TheDesignCubicle.com by Brian Hoff (whose personal site was featured in this series a few weeks ago). A popular white / black / brick red color palette gets two additional colors – yellow for header, sidebar and footer highlights / rollovers, and light blue for main body hyperlinks. While the design uses consistent hyperlink and rollover colors in each section, there is a negative element when the visitor decides what is a link – four different colors are used for hyperlinks (white, yellow, light blue and black).
The main content is framed by two thing black strips on top and bottom, and two thicker brick red strips on the side. Note the simple patterned gutter strips running along the sides, as well as the muted pinstripe textures extending from the sides of the main header and footer section – creating subtle separation of the main content area. The center column is divided in four parts, with subtle linear grayscale gradients to separate between them. Clean typography, precise line spacing and smaller fonts on secondary elements (metadata, social links, categories) create a pleasant reading experience even giving the large amounts of text paragraphs.
Image by bookgrl
Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for August 2010 with over 1800 links from 55 aggregator posts:
Today’s post highlights the design of SweetSallies.com. With a soothing background palette of teal and light aquamarine, and splashes of olive brown for the texts, it uses a repeating floral pattern to create a friendly and playful vibe. The main page content is laid out in a narrow two-column grid that is framed to look like a real-life menu (with drop shadows elevating it above the background).
A lot of attention has been spent to fit all the essential information into a relatively small grid. The menu sections in the right column are interactive. Clicking on day names smoothly expands the relevant subsection, and moving the mouse over each menu entry (cupcakes and coffee) fades in a slightly translucent overlay with more information – all using the same teal color found in the header section.
The playful flowery theme is reinforced with multiple elements – woven chains in the header, vignettes around the main logo, hand-written fonts used on the logo, navigation menu elements and horizontal separators between the left-column information sections. Overall a very inviting and warm impression.
