Visual Hierarchy In Web Design

When a potential client approaches your website, you want to capture their attention with your catchy tagline — and not have them stumble through the visual clutter first. This is what visual hierarchy is all about, it’s about guiding the viewer towards what you want them to see. It’s about putting first things first.

Visual hierarchy is…

about presenting the components in a cohesive manner, it’s about creating a flow. It’s a set of principles on how to prioritize elements on your layout in order to make everything readable, understandable, and digestible.

A design without visual hierarchy, even if the content of your website is well-thought-out and informative, creates the impression in the viewers that they’re looking at something by Jackson Pollock. They can’t navigate it, they can’t find the information they need, and they leave disgruntled as your conversion rate suffers. Don’t let your designing team get too creative and forget the business goals of your website. Make a readable website by putting everything in line.

How we look at things

Our eyes are not egalitarian, we don’t look at everything equally. We value order and we prioritize. In cultures where, as kids, we learn to read from left to right and from top to bottom, we carry it throughout our lives not just for reading: we look at everything left to right and top to bottom, this is how we see the world. What does that mean for your web page?

The way people look at the page for Apple Watch via Nielsen Norman Group:

These are the two main ways we approach websites:

Z pattern. We look at the top left, then go right, then scan through the middle and check what’s there at the end. This pattern is more common for less busy designs: say, that’s how the viewer will look at the first screen of your landing, where there’s not all that much text and the visuals aren’t busy or cluttered.

F pattern. For the pages with a lot of text, we put in a little more attention. *A little more* Not much more, because barely anyone really reads online. We read in horizontal movement, and as the text progresses, we get distracted. The implication of this is that you should put the most important information into headlines and subheaders, and try to start every sentence with the most important thing (or at least, something attention-grabbing). In hindsight, that might seem like simple common sense.

Composition: drawing attention and pushing ahead

Now, let’s take a step back. Visual hierarchy is only a part of the overall composition. And what is composition? When you look at a picture and you’re drawn to the first thing that the author wanted you to see, that’s a well-composed image.

Composition is all the principles on which we decide how to arrange the components on the page layout. Generally speaking, on most websites you’ll see more static composition: layouts feel steady, solid. But you can also use composition to create something exciting, to convey motion and energy. For example, here’s the project we’ve made for Legionfarm, a gaming service:

Even composition alone, everything tilted, reminiscent of Dutch angles for all you film buffs out there, can get your blood going. Of course, it is supported with the color scheme, the typefaces, the content, and everything else, all working towards the same idea. You can learn more about our process on Legionfarm in our case story.

Focal points: the things that matter

Divide your rectangle into three rows and three columns.

This is the rule of thirds, the simplest way to look at the composition. It’s not as applicable for web and UI, because you need to consider functionality and UX and not just the visuals, but it’s still a great place to start.

Let’s look here. Your eyes are drawn towards the center, aren’t they? You want your focal points, the most important things on your page, to be somewhere near the center, and not hiding out on the periphery. But that’s not enough. Let’s take a look at this example here:

Not looking at the center first anymore. Let’s discuss how to set the hierarchy right, and how to create a meaningful difference between all the components of your design.

Details: colors, sizes, proximity

Size. Size matters, you’re gonna need a bigger boat, etc. We first look at the big things as the most important ones and if we find them relevant, or interesting, or important to us, we want to learn more. For example, you don’t want your call to actions to be upstaged with some bigger buttons directing to less important things.

Colors. Colors have their own hierarchy, and can greatly communicate a mood, a feeling, but that’s a whole other subject. In visual hierarchy it’s simple: bold colors draw more attention than more muted, less vibrant colors. And if you have a monochrome website, a sudden red element will catch every eye, even if it’s tiny. Keep in mind the contrast: for example, while bright yellow is an exciting color, it doesn’t stand out on the white background. And of course, you can’t make everything every shade of the rainbow. When everything stands out, nothing does.

The color literally highlighting the important components as seen on the website we’ve made for LaborX.

Proximity. When we have different objects right next to each other, it suggests a relationship between them. Now we don’t see them as separate objects, we see them as a group. This can be used to easily categorize objects.

These guys are clearly friends, and these are either not on speaking terms or are diligent about social distancing.

Negative space. Negative space, or commonly called white space, is emptiness. It’s the nothing in-between different elements. This void is very important: the principles of the visual hierarchy are all about putting the right accents on the right things. And you want the important thing to stand out, to cut a striking figure. Give it some breathing room.

Hierarchy in typography

And your text follows the same common sense: important things come first, specifics come later. On the first level, you have your headline, which should not be outshined by the visuals. Generally speaking, on a corporate website, the visuals are there to illustrate and support the text, not the main show. So, you need to have a big headline. And then you have your big headline, then smaller subheaders and captions, and smaller yet the body of the text. Of course, it’s not just for the visuals, your H1, H2, H3, and so on, also affect your SEO.

The important thing with the text, no matter how important, interesting, endlessly fascinating it might be, you can’t drown people in it. As we’ve mentioned earlier, people mostly scan pages rather than attentively read them. Let everyone take breaks, it’s not a sprint. Brighten up the layout of your page with the visual overtaking here and there.

This is how this article would’ve looked without any images. No way anyone would sit down and actually read the whole thing, at least, not in one sitting.

And if you’re in an experimental mood, if you’re looking for a more unusual, bolder design, all your text could be the same size. Easy. Just need to use something other than size to differentiate it. As mentioned earlier, you could use colors: make your headlines some vivid, acidic color and keep the main text plain old black on white. Or you could use a wild, attention-grabbing typeface for the headlines. And so on. But why?

Patterns and breaking out of them

Your visual hierarchy, your composition, your whole design should follow a single idea, a single concept. If you’re telling a story about your product, on your first screen you immediately show it in action, as the biggest element on the page — as an example, here’s the website for Revolut:

And then you can get into details on what it does, the many accolades your company received, and whatever else you need to show on your page, depending on the task at hand. The patterns are there for a reason — we’re used to things being a certain way. If you break them, break them with intent and good reason. Don’t make your call to action button small and grey for no reason.

Your website is there for a reason. It has business goals, it should sell, convert, whatever it is that you need from your website. Every single page is there for a reason, and they all should follow the same concept, the same uniform idea. To create a successful website, you need to structure it right. Put first things first.