Design, uninterrupted #171

April 5th, 2011

Today’s post highlights the design of by Julie Franck. The top part sets the visual tone, complementing the main beige color with muted sand yellow, pink and light blue. The dark purple bar running along the top edge is the only occurrence of this color and provides a nice separation between the browser chrome and the site content (also note the muted appearance of the entries and simple rollover effects). A three-column grid of thumbnails takes the center stage, with nice rollover effects and two-step transition when the specific thumbnail is clicked. I particularly like the pulsating desaturated main icon displayed in a smaller overlay window while the full-size screenshot is loaded. On a much less positive side, the embedded navigation is not very usable. The screenshots have significantly different sizes, and you have to move the mouse to flip through the entries. Even worse than that, the overlay window seems to provide support for keyboard arrow navigation – which results in severe resize artifacts, incorrect flipping and an overall very jarring experience.

The bottom half shows two additional – and much smaller – sections. There’s a lot of vertical white space between each section, primarily to link the multiple navigation menus into the mouse-click-based navigation. This works quite well on the first two sections, with smooth scrolling of the content and precise vertical alignment along the top viewport edge. However, this brings a number of UX problems. The contact section is rather small, and clicking on the matching navigation icon does not align the last menu with the top viewport edge. The last of the four icons leads outside the main page altogether, and using light gray color on it is certainly not enough to highlight this – especially given consistent replication, distance from other icons and floating tooltips. Finally, if you’re scrolling the page manually (with the mouse or the keyboard), the extra vertical white space breaks the visual flow, especially around the middle section that is very light on content.

On a more positive note, i really like the icon styling in the contact section – borrowing the visual style from the navigation icons and arranging the seemingly clashing colors in an attractive way. Furthermore, the accompanying blog addresses most of the navigation and layout issues mentioned above. With much tighter positioning of content, delegation of the main navigation to the header, consistent application of the four main colors and paper texture with faint drop shadows it’s quite a feast.