Building a Hierarchy in Design
According to the Dictionary widget on my Mac’s Dashboard, a hierarchy is
a system or organization in which people or groups are ranked one above the other according to status or authority
In other words, it’s a system where it’s clear that one thing is more important than another. So how do you establish an order of importance in design? I’m so glad you asked. The usual ways to do it are to use some of the basics of 2-D Design:
You can apply those same principles when you’re working with type.
Traditionally, the way to get attention in design, say on a poster, billboard, or newspaper advertisement, has been to make the headline big, bold, and red. It usually works. Capital letters work well, too.
So now we know where to look first. How about second?
That’s where subheads come in. It’s generally a newspaper/magazine term, but on the web it’s usually an
h2 or an
h3. Visually, it should stand out more than the body text, but not as much as the headline. So you could probably use a treatment similar to the headline, only smaller. Or use a treatment similar to the body text, only larger and bolder, or in a different color.
This helps people scan content, which has become the norm on the web. People don’t really read much online; they scan the headlines and subheadlines. Occasionally you can convince someone to read something if the headline is well-written, or if there is an important callout that is particularly attention-grabbing. (Whether this kind of approach to writing enforces our scanning habit or simply supports it is a different topic.) Callouts come from magazine design. Typically they are blips or excerpts from the content, set apart in a different color, type treatment, or type color so that they stand out.
Another way to create hierarchy is to indicate when bits of content are related but not necessarily part of the main text. This is usually in the form of an “aside” in books or a sidebar on a website.
I’ll go into this in more detail in another post, and I may even start a series that talks about the common patterns known as clichés, but I’ll touch on it for now since it’s relevant: certain patterns exist and continue to exist because we immediately see the hierarchy. We’ve seen this thing before, so we know what to look at first.
Here are some examples:
Websites: logo at top-left, navigation area at the top, main content area, sidebar (on the left if it’s a blog, on the right if it is a corporate site), copyright information in the footer.
Movie posters: top to bottom: stars’ names, stars’ floating heads, big title, with unreadable credits below. (If it’s a drama, bonus points for using Trajan in the title. It is THE movie font, you know.)
Newspapers: masthead across the top, big headline in bold letters, byline, photo, and story set in tiny columns beneath the headline. Rinse, lather, repeat.