The Foolproof Guide to Understanding Visual Hierarchy

By implementing the basics of visual hierarchy, your website can not only tell your viewer where to click, but it can also communicate everything you need to say—and all without a lick of copy. Through simple art class techniques, your website’s aesthetic and conversion rate can be completely transformed.

But before we can discuss how to create visual hierarchy, we have to talk about why we need it. Visual hierarchy is important for three reasons (let’s call them the 3 C’s):

Communication

Ultimately, the purpose of every website is communication. Even seemingly pointless websites, like heeeeeeeey.com, are saying something—in this instance, just, “Hey! Ho!”

Without visual hierarchy, the message of your site could be lost in the middle of a paragraph, when it should be loud and proud before the fold. The interface of your site should be congruent with your copy, in that it should present those same messages as clearly and effectively as possible.

Connection

People don’t buy Apple products because they work better; people buy Apple products because they feel good. Owning a Macbook doesn’t mean you have supremely better technology than your Microsoft counterpart; it means you have a beautifully designed product that makes you feel cool.

Your website should foster that same kind of connection with its viewers. Make websites that are so beautiful they’re immediately shared on Slack. That’s the “Why,” as Simon Sinek would put it—that’s what makes people buy. Visual hierarchy is essential to creating that “cool factor,” the kind that makes your eyes pop and your fingers rush to bookmark.

Conversion

When you’re designing a site for a client, chances are they have a specific function in mind, whether that be purchases, newsletter subscriptions, or even just a Facebook like. This should be one of the first questions you ask them: What do you want your target customer to do?

Let’s say you have an anchor link in the middle of your page that drops you down to the contact form. Simple, easy to code and effective, if done correctly. Now let’s say that anchor link is the same size and color as the body font, with no particular emphasis or design put into it. Who would click on it?

Now that we’ve established why you need to prioritize visual hierarchy, let’s break down exactly what that entails. Here are 5 basics of visual hierarchy you need to be aware of:

Shape

The human brain is a funny thing, always working to differentiate between objects. Check out this image:

basics of visual hierarchy

Without even consciously thinking about it, you know that there are three different shapes: a triangle, a circle and a square. Without giving it much thought at all, which one would you click?

There’s not yet a concrete way to predict that, and with other variables removed (like size, color and copy), your answers may totally vary. (Leave a comment below and let us know which one you picked!) Regardless, there is one that stood out to you more than the others, and that communicates the basic principle of shape in visual hierarchy.

Color

Color can speak. Color translates through languages, projects feelings and draws attention wherever you place it. You are completely in control of where the user’s eye goes on your web page; it’s not luck or chance that directs the eye—it’s design.

We’ve talked a lot about color here on Vandelay Design, but it never loses its significance as, inarguably, one of the most powerful elements of design. In the context of visual hierarchy, color acts in primarily two ways: creatively and functionally.

Color works creatively in that it is completely essential to branding. Color is inherently creative; it is one of the most basic aspects of art. While the color blue is often used on the web because of it’s universally trustworthy connotation, yellow can also be useful for catching the eye and drawing attention. Red indicates speed, relevant for anyone selling fast-paced services, and black is recognized as being a good gauge of “high-quality” products.

In functionality, then, color is equally as important. Let’s take a look at those shapes again:

basics of visual hierarchy

Does any shape in particular stand out to you now? If we had to bet, the average consumer would opt to click the yellow circle for no reason except that it’s the one that stands out. That’s how important color is—it wordlessly says exactly what you need to say.

Size

There’s an evolutionary reason why elephants and mice look the way they do. Like everything else in nature, their size has a purpose—it’s part of their biological composition. It makes them who they are.

The size of the elements on your page serve the same purpose; they communicate importance, desirability and emphasis in design. The site Awwwards.com made an excellent point when they said this:

“[Size] circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads.”

Think about that—with simple web design, you have the power to disrupt the very basic, Western process of reading. For centuries Westerners have read from left-to-right, and with just one text box you can completely turn that on its head. If that’s not something to be passionate about, what is?

Back to the shapes again. Notice anything new?

basics of visual hierarchy

Chances are the yellow circle is really standing out to you now. Even though the colors of the other two shapes have changed as well, there’s still one shape that sticks out like a sore thumb. This relates directly to the elements of…

Contrast and Dominance

The big, yellow circle stands out to the eye because it is different. In a world where so often we’re encouraged to fall in line and stick to the status quo, it can be encouraging as a designer to remember that it pays to stand out.

These elements of contrast and dominance are important because they create relevance between two seemingly unrelated objects. Let’s compare the image we started with and the one we have now:

basics of visual hierarchy

The yellow circle acts as the dominant figure, while the other shapes act in contrast, both to the circle and each other.

Going back to those three C’s: if we were implementing these concepts into web design, we might make a call-to-action button large, so it communicates importance, yellow, so it fosters a connection, and dominant on the page, so the button ensures conversions.

Visual hierarchy is relevant in every element of web design, from the images and fonts we choose to the way we format them. Those h2 headings at the top of every paragraph you just read? They’re larger than the body text for an obvious reason — they stand out.

And that’s the gist of it all, really. Foster dominance. Pick what you want to stand out. The more organized and intentional your website design is, the more conversions and connections you’re going to make.

What other elements of visual hierarchy do you rely on when designing websites? We’d love to hear all about your creative process in the comments below.

Related Posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.