Design

Artrocker.com was based on a 960 pixel screen width to comfortably fit common resolutions. A key driver was to allow flexibility in ad unit sizes including site takeovers. On most sites, takeovers are added to a site layout and they cause layout and horizontal scrolling issues by adding to a site width and height. In this case, it was decided to fully integrate them into the layout. A grid was designed around the 3 top standard ad formats and included regions for running a site takeover. A requirement was that the site could use a standard MPU unit or the new larger MPU unit becoming more popular in Europe and that this would sit 'above the fold'. It was also desirable that this could be doubled in length for a half-page ad unit.

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.

This site was for a mini-festival of electronic music in Barcelona. The site navigation was flattened and took the form of a web-based flyer, with some links directly to the participants and some to information about the artists and links to mp3s. The home page contained an image of the printed event flyer and all body text was displayed in English and Spanish.

For the following year, we had a day to design the site and it was presented as a simple brochure. The style of the design was compact and minimal with a focus on clear presentation of information.

A very early design, the aim here was a minimal clean look coupled with a sense of playfulness. This included some quirky design elements such as the playable navigation bar and cloud-based link page without sacrificing usability.