Artrocker

To solve the problem of limited width, we designed a double-height header to comfortably fit:

• Site logo
• Search
• Navigation
• Signup link
• Login
• Sponsor message
• Leaderboard ad
• Any special site promotions

This was also used for the site branding to give maximum impact and character. This had the advantage of allowing a comparatively lightweight design for the content areas of a page to enhance readability and give better page load times.

Many site designs need to use outlines or coloured backgrounds to separate areas of content, giving designs a boxy feel when more than one panel is used on a page. The strict use of a grid allowed us to avoid this technique and enables the layout to breathe whilst maintaining clear separation between elements. For SEO and accessibility purposes it was important to avoid the use of images for text (e.g. navigation). We have used a single typeface (Arial) for all site content and there is typographic and UI consistency between titles, topics, links and buttons. We have used visual cues throughout the design - for example, user comments have a different treatment and some topics have icons.

The previous site design had used small preset image sizes and while being consistent this was found to be very limiting visually. For the new design, we simply limited image widths to the full column size for articles and lists of articles. This gave the site a powerful impact and an image-driven look which contrasted well with the plain treatment of text. As most images don't fit the full column width, this gave a more ragged edge on the right side of the main content column. However, the use of a grid and left alignment of all images and text gives visual clarity and readability without over-repetition.