How To Achieve Visual Hierarchy

Design is not solely about creating pretty things but also about effectively communicating the right message to the audience. To successfully communicate visually, designers consider three main things: typography, hierarchy, and color. Designers must ensure the font type and size are legible, that the first element you see is the most important, that colors aren’t distracting. They do a lot more than that, of course, but that gives you a little information on what to look for when reviewing a design.

Let’s dive a little deeper into hierarchy and why it’s important for your website. Hierarchy is what draws your eye in and makes you look at the things designers want you to look at first. The principles of hierarchy help bring less attention to things designers want you to look at last. Whether consciously or not, when you visit a website your brain ranks the things on the page in order of importance – based on visual cues.

So what helps designers achieve proper hierarchy?

5 Basic Principles of Hierarchy

One important function of visual hierarchy is to establish a focal point. You want to give viewers an entry point to start navigating your design, visually clueing them in to where the most important information is. Knowing the basic principles and being aware of how to use hierarchy can make a big difference in your audience’s user experience and how they navigate your brand’s website.

Scale

Designers use size to enhance or reduce visibility. The biggest element of a design will get the most attention. People read bigger things first, right? Making an object’s size (its dimensions) and scale (its size in relationship to other objects) larger is an easy and effective way to visually signal its importance.

Conversely, if there are design elements that aren’t as important, designers de-emphasize them by reducing their size. They’ll be less visible and thus lower in the visual hierarchy. Everything in moderation of course – you don’t want your focal point to be so large it overwhelms the design!

Color

Designers use color strategically to highlight information or imagery that is important. Our eyes are drawn to bright pops of color. Lighter tints look more distant and therefore fall lower on the hierarchy than richer, darker colors.

Just don’t drench a design in the entire rainbow – it’ll negate any impact a color had. (Side note: color is super important in mobile app design, where the small screen size limits the ability to use other strategies like size and spacing.)

Contrast

Mixing color temperatures – especially ones with high contrast – attracts a lot of visual interest. Cool colors are your greens and blues, warm colors are red, orange, and yellow, and colors neutral in temperature include black and white. Want something a little more visually cohesive? Stick with one temperature.

Value is the lightness or darkness of a color. Like temperature, colors of different values can be contrasted against each other to varying degrees of dramatic effect. Colors of similar values have more equal visual weight.

100% saturations means the color is in its purest, brightest form. The closer it gets to grey, the more desaturated it is. Using bright or muted colors (together or by themselves) can create places of high or low contrast in design.

Alignment

Alignment guides a viewer’s eye around the page. For page design, it’s important to know that all cultures read from top down and most from left to right. But the task is a bit more complicated than just that. Studies show that people first scan a page to see if they’re interested in its content. Page scanning patterns take two shapes, “F” and “Z,” and designers ought to take full advantage of this in their designs.

Utilize F-patterns by aligning your important information left and break up paragraph blocks using things like short, bolded headlines and bullet points. Utilize Z-patterns by putting the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal.

Proximity

Give your layout balance, flow, and focus; white space and spacing are so important! Designers can draw attention by giving elements of their design room to breathe. For example, leaving significant negative space around a button will make it more readily visible to readers.

How closely design elements are placed to each other indicates to users how likely they are to be related. Headers might not be separated from the first paragraph. The proximity shows that the headers are related to the following text.

What better way to illustrate essential elements of graphic design than with a colorful, well-designed infographic? Read the one below on visual hierarchy in design, from Elle and Company. There are more techniques than the five discussed here but I’m trying not to write a novel so I’ll we’ll talk about fonts, typographic hierarchy, and composition another time.

~ ~ ~

To make sure your designs are communicating as effectively as they possibly can, your designers (or you, if you happen to be that particular creative person in the company) strategically use concepts like color theory and composition. Visual hierarchy uses principle such as scale, color, contrast, typography, and spacing to organize and prioritize content.

Need help creating designs with a clear visual hierarchy with focus and flow? Drop us a line!