Design, uninterrupted #147

February 22nd, 2011

Today’s post highlights the design of DotVita.com by Dave Onkels (@daveonkels) and Chris Vogel (@imchrisvogel). A deceptively simple landing page has two main parts, both comfortably fitting above the fold. The top part puts a spin on the main tagline, framing a picture of an air stewardess with beautfully styled condensed typography, all laid out on top of an intricate fantasy landmass map that fades towards the left and right edges.

Note the exquisite interplay of the three main colors from the site logo, earthen brown, raspberry red and light orange. The desaturated brown of the map frames the much heavier brown of the woman’s hair and eyes and highlights her fair skin tone, while the red and orange of her uniform fabric and buttons are mirrored in tall double arrows that lead to more content. The bottom half of the landing page uses a more somber monochromatic color scheme, with three simple content boxes, a thick slanted dash separator and a simple footer with contact information.

The “Logbook” page connects the “30,000 feet” tagline to the studio portfolio, with an attractive “altimeter” that simulates physical descent the closer you get to the bottom of the page. The two arrows at the bottom of the altimeter widget allow scrolling the content, but this is not a very usable affordance. While a previous click is being processed and the content still scrolls, subsequent clicks are ignored; in addition, dragging the pointer arrow does not have any effect.

The “Contact” and “About” reuse the layout and the palette of the main landing page, although with no striking illustrations. However, the “Logbook” page mentioned earlier features an illustration of a vintage suitcase that makes me wish that other pages had such great header illustrations as well.