Lesson 1: Design Principles
Hierarchy
What is Hierarchy?
Visual hierarchy refers to the arrangement of elements based on their order of importance.
Elements are the content and objects in your design: the images, the illustrations, the text, the buttons – basically everything you put on your blank page is an element.
In design, hierarchy is used to direct the attention of your user to specific elements and guide them throughout your design.
Source: Appleton
Let’s think about hierarchy from the eye of a reader/viewer. Take a look at this block of text:
Source: Natsumi Nishizumi
The left is an example of text with no hierarchy. Every sentence and every paragraph looks the same – same font, same text, same color, same size. Nothing, in particular, stands out, so all we see is one big block of text. Think about the long essays you had to read in school or the long captions you see on Instagram – are you more likely to actually read long blocks of text, skim them, or just keep scrolling on your phone until something does catch your attention?
Now, let’s look at the example on the right with hierarchy involved. Now, we have a headline that immediately catches our attention. The blocks of text are arranged from big to small, top to bottom, which helps to guide our eyes to move from the headline to the subheading to the body copy (copy refers to the text in a design; body copy refers to the main content, which is the paragraph in this case). The hierarchy established here also helps to break up the long block of text, thus making the content less intimidating and easier to read.
So why is hierarchy in design important?
Hierarchy can be created with all of the elements in your design, not just the text.
Good use of hierarchy in your design can help to attract your user’s attention and focus it, and allows you to deliver content in a way that is easy for the user to understand.
On the other hand, poor use (or no use) of hierarchy can often lead to a cluttered, confusing, or overwhelming design.
When you start to design a page, and you start to throw elements on that page like text, images, buttons, icons, etc., it’s easy to suddenly end up with a page full of elements all fighting for the user’s attention. Without hierarchy, there aren’t particular items that stand out to the user and it may be unclear what you actually want the user to focus on.
Take a look at this website, for example:
Did this website make you go “What the heck is going on?”? Now yes, this is an extreme example, but it illustrates the point that when there isn’t a clear focal point, a page can look really messy really quickly.
Let’s look at a few more examples.
Source: Medium
Here’s a more realistic example of a website hero. This design looks okay, but let’s look at what the sizing and spacing of the elements here are doing. There is some hierarchy already going on, but because everything feels equally large and the elements are so close to each other, none elements really stand out from one another. The brand name and the headline are almost the same size as the body copy (the paragraph). The large text is also competing with the large lightbulb.
Let’s see what happens when we play with the sizing and spacing.
In this iteration, there is now a clear hierarchy that guides the user:
1: First, we see the light bulb.
2: Second, we read the headline.
3: Third, we read the paragraph.
4: Lastly, we see the call to action (the button) and the brand name.
So what did we change?
- Size – We’ve made a clear distinction between the headline and the paragraph by increasing the size difference. We also decreased the size of the light bulb to create more space around the elements.
- Spacing – We’ve also created separation between the elements by physically separating them. The brand name is now farther apart from the rest of the content, which helps the user focus on the main content and not the brand. The light bulb is also placed further away from the text.
What effects did these changes have?
This iteration introduces white space to create hierarchy. White space, or negative space, refers to the space in a design that isn’t being occupied by an element – so basically all that empty space around the text and the light bulb. By decreasing the size of the elements and making use of white space in the design, we’ve effectively given each element enough “breathing room”. This means that the elements are now far enough from each other to prevent them from competing for our attention. With these changes in size and spacing, we were able to establish hierarchy, resulting in a cleaner and more digestible design.
Let’s look at one last example – one you see all the time.
Source: Apple
You probably know Apple for their super minimalist, super clean design, but do you know why this works? It works because by eliminating distractions and limiting what’s on an ad to only what’s needed, Apple effectively pulls your focus to what matters the most: the product. Apple doesn’t try to fill every space on this page; instead they use the white space as a tool to let the product shine. There’s also the use of color here that creates contrast; they could’ve used a white iPhone or a silver one, but the pop of green stands out and instantly catches our attention.
The hierarchy we see here:
1: First, we see the iPhone. The image is the largest and most colorful element.
2: Second, we see the headline, which is the second largest element.
3: Next, our eyes naturally lead down to the punchy line of copy (“Your new superpower.”).
4: Lastly, we see the call to action, or the blue links.
Establishing Hierarchy
Okay–we’re starting to get what hierarchy is. But how do actually establish hierarchy in design?
Start by assigning an order of importance to the elements of your design. When a user sees your design, what should they see first? Second? Last? This should be your order of importance.
A good strategy is to design your content in a way that makes the most important element the most prominent element on the page, the second most important element the second most prominent, and so on. This way, you can create a visual flow to guide your user throughout your design.
If you need help figuring out the order, try thinking of their purposes:
1: Attract – the most important item should grab the user’s attention and attract them.
2: Intrigue – the second most important item should pique the user’s interest.
3: Inform – the third most important item should deliver the message.
4: Engage – the last item should be the call to action. What steps do you want the user to take?
To get a better understanding of this concept, watch this quick video.
For a website, the hierarchy might look like some of the examples we’ve already seen:
1: The image of the product to attract the user
2: The headline of the product to pique the user’s interest
3: The description of the product to inform the user of a message
4: The call to action, usually a button or a link.
To establish hierarchy in design, you’ll want to learn some methods to distinguish one element from another. Watch the video below by Flux Academy to learn how to use size, color, alignment, and more to create hierarchy. I recommend watching the entire video, but you can skip to 5:40 to skip straight to the methods.
The Takeaway
By establishing a hierarchy to guide users throughout your design, you can create a website that is easy to navigate, easy to digest, and easy on the eyes.