Look at the image below, between screen A and B, can you tell us which screen is more eye-catching than the other? Which screen gives you a more direct definition of the title, subtitle, and the content?
Ding ding! Yes, it’s screen B! If you’re wondering why, it’s simply because Screen B implements one of the visual hierarchy principles in design. If you’re excited to know more, keep on reading!
What is Visual Hierarchy?
A simple way to explain what visual hierarchy is, it’s the arrangement of graphic elements in a design in accordance with their importance. Let’s take a business card as an example. You’ll have all sorts of elements on a card such as name, organization, contact number, email, etc. So which out of all is the most important element? In other words, what do you first want people to look at? In this case it would often be, the organisation name, followed by your name, job position, and lastly, the contact information.
Basically, visual hierarchy is what guides a user’s attention the way you want to so that they can focus on one thing before another. By doing so, not only does it help the reader process information in an easier way (because content is broken down for them), but it also makes visual and context look more desirable.
In an era where the average human attention span is only 8 seconds, it’s crucial that designers practice proper visual hierarchy to create a successful engaging piece of content. This includes whatever they design – from websites to apps and even social contents. With that being said, we’re going to cover some golden principles that’ll help you create aesthetically pleasing designs with effective visual hierarchy. Let’s begin!
Every time you want to create something; you should give it a flow. Always remember that the key is to guide your readers through your content – from top to bottom. So how do you know where to start?
There are 2 main questions you can ask yourself:
- Where does your eye usually go to first when you land on a website?
- What are the elements that will help guide your focus onto the next thing?
Here’s when composition takes place. Composition consists of all the separate elements to a design such as text, images, colour, and graphics. The composition principal guides you on arranging your component base on 2 rules: reading pattern and the rule of thirds.
a. Reading pattern
There’s only one way our eyes glide when we’re consuming text and it’s obvious that the pattern goes from left to right. However, when it comes to designing a page, there are two patterns to which you can arrange information for better readability. For heavy-text components, you can arrange all the important information in an ‘F’ pattern. The image below shows the heat map of how a typical reader consumes heavy-text content.
However, on the other hand, for landing pages that have minimal information, you can place information that guides the eyes in a ‘Z’ pattern. This focus on simplicity makes the Z-Pattern uniquely suited to landing page design- where you want a singular focus to draw people in and encourage them to take action. To do so, you can take advantage of the Z-Pattern by simply placing your call to action along the Z path to make sure that your viewer sees it. By doing so, you give a clear direction to what information you want your readers to receive and the action you want them to take after that. This can potentially lead to more conversions on your website.
Based on this composition pattern, it will help the designer to properly arrange the important information and users can navigate more efficiently on the screen.
b. Rule of Thirds
The rule of thirds can help you determine where you should place important information in your design. Again, it acts as a guide to the viewer of where they should be looking at first. The rule of thirds consists of two guides in horizontals and two guides in verticals. The crossover between those lines is the pin-point area where most of the user’s eyes will focus on. So make use of it by placing your main component (eg. text, subject) within this area. Most good layouts, even photos, implement this rule to get an eye-catching output.
Typography is everywhere we look, it’s in the books we read, on the websites we visit, even on the billboards, street signs, packaging and more. To simply put it, Typography is the style and appearance of a text. Typography also refers to a combination of typefaces that could be similar or indifferent in terms of sizes, elements, font family and attributes to convey a message on the screen. When creating hierarchy through typography, you’ll need to have 3 sets of components in mind in order to organize your designs.
The 3 main components are headline, a sub headline, and body copy.
Let’s take a look at the image below. As you can tell, the text comes from the same font family. The only difference between the two? You’ve guessed it right – the play with hierarchy. Although users can still read through the paragraph on the left, they won’t be able to convey the importance of which is being highlighted.
Meanwhile, on the other hand, the text on the right that was designed based on the principle of visual hierarchy not only demonstrates clearly what the focal point is, but it also leads and directs the user throughout the paragraph with less friction. Plus, it looks much neater, don’t you think?
Size & Scale
Believe it or not – size matters – especially when it comes to design. Bigger text or shapes tend to give us a perception that they’re important as they demand so much attention. However, it’s very important to keep in mind that you choose the correct element to highlight or else, it’ll just be a huge distraction to your readers – which is something that should be avoided.
So ask yourself what’s the message you want people to focus on – then, make it big. This way you’re getting the message across correctly.
As an example, the visual above consists of a huge text right in the middle of the image. But because the word “Integrated” creates curiosity – viewers tend to look for ‘answers’. From the text situated on the top right of the image to the bottom left. This is an example of executing the principle the right way.
When it comes to shapes, different sizes can create perspective and depth of field when placed correctly. This also helps determine what readers should focus on when they look at it. Time Magazine and The New Yorker make such good references with their illustrated covers. For instance, this 1954 cover of Times Magazine features Walt Disney on its cover image. You can tell that the focal point is Walt Disney himself, and the cartoon characters are drawn in a much smaller scale behind him. This cover gives readers an idea that the main story for this issue is about him.
Or you can take a look at The New Yorker (April 2020 issue), where the central focus illustrates a nurse on a video call with her family back home.
Source : Time Magazine “Walt Disney” 1954 (left), The New Yorker “Bedtime” April 2020 (Right)
Color & Contrast
Colour choice and contrast are essential for visual hierarchy as they help users to distinguish the core elements. If you don’t already know – colours have the power to influence a user’s emotions. For instance, when you see warm colours such as yellow and orange, it creates a sense of joy and liveliness. Meanwhile when you’re exposed to cool colours such as blue and purple, it gives off a calm and relaxed feeling. This is called colour psychology.
Now, the colour attributes can be divided into two:
- Strong/bold colour: red, yellow and blue.
- Weak colour: pastel colour that is normally used to complement the bold colour.
Bold colours are easy to notice so you can use them as the means of highlighting or setting contrast on the design. Take a look at the example below. For instance, you can implement the same colour by combining both the bolder colour and the weaker one together to show connectivity or you can have two contrasting colours and put them together to really bring out the difference.
Here’s another example. See how the major CTA buttons like “Sign Up Free” and “Sign Up” are in a different colour compared to the “Login” button? That’s because most people who land on this page are most likely people who do not have an account. Hence, to get them to have one, Mailchimp sets out a clear direction to where new users can sign-up by using contrasting colours to make the CTA buttons stand out more.
Source : Mailchimp
White or Negative Space
A cluttered website can be distracting and unpleasant to the eyes. Hence, taking advantage of the white space can provide balance on the overall design. It encompasses breathing space for your eyes to relax and enhances the flow of perceiving the screen to get users eyes back into focus. By implementing the right amount of white space, it helps the readers to stay on the screen and absorb important information directly. Additionally, with a good amount of white space, it actually helps the user’s eye to relax – especially after scrolling through a heavy text page. Look at some of the example below:
Source : Apple website
A designer’s top priority or purpose (especially for a UI/UX designer) is to create a space where information is easily absorbed. It’s not about implementing fancy stuff all the time as you don’t want to create more distractions for readers. With that in mind, you must always remember the crucial role of the 5 principles discussed above when designing on screens. With the power of visual hierarchy and a great design sense – you are able to systematically solve a design problem.
If you are interested in us helping you out with your UI/UX design, we would be delighted for a quick chat. Drop us a note at [email protected]