Design, uninterrupted #59

August 18th, 2010

Today’s post highlights the design of HD-Live.co.uk. Partially done by the previously featured Rob Palmer of Branded07, it features a wide array of subtle and unobtrusive live content that makes it a prime example of a modern web design. Set in various shades of desaturated slate blue, the design mixes a number of oversized graphical elements together in an attractive, balanced and well-spaced layout.

The navigation bar is a set of inset circular faux buttons with simplistic themed icons. Moving the mouse over each button reveals the button tooltip in a quick fade slide animation. Follow the different links (such as “Speakers” or “Partners” to see how the main theme is maintained throughout the entire site, including the colors, stylized graphics, short text bursts with oversized fonts and the time ticker strip).

Animations play a pivotal role throughout the landing page. The big quotation box directly above the time ticker strip uses a longer cross-fade animation with attractive typography (note the quotation marks and italicized author name). The bottom part of the page features a three-column Twitter feed that tracks live results for the event-specific search terms. Each column uses a well-timed sequence of fading out the topmost tweet, loading the next result and then sliding up the updated content. Moving the mouse over the specific column pauses the animation sequence on that column, enabling easier interaction with the links in the currently shown tweets.

A simple footer with copyright notices and a nice styling of the ampersand glyph completes the design. Note how most of the content in the footer has much lower contrast than the rest of the site, while still using the same washed out slate blue palette with saturated light blue for link rollovers (that dovetails with the saturated colors used for the tweet birds in the section directly above it).