How designers can use visual hierarchy

Call us superficial, but when it comes to graphic design, it really is all about appearances.

Graphic design is all about visual elements, and it’s important to use your design skills and knowledge to make sure your work is easily digestible and aesthetically pleasing.

One way to do that is to follow the rules of visual hierarchy. Visual hierarchy ensures that your designs create a smooth user interface for real users on web or mobile.

Visual Hierarchy

Visual Hierarchy designed by Richard Collins. Connect with them on Dribbble; the global community for designers and creative professionals.

DribbbleRichard Collins

Design trends come and go, but the fundamentals of design and user experience are forever.

This article will discuss visual hierarchy, give some design tips for using it, and provide some design examples and additional resources for you to check out.

What is visual hierarchy?

Visual hierarchy is the principle of arranging individual elements in order of their importance in a design or work of art.

Following this key principle, designers organize visual components and elements to ensure that viewers can easily understand their meaning.

When done correctly, visual hierarchy will influence how your work and design elements are perceived and understood by users and guide them to take specific actions.

Gestalt Principles are design principles that revolve around human perception of visual elements. These principles dissect how the human eye groups like objects, sees patterns, and simplifies images.

Designers should be aware of and use these principles when creating advertisements, websites, and digital interfaces.

According to Gestalt psychology, visual hierarchy creates patterns in the visual field of viewers that make some elements stand out to the human eye. This is what suggests or creates a visual hierarchy of importance.

Now, let’s talk about why visual hierarchy is important for designers.

Why visual hierarchy matters

Now that you know what Visual Hierarchy is, it’s likely becoming clear why designers should know and utilize this principle in their work.

Graphic design has always been a digital art, but recently the entire industry is becoming more “online,” which means that graphic designs are often seen and distributed online via websites, social media, or ads.

User experience is a crucial factor to keep in mind when creating graphic designs for the internet. Unlike a billboard or printed piece of work, online designs are often used functionally to guide users through a website, entice them to click on purchase buttons and encourage them to click other links.

Here’s a great example of how the typical eye would travel across a landing page or webpage based on the laws of visual hierarchy.

User experience in design is the overall experience of a user interacting with a product, such as a website page or app, especially in terms of how functional it is to use.

The way that a customer interacts with and experiences a user interface drastically changes their opinion of a brand or product.

That means mobile designs and website designs need to be highly optimized, and one of the best ways to do this is to use the basic principles of visual hierarchy.

So, let’s get into the nitty-gritty of visual hierarchy and talk in detail about each of the principles and how they relate to graphic design work.

The basic principles of visual hierarchy

Visual hierarchy principles are very similar to the basic principles of graphic design.

Essentially, you want your designs to be aesthetically pleasing. Basic design principles call for careful use of color, spacing, contrast, and patterns.

The basic principles of visual hierarchy that we have selected for this article are similar, with some nuance. There are, of course, more principles that impact visual hierarchy, but these should be a great place to start if this is your first experience delving into the concept of visual hierarchy.

There is an instant hierarchy created by the human eye when you take in a piece of art, text, or visual design. Certain individual elements will stick out to you, and as a designer, it is essential to control how your work is perceived.

Let’s get started with our first principle: color.

Color

Color is one of the main building blocks of design. Brands use color and symbols to make their products easily recognizable and memorable.

Think of the famous McDonald’s arches or Starbucks mermaid image. These are examples of how ingrained certain logos can become in our collective memory.

Color in visual hierarchy determines the area to which the eye immediately gravitates in a design.

A variation in color is typically best, but don’t go overboard with your color choices.

Too many contrasting colors or bright colors may be overwhelming and create a chaotic design experience. But too many muted colors might prevent the design from standing out visually.

It is also important to consider color theory and use complementary color combinations.

In visual hierarchy, warm colors typically come to the forefront of the design while cool colors fall into the background.

However, if you put your design on a light background, this effect is reversed. Mixing color temperatures and creating a design with both cool colors and warm colors can create depth in design.

Knowing that, it’s easy to understand how color choice can vastly impact how the human eye perceives your design.

Patterns

Fun fact: everyone has a viewing pattern that they use to absorb information and content.

The two most common forms of viewing patterns are the Z pattern and the F pattern.

Z pattern:

• The eye follows a path like a Z, top left to right, then down to the left, and across to the right
• Best used for a design that is not content-heavy
• Helps viewers scan through elements quickly

F pattern:

• The eye follows a path like an F, from top left to top right, then down to the following line from left to right, and it repeats along horizontal lines
• Best for content-heavy designs
• Helps viewers scan images and headlines

As a designer, the biggest thing to know is that content-heavy pages are best in an F-pattern design, while pages with less content read best with a Z-pattern design.

Both design patterns serve a purpose and take advantage of the natural pattern the eye follows when reading information. Following these patterns and using them to your advantage will help your viewers better understand your content and intentions.

Contrast

Using contrasting colors and symbols is the best way to emphasize information and attract attention to a particular part of a design.

