When you look at a web page, your eye is naturally drawn to certain elements. For example, when you clicked on this blog, you probably looked straight at the title first before reading the first line. Creating a journey by design for where you look on a page involves considering the importance of each element to the user, and creating a visual hierarchy that can be reflected in the design.
At Squarebird, we always try to stay ahead of design trends, paying close attention to what users want to see and creating something that meets their gaze and their expectations. In this article, we’ll discuss what a visual hierarchy is and where it sits alongside other web design principles.
Get in touch today for web design that’ll make your site soar.
“It’s a natural human instinct to follow certain markers, so putting things in the right places – with the right colours, sizes, and movement – will give users the best journey. A visual hierarchy defines this process, helping designers achieve results” – Hope Manning, Graphic Designer & Illustrator
So, what is a visual hierarchy?
A visual hierarchy is a ranking of visual elements in the order that you want people to see them on the page. While a key component of web design, visual hierarchies are also used in print, and they are a design principle across all platforms.
In web design, the main heading tag (H1) probably comes at the top of this list as it describes the content a user will see on the page. After this, they’d expect to see a call-to-action (CTA) button (such as a contact button) or a link to find out more on a different page.
Wireframing your page can help crystalise your visual hierarchy. This includes things like:
- Sizing
- Placement in the user interface
- Image location
- Headings
- CTAs
As you wireframe your page, ask yourself the question: “if I were to show this to someone, where would their eye go first?” Then, use other design principles like order, size, and colour to reflect your visual hierarchy and lead peoples’ eyes to where you want them to look.
Where does visual hierarchy sit alongside other web design principles?
Visual hierarchy sits alongside other key web design principles as one of the most important features. To name but a few, here are five of the top principles that play off your site’s visual hierarchy:
- Colour
Colour and contrast can be used to great effect, and are mostly used in CTAs to differentiate them from other elements on the page. If you’ve got a hero section that’s mostly white, having a CTA button in a contrasting colour like orange will snap your eye to that spot in an instant, making colour a really great friend when it comes to hierarchy. - Size
One of the biggest indicators of hierarchy (no pun intended), size plays a huge role in the user journey. If a title is bigger than the rest of the content, you’re going to read that first. Any body copy will be a lot smaller, so even from a distance, there’s ultimately one thing you’ll read first.The challenge comes in making sure that anything less important can scale itself back. It’s about finding a balance between something being too big, and just big enough. - Alignment
In essence, alignment is how things sit on the page. As a western reader, we read from left to right, so this is a feature that needs to be considered within visual hierarchy. When it comes to audiences in other countries, this alignment issue can be reflected according to how they read, such as in Japan where they read from right to left.There is also the potential for centre-aligned content. This is quite sparingly used, but can be a good design choice under the right circumstances. - Movement
Movement is how we might interact with a design – whether that’s from the user instigating it, or from automatic motion. This leads into visual hierarchy as it’s a way to attract attention from pitting movement against something static.Naturally, if something moves to be in front of you (even in the case of something like a pop-up), you’re going to read it or notice it before anything else. Combine that with a bunch of other design principles, and you’ve got a web design element that shows its colours. - Whitespace
This one can be a little controversial, but it’s just as important as the other design principles. People might neglect whitespace, but it’s crucial to the overall balance of the design. If every bit of whitespace was covered up with colour or a graphic element, you wouldn’t have any breathing room.If you’re trying to send a message and get people to look at a certain thing, you don’t want to give them sensory overload by offering too much to look at. If you allow and trust whitespace to take you under its wing, your visual hierarchy will be given room to actually take effect.
Neglecting whitespace is one of many web design mistakes to avoid – find out more >
Visual hierarchy rocks, and here’s why:
A website is a window into your business. What do you want people to see? A visual hierarchy lets them know what you’re all about right away, and then encourages them to do something about it.
Having large heading text and a button to funnel users to a place of your choosing gives you control over the journey you want your users to have, and it provides clarity to users for the journey they’re supposed to take.
Visual hierarchy plays a big role in web design, but it’s part of a symphony of principle that need to combine together to create something. One principle can’t exist without the others – without style, for example, you might have a great hierarchy, but no real substance to engage your users. Every principle plays its part and is of near equal importance to web design as a whole.
How to implement visual hierarchy into your web design
It’s hard to say how to implement visual hierarchy, because it is everything! Where you put things and how you make them look should all be informed by your visual hierarchy. Since every visual element is informed by this principle, implementing a hierarchy requires a firm outline and a strong understanding of the best design principles to follow.
Improving your current visual hierarchy
We use analysis tools that help you see where people are looking and clicking. If they’re not doing these things in the right place, then something is wrong, and you need to review your visual hierarchy and how that’s reflected in your design. You can also ask people to look at your website and analyse the results yourself.
Once you’ve recognised the issues, you can then begin to adjust your design. This could involve downsizing the things they’re looking at, or giving a brush-up to other elements to make them more prominent. Put yourself into the client’s shoes – what is the journey you want them to have, versus the one they’re currently having? Then make the changes to align the two.
Who is best to implement a visual hierarchy?
The best implementation for a visual hierarchy comes from a partnership between designers and business owners. While a designer is better at understanding and implementing the actual design features and principles to go alongside the hierarchy, additional insight is needed into what users of a specific industry want to see and how that should be reflected in a design. This collaboration can help to identify what needs to be more prominent, informing the overall design process.
Plan out your visual hierarchy with support from the experts – contact our team >
Visual hierarchy and accessibility: how do they connect?
The placement and readability of text, along with the size and placement of buttons to make them easy to spot and press, are places where the scopes of visual hierarchy and accessibility overlap. This is especially true in mobile designs, where the user experience on a page is extremely important.
Accessibility is an increasingly important feature for design, playing into everything from image contrast, text density, and the size of elements. This all serves to make things easier to read and digest for the visually impaired.
Accessibility also plays into other principles such as movement and colour. These can be used to identify certain elements, showing that a button is indeed pressable. This all plays into hierarchy because you need to make the process so intuitive that, regardless of ability, everyone takes the same journey.
Visual hierarchy is the foundation of what you want people to do, and ensures the path is open to all.
Check out our beginners’ guide to accessibility in web design >
Web Design in Bristol from Squarebird
Visual hierarchy is the building blocks from which to grow and evolve your successful website. Without paying attention to this crucial principle, you’ll find an equivalent loss of attention for the most important parts of your site. On the other hand, by paying visual hierarchy its due respect, you’ll start to see real results.
Get in touch with Squarebird today to explore how we can enhance the design of your website and implement a visual hierarchy to help it fly. Find out more about our web design services, or read on with some related articles to find out a little bit more about what we offer.
Live a day in the life of a website design agency >
Find out whether you need a web redesign, rebuild, or reskin >