SOME "LIGHT" READING

Visual Hierarchy

April 15, 2019

What goes into making the perfect website?

When you get right down to it, commercial design is a lot like computer hacking, except instead of exploiting gaps in a system’s code, you’re working with quirks of the human mind. People talk about computers and brains with the same language, and the comparison is more apt than you might think. They both follow certain rules and logic, and if you know what you’re doing you can create a predictable response.

For example, most computers read code from top to bottom, every time. If something is more important than others, it can be labelled as such. The human eye also follows a certain pattern, but it’s not as simple as going row by row from top to bottom; the rules it follows are much more complicated. These rules form the foundation of a theory called Visual Hierarchy.

Visual Hierarchy is the concept that when people see things, they ascribe importance to each of them based on a number of factors. It also states that the human mind is drawn to order, and is repelled by chaos. Artists have used these principles for centuries, to draw people’s eyes to what they believe is most central to the piece, and to make it visually pleasing. They hacked the human mind into finding paint on canvas beautiful or inspiring. Using that same idea, you can make your website a place that users love to visit.

First

you need to get your priorities in order. When a customer looks at the page, what do you want them to take away most of all? A good rule of thumb is to separate elements into three categories: primary, secondary, and tertiary. You can probably guess that the most prominent elements should be primary, and then going downwards from there.

Website and shop fonts

Perhaps the most obvious type of Visual Hierarchy involves size. Simply put, large equals important. We’re drawn to the biggest thing we see, and automatically think of it as the most important thing. Having this in mind, consider what kind of content is on your landing page, for instance. Your headline shouldn’t just be the biggest text on screen, it should be the largest element there, period. It’ll serve as a way of grabbing users’ attention, and making sure that they understand your core message right away. On the other hand, secondary items are scannable, but still visually distinct. And tertiary elements should be small, but not so small that they’re illegible.

Another tool

to help establish hierarchy is color. As we mentioned earlier, people have subconscious associations with certain colors. By the same token, some colors—like black, yellow, or red—are more eye-catching than others, which makes them good candidates for primary elements. More muted colors are better suited to secondary or tertiary elements. These include brown, teal, gray, or soft blue. Use these associations to guide your users’ eyes to what is most important when they land on your page.

We’ve talked about color theory before, and how to select the best colors for your site. Remember that even the most monotonous websites have at least two major colors in their palette. To find a color palette that really accentuates the most important parts of your visual hierarchy, we again recommend Paletton. It’s the easiest to use tool we’ve found, and gives you a good idea of what your colors of choice will look like on a page.

Color on shop

Similarly, the contrast between the colors of different elements can produce a similar effect. The higher the contrast, the more it will stand out from everything around it. While the contrast you employ should not be overly jarring, using sharp contrasts sparingly can provide a jolt to the page, which reinforces that visual hierarchy. Another color-based element of visual hierarchy is negative space, or white space. Not every inch of a webpage’s real estate has to be occupied, and knowing when not to put something in is just as important as knowing what to put in. Subtle use of whitespace can highlight the primary elements of your hierarchy.

Finally

another element is positioning is also an important element in establishing visual hierarchy. We covered the usual patterns that people use to scan a webpage in greater detail, but it bears repeating here. Most readers tend to either follow an “F” or “Z” pattern when they scan a page for the first time. Either way, their eye goes to whatever is at top first, then makes its way down and across in different ways. Put your primary elements towards the top of the page, and keep the tertiary elements further down and away from the sides.

Web design positioning


Many people spend their whole lives learning design principles that determine what makes for an appealing image. Just like any other science, design has rules and theories that can be used to get the best response possible. If you can’t afford to hire a professional designer for your site, then consider taking an online course. Some are free, many are affordable, and all of them will help you get a more comprehensive understanding of designing a beautiful UI. And, of course, our helpful blogs are always here if you need them!

Return to blog