Learn the Basics of Visual Hierarchy in Graphic Design

At it's core, graphic design is visual communication. 

Icons, flyers and website's are all created to inform and communicate. The visual aspects of each design is intended to improve that communication. One of the most beneficial tools used in graphic design is visual hierarchy. 

Visual hierarchy uses scale, color and contrast to ease communication, create brand recognition and foster community around a business. 

In this post, I'm going to share what visual hierarchy is, explain why you need to take visual hierarchy seriously and share a few basics tips to get you started. 

 

What is Visual Hierarchy?

Visual hierarchy refers to the arrangement and presentation of elements by level of importance. 

The concept of visual hierarchy dates back to 20th-Century and is based on the understanding of how the human brain organizes information.

People tend to easily recognize patterns and forms. Visual hierarchy plays off of the disruption of these patterns and forms to highlight important information. When we disrupt these patterns effectively, we can stand out and communicate messages more effectively.

 

Why should small business owners utilize visual hierarchy?

As I mentioned above, visual hierarchy aids in our communication and helps us stand out in saturated markets. As a creative business owner, one of the most important things you can do for your business is effectively market yourself.

I can't overstate the importance of visual hierarchy, but I also want to warn against the incorrect uses of hierarchy. This is usually due to the fact that business owners are too close and don't understand that every detail isn't important. 

This is usually seen through poor sizing, alignment and proximity. It leaves your viewers overwhelmed and confused about what to look at first. You may run into issues with the size of headlines competing with a logo or you're using too many competing colors that don't allow for contrast.

With a basic understanding of the information, you can begin creating visual hierarchy and improve your communication and marketing. 

 

Scale

Scale refers to the size of an object in relationship to the surrounding objects. This means the physical size is relative to the surrounding objects. 

Our minds naturally associate size with importance and ranking importance creates hierarchy.

When designing anything you'll want to consider how you rank each item of importance. Write down each element and decide if they could only remember a few things, what would you want them to be? 

The most important information should be the largest and the least important information should be the smallest. 

Learn the Basics of Visual Hierarchy | Scale

 

Color

Similarly to scale, our eyes are drawn to colorful elements. That's why stop signs are red and hazard signals are orange. Those colors grab your attention and quickly communicate important messages. 

In terms of hierarchy, colors also bring attention to the most important information. You can do this with a colorful header or highlight important information in your body text. 

I recommend utilizing contrasting colors to easily grab the attention of your readers.

Learn the Basics of Visual Hierarchy | Color

 

Contrast

Contrast refers to the arrangement of opposite elements. As I mentioned briefly above, contrast is an important aspect of grabbing someone's attention.

You can apply contrast to text, color, shapes, sizing, etc. Anything that disrupts a pattern can create contrast and hierarchy. 

For color, select hue's across the color wheel for optimal contrast. For text, switch between serif and sans serif fonts or thin and bold fonts of the same font family.

Learn the Basics of Visual Hierarchy | Contrast

 

Alignment

Alignment refers to the layout of your design and how you line up your design elements horizontally and vertically. Alignment is an important aspect of creating order in a design and guiding a viewer's eye through the page. 

Hierarchy typically follows a Z formation. The most important information is at the top left corner and follows down the Z layout with final reminders at the bottom right of the page. 

Learn the Basics of Visual Hierarchy | Alignment

 

Proximity

Proximity is the relationship of how elements are placed on a page. Related elements typically stay close to one another and unrelated elements have a healthy distance. 

Think of a heading and body text. They are right next to each other because they are closely associated. But, a website's footer and body text have ample white space to indicate the elements are separate. 

Learn the Basics of Visual Hierarchy | Proximity

What surprised you most about visual hierarchy? Let me know in the comments