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.