Visual Communications - Week 1 - Website Analysis

Website Analysishttp://percussionlab.com
Don Miller
Visual Communications
ITP – Fall 2009

Grid Analysis – Normal View
5. Make the negative space part of the design
Percussion Lab uses a content heavy vertical layout that focuses your attention on the center, rather than having your eyes wander across a wider page.
9. Work with a grid
There is a noticeable grid on each page, and they are related.
There is little unused space within the website’s “range”.
Very little branding other than the Percussion Lab logo in the upper left of every page.

Grid Analysis – Full View
9. Work with a grid
The full view reveals a symmetrical menu bar at the bottom of the page, but with links to different social networks and contact / about information. It stretches to match browser width, framing the content between the two menus.
The only advertisement is at the centered at the bottom of the page. This placement doesn’t distract you when browsing the main page.

Color Analysis
4. Pick colors for a reason
The layout is dark, with navigational “boxes” in black and content boxes in varying shades of grey.
However, a bright blue is used to mark featured content.
5. Make the negative space part of the design
The dark colors against the bright blue let you know that its featured content, without explicitly mentioning it.

Featured Content
Background
Navigational / Information boxes
Contributor / User sets
These colors stress a unsaid hierarchy.

Layout
7. Establish a hierarchy
Featured content is brightly colored and larger on the front page.
Menus are the top and bottom help users to find their way to pages, in addition to the varied content featured on the front page.
Pictures
DJ / musician photos, record label logos, album covers, and more are used to represent different mixes on the front page.

Typography & Justification
3. Use only 1 or 2 typeface families
Percussion Lab uses a single san-serif typeface, but utilizes bold, italic, color, and sizing differences to vary the look.
The colors are identical (with a few additions) to the colors used in the “boxes” on the page.
8. Stick to one layout justification
This site uses left justification for its text.

Consistency
1. Have an idea
From the moment you visit the page, it is clear that the site was created to deliver musical content.
The front page is content-heavy, but easy to navigate.
Sub-pages on the site are consistent in design, color, and navigation.
There is little repeated or unnecessary information.
2. Use elements that support the idea
The site is clean, modern, and “fashionable” looking. It reads like music reviews from popular magazines.

Sub-pages have similar navigation and features as the front page.
They allow users to quickly comment and see related mixes.

Usability
6. Communicate (Tell it like it is)
The front page offers more than just simple navigation to sub-pages, but allows users to start streaming, downloading, sharing, and “loving” content right away.
10. Be intuitive
Mouseovers allow the user to perform some of the above mentioned tasks.

Both the main and sub-pages have quick, intuitive mouseover features.
You can “love” the mix, stream it, share it, or download it.
Other sets have a stream or love option, but can be downloaded and shared on sub-pages.
This stresses the importance of the featured sets on the main page.