How to create strong hierarchy in digital design
By: Monica Galvan
Tags: UX, UI, Visual Design, Web Design, Design

Hierarchy is a key element in design, creating a good user experience, and achieving the business goals of a website or app. It’s also one of the biggest mistakes new designers make. When there is no clear hierarchy on a website or an app, you risk frustrating the user and losing them as a potential customer. Let’s dive into what visual hierarchy is, tips for how to achieve it, and how you can use it to improve your websites and app designs.

What is visual hierarchy in design?

There are many definitions of hierarchy. Most refer to a system of organized rankings, it’s an order or power structure to help everyone know who is on top and most important. For example, at a company, this would be the CEO. The CEO is at the top of the pyramid, the top of the chain of command with various leaders and individual contributors underneath in the organization chart.

Visual hierarchy, on the other hand, is the principle of arranging elements to show their order of importance. If everything in your design is the same size, the same weight, or the same color, then nothing is important. This is even more paramount in creating a good user experience for web design. You want to capture the attention of your user and guide them through an experience. Whether it’s a large headline, a bright color, or the placement, there are many ways to create a strong level of hierarchy in web design.

Why is hierarchy important?

Now that we understand what hierarchy is, why is it so important specifically for web design? Our brains have to look at something, we have to understand what we should be looking at first.

If there are too many things to look at on a landing page, then our eyes will have no idea where to look first and process information. If the hierarchy is too confusing on a website, a user will get frustrated and exit the site altogether. This creates a bad user experience. You’ve lost a potential customer forever, they’re not coming back.

In order to achieve a goal for your user, you need to use hierarchy to guide them through the website experience. Are they there to log in and make a purchase? Do they need to pay a bill? Are they looking for information to reach out and hire a company? Or is it more for pleasure, maybe a browsing experience like YouTube or Netflix? Whatever the goal, you must work with the client and use your design expertise to achieve it.

What does good hierarchy look like?

Let’s take a look at some examples of websites using good hierarchy best practices. Take a look at these designs and see if you can spot why the hierarchy works well.

Example of good hierarchy in web design (source: squarespace.com)

In this example of Squarespace’s homepage, there’s a balance of hierarchy. The largest element is a glimpse into the Squarespace product, how you can use their tools to customize your own website.

Next, we read the headline “Everything you need to grow online.” which reinforces the mission behind Squarespace, a tool that helps you develop an online presence. There are clear calls to action with “Get started” buttons and also a balanced flow to the whitespace surrounding these elements.

Example of good hierarchy in web design (source: onemedical.com)

In this example, a large headline with clear contrast tells us immediately what One Medical is and how they help. Next, we notice the lifestyle photography, reinforcing the idea that you can get medical care from the comfort of your own home.

Example of good hierarchy in web design (source: squareup.com)

The centered layout in this example draws our eyes to the headline “Tools to run your business”. Followed by the group of photos underneath, we get a better sense of how Square can help your business. We’re also not bombarded with too many actions, one clear “Get started” CTA button or, in a secondary CTA style, the option to view more solutions.