Visual Hierarchy in Web Design

Reactive
Reactive
Feb 24 · 8 min read
Visual Hierarchy in Web Design

What is Visual Hierarchy?

Visual hierarchy is the order in which humans process information on a page. It’s a system to prioritise elements so that they are easily understood. Without a visual hierarchy or design structure, users can be overwhelmed and as a result, fail to take anything in. Design is all about visual communication. Once you understand how the human eye processes these, you’ll find yourself better able to arrange your elements more effectively.

Gestalt principles

Most rules of visual hierarchy in web design come from the Gestalt principles. Gestalt Psychology was first proposed by Austrian and German psychologists Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. Gestalt is a German word. The closest translation is ‘whole’, ‘pattern’ or ‘form’. This psychological theory explains how people perceive design elements. The most important take out from Gestalt principles, is that you should organise your page as a whole and not in separate pieces.

The Human Eye and Scanning Patterns

The human eye works in predictable ways. It is automatically drawn to certain points of interest. Some of this does depend on the individual person, but most people follow predictable trends with how they view just about everything, including websites.

Size or Scale Hierarchy

This one is simple enough: people read bigger things first.

Typographic hierarchy

Typographic hierarchy is a system for organising type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text.

Visual Hierarchy using Colour & Contrast

Colour is the spectrum of light. The density of a colour is determined by the wavelength of the light.

Hierarchy with Texture

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page.

Hick’s law and white space

Another way of drawing attention is to give content ample room to breathe. Negative space is an important part of the visual design, defining it just as much as a positive use of space.

The Golden Ratio and web design

The Golden Ratio is a mathematical ratio that roughly equals to 1.6180. It can be commonly found in nature and used in classical design theory to create balanced compositions. You can also apply the Golden Ratio to web design. Easily grab attention with more structurally dynamic layouts.

Conclusion

Hierarchy is an important part of the website design process but it is also important to know the subject matter of the content and what you are trying to communicate before making decisions on hierarchy and style.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Reactive

Written by

Reactive

With over 16 years of experience based in Soho, London. We offer a creative London web design, web development & graphic design service.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store