Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
Website Design

15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic]

By Melissa Smith

15 Golden Principles of Visual Hierarchy (& Why You Need it) [Infographic] Blog Feature

Visual hierarchy is one of the most important principles behind an effective web design.

In design, it is important to establish a focal point on a page. This gives your visitor a place to start navigating your website and showing them where the most important information is. It offers guidance and helps communicate what you want them to do next (i.e. where to convert).  

In Luke Wroblewski’s Communication with Visual Hierarchy, he states the end goal of visual hierarchy is to quickly communicate to the visitor the following:

  • What is this? (usefulness)
  • How do I use it? (usability)
  • Why should I care? (desirability)

When we use visual hierarchy we make it easier for visitors to find what they’re looking for. It creates a clear path to conversion and helps highlight the actions we want the visitor to take.

The infographic below from DesignMantic lists 15 golden principles of hierarchy, which, in the end, should help you reach your inbound marketing and web design goals. Let’s talk a little bit more about them:

1. Focal Point

The focal point is an area of interest within a composition that captures and holds the viewer’s attention. In web design, this is usually an important call-to-action or form.

2. Movement

The human eye is drawn automatically to certain points of interest. While this depends on the person, the majority of people tend to follow trends, including how they view a website.

There are two types of reading patterns for cultures that read left to right: the Z-Pattern and the F-Pattern. Aligning your design/text with these movement patterns can help your content be better received. If your visitor isn’t moving the way you want them to, A/B testing layouts that follow these patterns can be a huge plus.

3. Golden Ratio

TutsPlus defined it best, saying “the Golden Ratio is a mathematical ratio, commonly found in nature, and used in classical design theory to create balanced compositions.” Simply put, it’s layout reminiscent of a spiral. You can see it present in flowers and seashells here.

4. Balance

In terms of design, balance is when elements are symmetrical. It creates harmony, order, and cohesion. On the other hand, you can have asymmetry and that can lead to visually interesting results in return.

5. Repetition

Repetition is great to represent relative importance. For example, take if all your headings or subheadings are made a certain size and color. The user will likely see a pattern and give it meaning. Same goes for links within the text and calls-to-action.

6. White space

White space, in web design terms, is “the space between graphics, columns, images, text, margins and other elements.

It’s one of the most important design tools because it dictates how a page flows and reads and helps with your visual hierarchy. It helps give your visitors time to breath so to speak and helps certain elements stand out.

7. Visual Triangle

A visual triangle is when you use three elements to create a “triangle” around content that you want to emphasize. It’s a common design technique used in scrapbooking. Learn more about it here.

8. Texture

Add some texture to help minimize negative space. Adding a texture to empty space can be used to strategically attract a visitor’s attention.

9. Types

Not only does the right typeface help with the typographic hierarchy and help organize your design, but stylistic choices help to contribute to the design’s overall mood and are a natural way to create emphasis. For example, pairing a decorative font with a simpler sans-serif is a great way to establish visual differences and importance between text.

10. Random

Sometimes going against the pattern and being random can work in your favor, but randomness has to be calculated. You cannot just start throwing elements on a design without any specific reason. Use it strategically. Breaking from your usual design or template is a very effective to draw attention to specific items and stand out.

11. Rules

Standard dimensions, templates, grids; these are all here to guide you, but you don’t always have to follow these “rules.” Breaking them is one of the easiest ways to create visual interest and attract attention.

12. Alignment

As mentioned above, using a grid to help keep your elements aligned helps keep things organized and also makes your website easier to develop and adapt to multiple devices. 

13. Lines

As we know from heat maps, most western visitors follow the trend of reading left to right. Don’t make your visitor's eye jump all over the place, keep it in a straight line.

14. Contrast

Contrast can consist of the following elements; colors, textures, shapes, direction, or size. It is one of the easiest ways to create visual importance and tell people what to look at one a page. Think bright red or orange call-to-action.

15. Rule of Thirds

This is a simple technique where you divide up your design into three rows and three columns. The point where your vertical and horizontal lines meet is where your focal points should be.

Golden-Rules-of-Visual-Hierarchy
Courtesy of: Designmantic.com

Topics:

Website Design
Infographics
Published on June 10, 2017

Recent Articles

5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)

By Melissa Smith on October 14, 2021
7 min read

Google shares new tools to audit website user experience

By Melissa Smith on August 12, 2021
3 min read

New HubSpot CMS Hub starter tier released for growing businesses

By Melissa Smith on August 6, 2021
4 min read

They Ask, You Answer and diversity, equity, and inclusion (Content Lab, Ep. 55)

By Melissa Smith on July 29, 2021
2 min read

ICYMI: Digital marketing news update for July 26, 2021

By Melissa Smith on July 26, 2021
6 min read

ICYMI: Digital marketing news update for July 19, 2021

By Melissa Smith on July 19, 2021
6 min read

What the heck is going on with all the Google updates? (Content Lab, Ep. 54)

By Melissa Smith on July 15, 2021
1 min read

8 best business website designs (updated for 2021)

By Melissa Smith on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Melissa Smith on July 12, 2021
5 min read

Too many internal links in content can confuse Google about site structure

By Melissa Smith on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Melissa Smith on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Melissa Smith on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Melissa Smith on June 25, 2021
6 min read

Finally, Google page experience core update is rolling out

By Melissa Smith on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Melissa Smith on June 16, 2021
6 min read

What is a featured snippet? [Definition + Examples]

By Melissa Smith on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Melissa Smith on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Melissa Smith on May 21, 2021
3 min read

Why is growth-driven website design so freaking expensive?

By Melissa Smith on April 14, 2021
5 min read

Strategy-driven website redesign: 5 IMPACT-built websites that solve client challenges

By Melissa Smith on April 7, 2021
4 min read

10 Google Analytics metrics you absolutely must track (updated)

By Melissa Smith on March 29, 2021
5 min read

29 Best Contact Us Page Examples To Inspire Yours [Updated for 2021]

By Melissa Smith on March 25, 2021
17 min read

Website Performance Mastery: A better redesign process for your business website

By Melissa Smith on March 24, 2021
6 min read

How much does a website design or redesign cost in 2021?

By Melissa Smith on March 23, 2021
9 min read

What is a good average landing page conversion rate? (updated for 2021)

By Melissa Smith on March 12, 2021
10 min read