What is Visual Hierarchy — and Why is it Important? 

You’re an entrepreneur on a budget juggling a myriad of responsibilities, and graphic design has suddenly become one of them. Maybe you’re designing a logo for your business, a flyer, or a social media post. Whatever it is, you’re suddenly realizing there’s a lot more to this graphic design thing than you realized. You know how you want your project to look and what information is important for your viewers but aren’t sure how to present it effectively.

Visual hierarchy is here to help.

So, what is visual hierarchy?

As attention spans shrink and technology evolves, designers are forced to present information in the most easily digestible way– one that guides a viewer further down a piece of collateral. This is essentially what visual hierarchy is all about.  Visual hierarchy directs viewers to the most essential information on a page using graphic design elements like color, size, and alignment to organize and prioritize content.

We’ll go over four basic elements of the visual hierarchy so you can unleash the creative juices and pu!

Four key elements of visual hierarchy:

• Color
• Size
• Alignment
• Space

Color provokes

The human eye is innately drawn to color. Bright, vibrant colors stand out more than muted ones and have greater visual weight. In an interface, color might be used to create structure, or assist in navigation.

Color also holds meaning and creates an emotional response in viewers subconsciously. Research suggests that blues are often received as dependable, secure, and calming, while reds are stimulating and even known to increase viewers’ heart rates.

This ad uses color to make the viewer feel uneasy and call attention to something out of the ordinary.

Check out Names for Change, a website driven to help people in the Durham, North Carolina region out of homelessness. Fundraising for socks or tampons isn’t exactly exciting stuff, so they use color to visually stimulate the viewer, and also create a sense of organization around these seemingly random items.

Source: Names for Change

The point? Don’t arbitrarily pick color because it looks good. When used strategically, color is a powerful tool to highlight important information, direct people to where they need to go and trigger emotional responses.

Size makes a big impression

While balance and moderation are key to all elements of graphic design (and just life in general, no?) size establishes a hierarchy where bigger items draw more attention and thus appear to be the most important.

Just by looking at the above image without context, your eye immediately assumes the biggest circle is the most important. You’ve drawn meaning from these shapes with only one quality changing between them. Aren’t brains cool?

Size is often used in bodies of text to identify meaningful subjects, headlines, or important quotes, making the most important the largest and scaling down from there. Keep in mind that too many sets of sizes can be confusing, so establishing a basic size structure is a good idea. Secondary content, like labels, should be smaller, so they don’t compete with the more important information.

Many apps use size to establish an immediate purpose for their interface. Take the Warby Parker app for example. This app uses augmented reality (AR) to let consumers virtually try on glasses. Nothing on the screen competes with the image of your face (which takes up more than 50 percent of most screens).

Source: Warby Parker

The Warby Parker app uses size hierarchy to put the priority on you as a consumer, rather than their product. This simplicity no doubt helped with the adoption of the app by so many folks searching for the perfect eyewear.

When designing a logo, the size of each element is a crucial part of creating something memorable, and clear. Below is an example of a brand using proper size hierarchy to emphasize the brand name first, and all other elements second. To the right, we see a poor example of sizing in visual hierarchy where the slogan dominates and we are left without a clear impression of the company name.

Alignment builds a framework

Alignment creates order within a visual hierarchy. It ensures nothing is placed randomly on a piece of collateral, but instead, with the intention to lead the viewer’s eye from one element to another.

Source: uxplanet.org

The Guttenberg Diagram insists people skim content in a Z pattern, meaning the most important information should go in the top left corner and bottom right. We see this often in design. Check out Trello’s sign-up page.

Source: Trello

The value and purpose of the platform are communicated in the primary top-left corner, followed by the signup button on the bottom right. For a person skimming the page, these are the only two things you need to be aware of immediately before following through with a sign-up action. As you peruse the interwebs today, watch where your eye goes first and then second. You’ll be surprised by how consistent this principle of alignment applies.

Below is an example of alignment used advantageously in a logo on the left, and poorly on the right. Stacking design elements from smallest to largest and center aligning them provides a clear structure of information—especially in small design pieces like a logo. On the left, we see how poor alignment of your design elements can create a messy logo that doesn’t flow nicely.

Sticking to this alignment principle will help you build a framework for your design elements. Resulting in a fluid visual experience for the viewer!

Space creates balance

Negative space, or “White space”, in design is empty, unoccupied space. Negative space draws attention to what a viewer should be focusing on. Designs that ignore this element in visual hierarchy will look cluttered, and messy. White space separates and organizes design elements to create a sense of balance.

See how the chocolate packaging design places the logo on the only blank, white space as a way to draw the eye towards the company name? This intentional use of blank space and color is a perfect example of how subtle but crucial the use of space is in visual hierarchy.

Now you’re ready to nail your design!

Now that you’ve got a basic understanding of four core principles of visual hierarchy, you can make well-informed design choices.

Remember:

Ready to apply the elements of visual hierarchy to your logo design? Hop into our logo maker and show off your design skills now!