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:
- Using the majority of their website real estate to answer questions their audience is not asking,
- Ignoring the questions their audience wants to have answered, or,
- 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:
Header 1
Header 2
Header 3
Body Text
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.
AN EXAMPLE OF OVEREMPHASIS IS WHEN PEOPLE TYPE IN ALL CAPS ALL THE TIME. SOON, THE EMPHASIS EFFECT WEARS OFF AS CONTRAST IS THROWN OUT THE WINDOW.
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!
Market More. Spend Less.
Set yourself free from your shrinking marketing budget with my popular ebook Marketing on a Shoestring Budget! This ebook is jammed with practical ways to produce high-quality marketing on the cheap.
Inside, I’ll show you proven marketing tactics like…
-
- How to leverage low-cost technologies to reach your target market,
- How to craft a content marketing strategy on a bare-bones budget,
- The number one thing your website needs to do,
- The key to getting free, organic traffic to your website, and more.
No hype. No pie in the sky. Just real solutions for getting the job done with the budget you’ve got.
Featured image by Charles Taylor via Adobe Stock
