Design, uninterrupted #88

October 22nd, 2010

Today’s post highlights the design of BohemiaDesign.co.uk. A carefully crafted design reflects the self-professed refined taste of a boutique shop of hand selected items – from the cerulean color palette to delicate floral background patterns in the header, from ornamental navigation arrows of product slideshows to vignette hand written fonts used in the bottom half, from simple typography to artfully themed icons of external brands.

On a less positive side, the design can be a little bit more consistent in its usage of foreground colors for section headers and links. A mix of slate blue, dark cerulean and orange is inconsistent at best and misleading at worst. It is also not immediately clear what is the interaction between the currency and country dropdowns in the expandable header bar at the top of the page. Changing a country also selects the matching currency, but changing the currency does not change the country selection.

Yet another language drop down causes automatic translation of the content and poses many more problems that it solves (or aims to solve). Things such as image-based menu header that remains untranslated, translated content that overflows the intended visual bounds (try switching to German and scroll all the way down), mismatch between orientation of textual and visual elements under right-to-left languages (switch to Hebrew), mix of translated and non-translated content in the same text block (switch to Russian) are just a few examples of how an automatic tool can destroy a hand tuned visual structure.

Design, uninterrupted #87

October 21st, 2010


Today’s post highlights the visuals of Le28Thiers.Fr. A rich warm color palette of mahoganies and deep peaches, fine wooden textures and baroque illustrations create an aura of exclusivity and refinement. The eye is immediately drawn to the martini glass surrounded by ripe citrus fruit and green olives. Polished wooden texture with vanishing perspective, radial highlights and blurred reflection create an inviting three dimensional scene (that is unfortunately marred by the optically incorrect reflection of the glass stem).

The menu slideshow whets the appetite by showing an attractive selection of dishes and drinks, with full size pictures shown in lightbox on clicking each item. The menu entries are also highlighted in other parts of the site, this time using a Flash-based clicker that features complex rollover effects that combine zooming, blurring and translucent description tooltips.

Design, uninterrupted #86

October 20th, 2010

Today’s post highlights the design of JeroenHoman.com. A single-page design chooses to put the portfolio as a three-column grid of small thumbnails (as opposed to a scrollable slideshow), with larger images appearing in lightboxes on click. The top part of the page features a rather haphazard mix of serif and sans-serif large fonts of wildly varying sizes. While it is a common practice to use images for high fidelity display of the text, most of the smaller texts are blurry and not well kerned (see the gap between A and U in “Beautiful design”).

I like the usage of grayscale palette that is combined with large swaths of grungy slightly “stained” background patterns to break the large vertical span of the top section. Subtle drop shadows around the portfolio thumbnails bring them slightly forward, further highlighting their strong grid. The contact form in the footer can lose some of the bold all-caps labels and use fewer font styles. With an overall simplification and cleaning of typography this can become a polished and well rounded experience.

Design, uninterrupted #85

October 19th, 2010

Today’s post highlights the design of Favela.se. A predominantly monochrome palette uses a few splashes of light pink for navigation controls and link rollovers, directing the eye towards a full-width full-color portfolio slideshow that features a smooth auto-advance animation and an ample view into the details of the specific design job. Thumbnails of recent blog entries maintain the same “widescreen” ratio as the portfolio slideshow, and two columns of text snippets separated with custom type headers bring the visual balance back to the center. The only thing i’d change would be to vertically flip the thumbnail portrait next to the contact information in the right side of the header to look towards the main content instead of away from it.