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:

  • size
  • color
  • weight
  • contrast

You can apply those same principles when you’re working with type.

Big, Bold, and Red: create hierarchy with size, weight, and color.

Big, Bold, and Red: create hierarchy with size, weight, and color.

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.

Common Patterns

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:

A common website header has the logo at the top left corner.

A common website header has the logo at the top left corner.

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.

A typical movie poster layout, complete with floating heads and unreadable text at bottom

A typical movie poster layout, complete with floating heads and unreadable text at bottom

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 all follow the same general layout conventions.

Newspapers all follow the same general layout conventions.

Newspapers: masthead across the top, big headline in bold letters, byline, photo, and story set in tiny columns beneath the headline. Rinse, lather, repeat.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>