Skip to content
PLAY VIDEO PLAY VIDEO PLAY VIDEO
By Dave Cruikshank

Basic visual hierarchy in web design

Visual hierarchy is a description of the organisation of graphics and text on a page that assist the audience in digesting content. Understanding what this is, and why it’s necessary, is key to creating designs that communicate effectively. This is most especially true today on the web, with the literal seconds we have to capture attention, communicating effectively is more important than ever.

How do we process information?

Human brains are funny things, we tend to create links between everything we see. Size, shape, and colour, similarities and differences, contrast and harmony, our brains process these things automatically, and can do so without us even knowing. It’s these relationships that allow those versed in the language of visual communication to manipulate the reader’s attention and draw them into the right paths for content. Sounds devious? As always, with great power, comes great responsibility!

Take the following example:

Boxes!

When looking at this image, you don’t see two boxes. You see a big box, and a smaller box. We automatically look for differences in objects, it’s just the way our minds categorise the world around us. While different, the shape, alignment and proximity of the boxes tie them together visually. This creates a relationship between those elements: even though we know they are different, they suddenly become linked. These could be pieces of text, or images, or both, but we will know just from this simple layout that they are related information.

Colour can also be used in a similar way. Consider this example:

Boxes!

Even though the small red box and the circle aren’t related spatially or physically, the use of colour still informs us that they are related. Were colour not in the picture, you would be forgiven for relating that small box with it’s larger brothers, it’s shape and alignment tell us as much. Colour can also be used to denote importance, even though the grey boxes are larger, the use of a strong red colour sets these elements apart and draws the eye. It gives them personality that the dark grey elements lack, we understand immediately that thematically these things are different.

And these aren’t the only tools in your hierarchical toolbox. Size, colour, style, contrast/harmony, repetition, position, alignment, and whitespace, can all be used to create an effective visual language for your work. Understanding how these basic principles fit together is the essence of good design. For a more thorough grounding in these, check out this great illustrative video:

The Fundamental Elements of Design from Erica Gorochow on Vimeo.

Why is this important?

The speed at which people view and discard web pages (generally speaking, users will spend less than a minute on your site) gives us limited time to capture interest. If we want people to see our content, we have to not only grab their attention, but also hold it. This makes hierarchy even more important in web design than it ever has been; making sure users don’t get distracted and wander off is of paramount necessity.

It’s important to not clog your page with ads, callouts etc. This will distract from the purpose of the page, by disrupting your beautiful hierarchy. “Content is king” should always be your mantra, ensuring that your site has a defined point, and not to deviate too much from it. Everything else, should be of less importance than the content you’re trying to sell. Too much competition, and your audience will leave sooner and may not get your message.

For some great tutorials on creating hierarchy for the web, check out these pages:
http://aestheticio.com/web-design-101-creating-visual-hierarchy-type-whitespace/
http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email