Using a dark background or light background to emphasize the information in your designs is a great way to utilize visual hierarchy in a simple but effective way.

This element of visual hierarchy plays a vital role in how designs are perceived and is heavily tied to color. Contrast is often created using color for emphasis.

Any prominent element you want to emphasize should be in a bold color or surrounded by muted colors to make it stand out.

Spacing

Location, location, location.

Just like in the housing market, location is vital for your designs. Where and how you space things in your work will be a huge determinate in how your piece is constructed.

White space can be used to create a minimalist design that emphasizes one thing. This blank space can be a great way to contrast the bold central image in your design.

You can also go the other route and use many different objects to create a maximalist design. When done correctly, these designs are eye-catching and fun to look at.

The way you align text in a design also makes a big impact on the overall appearance of your content. Here are some examples of what that can look like.

And, as you can see below, the size and placement of objects can make them look larger and more important or smaller and more subtle.

It also matters for lining objects up, organizing them in a shape, or leaving them sporadic.

How to use visual hierarchy in graphic design

Now that we’ve covered what visual hierarchy is, let’s take a look at some design examples that perfectly display visual relationships and visual organization.

Designers use the basics of visual hierarchy all the time, like white space and purposefully muted colors paired with a visually striking object.

Get this template

Get this template

Below are some examples of how visual hierarchy works in multiple forms of graphic design: typography, infographics, web design, advertisements, and printed materials.

Typography

Typography is a crucial element of design that can be tricky to master.

The type of font, capitalization, size, emphasis, and placement can all drastically impact how your text is read by a viewer.

Often in advertising or web design, the text is the most important thing for your viewers to take in, so it’s important to make sure you get it right.

This example shows how you can creatively place text to emphasize and group together concepts and words and make sure the important words are read first and easily comprehended.

You want viewers to be able to quickly understand what you’re communicating, even if they only glance at your design for a few seconds.

Infographics

Infographics are a great way to display and organize facts and information.

Creating a design with a mix of words and symbols makes information more easily digestible and interesting to look at.

But you have to be careful. You don’t want to oversimplify and assume your audience will understand certain niche symbols.

And since you’re using fewer words, you need to do everything you can to make your facts stand out on the page. Here’s a great example of how you can do that.

You can see that in the first iteration, all the symbols are monochromatic, which doesn’t help the viewer immediately understand what is being said.

In the second example, one of the symbols has been colored a much lighter color, creating contrast and emphasis that immediately draws your eye.

This is how you can create effective designs with just a slight tweak in color to improve the user experience.

Web Design

In web design, the user interface is everything.

If a visitor to your website can’t easily find their way around, they will immediately leave and aren’t likely to come back.

This is where many of the principles of visual hierarchy that we discussed come into play. Contrast, spacing, and patterns can make it easy (or difficult) for visitors to travel through a site.

Here’s an example of both good and bad visual hierarchy on a simple landing page.

By emphasizing the important elements and creating a clear user journey, you are more likely to guide users to purchase a product, read your content, or sign up for a service.

Advertisement

Advertisements are everywhere we look. But only a few stand out and leave an impression.

To create an ad that leaves an impact on your viewer, you can use visual hierarchy to ensure that you capture their attention right away and keep it long enough to communicate your message.

Using all the elements we discussed above, you can ensure that your ad will stand out from the rest and be easy to digest and understand.

Here’s a great example of how spacing, color, and contrast can impact the way your design is perceived.

The image is a bit too spread out in the first version, and the colors aren’t as impactful. The second version fixes both issues and creates an overall more impactful image.

Printed Materials

Visual hierarchy isn’t just for digital images. It’s needed in print materials as well.

Printed materials such as posters, business cards, and magazines all use the basic rules of visual hierarchy to entice and inform their audience.

Here’s an example of how visual hierarchy changes the appearance of a business card.

In the first attempt, the spacing and colors used don’t help the reader immediately identify the important information on the card. Once fixed, your eye instantly finds the name on the card and knows its importance.

Learn more about visual hierarchy

Learn more!

Learn more! designed by Alona Shostko. Connect with them on Dribbble; the global community for designers and creative professionals.

DribbbleAlona Shostko

Graphic designers, like any other profession, are constantly learning and strengthening their skills.

Basic design elements like minimalist design are unlikely to change suddenly, but there are always new ways to approach your designs and creative approach.

• Learn about the basics of color theory, which can be used to improve your visual hierarchy in designs.
• Learn additional information about color contrasts.
• Visme created this visual guide to using hierarchy in designs.
• Check out an excellent guide to using hierarchy in website design.
• This free e-book goes deeper into visual hierarchy and how it can impact your designs and gives some examples.

With these resources and your knowledge of visual hierarchy, you’re sure to create some stunning and visually beautiful designs.

By now, you’re probably getting eager to put this knowledge to work in an actual design. Download Linearity Curve (formerly Vectornator) for free today. We can’t wait to see what you create.

Cover image source: Unsplash