Hierarchy in Web Design: The Art and Science of Being Unforgettable

Let’s get down to brass tacks. There’s one fundamental goal to every digital marketing campaign — be unforgettable (in a good way). In this post, discover how user interface (UI) design hierarchy helps keep your college or university’s brand top-of-mind, when used properly.

Here’s some good news for you: Most of what your target audience is looking at right now on the Internet is forgettable. Why? Because your competition is doing the following:

  1. Using the majority of their website real estate to answer questions their audience is not asking,
  2. Ignoring the questions their audience wants to have answered, or,
  3. Answering the questions of their audience without using the principles of web writing that converts.

Good digital marketing begins with knowing the questions your audience is asking and answering them.

But the next step in digital marketing (and almost as important) is knowing how to make your answers stick in the minds of your audience.

So how can you set yourself apart from other college and university websites and make yourself unforgettable?

In a previous post, I shared 5 Web Writing Secrets that lead to higher conversions with you.

But in this post, I want to tell you about the science behind design hierarchy and how it makes your brand stick in the minds of your audience.

First, what is web design hierarchy?

A hierarchy is “any system of persons or things ranked one above another.” Hierarchies are designed to give order and organization to whatever entity they are applied to.

To apply this to web design, you have to think of all the elements on the page and rank them in order of elements having the greatest importance to your audience to those least important.

Typically, the concepts and ideas your audience must remember are ranked as most important.

Those elements of the page that would just be nice for them to remember are relatively less important and don’t need as much emphasis.

If the page has a properly built web design hierarchy, your reader will naturally be drawn to the most important elements first and then pulled into the rest of the content.

Techniques to Create a Web Design Hierarchy

A web design hierarchy is created through the use of visually contrasting elements or contrast in writing style (such as the cadence of the writing).

Here are some techniques to create visual contrast on your page:

Emphasis Techniques

  • Typography. Using different font types on your page will create contrast and help your reader to discern the hierarchy you designed for the page. A good rule of thumb from graphic design is to use at least two contrasting font types (a serif and a san serif font combo is preferred) with no more than three.
  • Text Size. Generally speaking, the larger the font size, the greater the importance. When all of your text is the same size, there’s little to no contrast and the reader will have a difficult time seeing the order of the ideas on your page. Having the same-size font across your page decreases scannability, which will bounce many of your prospective readers from the page.
  • Text Color. Contrasting colors will help draw your visitor’s attention to the concepts you need your audience to remember. Note that there are certain colors that draw attention better than others. For example, red has a greater intensity than blue, and so produces a naturally greater emphasis. Use color sparingly, though….too much is overwhelming and needs to be part of a greater design look.
  • Text Weight. Bold, italics, normal, thin, and “ultrathin” are common descriptions of text weight that you’ll see.
  • Text Style. Take certain parts of your text and write them in all caps to bring emphasis to them.

Combining these different techniques can increase the ranking of an element by producing greater emphasis.

For example, if you want a header to stand out from the body text, you’ll at least want to increase the text size and change the text color and typography.

A text-based hierarchy is pretty easy to see here in this example:

How do you choose the colors and typography for your web design hierarchy?

For most colleges and university websites, you’ll simply take the colors and fonts already in your brand elements such as your logo.

De-Emphasis Techniques

Instead of adding emphasis to make an element stand out, you can choose to de-emphasize it.

For example, you can de-emphasize image captions by decreasing their text size, changing the text’s typography, or changing the text color to a color with less intensity.

This will decrease the image caption’s place in the web design hierarchy, which will make the other elements, like your body text, stand out all the more.

Remember that often in design, less is more.

The overuse of any of these emphasis techniques will begin to have a counter-effect as the level of contrast declines.

De-emphasizing certain elements so that they’re lower in the web design hierarchy is important so that visual contrast is maintained.


Dominance Technique

Emphasis makes elements more notable through contrasting colors, styles, weights, and more. Dominance makes an element notable to the viewer through how common the element is on the page.

Paragraphs of text do not need great emphasis because they are already noticeable to the visitor by how much text is represented in the paragraph. You simply can’t help but notice a block of text on a page, even if it is not emphasized, because it is the dominant element.

When using web design hierarchy, paragraphs are also visual elements that the visitor will notice, so pay attention to their size.

The rule of thumb is that your text should have a mixture of short and long paragraphs ranging from 1–4 lines each.

The Science Behind Web Design Hierarchy

There’s a good, psychological reason that proper web design hierarchy helps visitors remember your content — chunking.

It’s long been known that the human brain commits small units of information, or chunks, to memory much easier than long strings of data.

This is why we “chunk” together important numbers that we need to remember, like phone numbers.

It’s much easier to remember this number (487) 251–3087 than this number 4872513087. Your brain feels more comfortable processing the number when it’s formatted in chunks as in the first example.

So tie a string on your finger and remember to use these tricks of web design hierarchy to make your content unforgettable.

For help with your website’s design and/or navigation hierarchy, please reach out to us here!

Originally published at www.caylor-solutions.com on June 19, 2017.




President & Founder Caylor Solutions Husband. Dad. Learner. Thinker. Branding, Marketing, Problem Solver for Education. Apostle's Creed. #highered #marketing

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Just One Designer’s UX Methodology

How to Show your Project Progress to your Client in Figma

Product Management Notes: Design

Day 3 — Laws of UX Part 1 of 4

Development Snapshot: 28 September 2021

A data visualization of drug usage in the US

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bart Caylor

Bart Caylor

President & Founder Caylor Solutions Husband. Dad. Learner. Thinker. Branding, Marketing, Problem Solver for Education. Apostle's Creed. #highered #marketing

More from Medium

Improving My Life With Design

5 tips for using Canva for graphic design effectively

A dark brick wall with neon text at the center. The text reads, “This is the sign you’ve been looking for.”

UX/UI: The Art of Management

Top NYC Interior Designers On Instagram