Monthly Dose of Design: Step by Step Guide to Achieving Visual Hierarchy for Non-designers
By Mahdis Nikou
Last month we learned that visual hierarchy:
- Is the art of organising & prioritising design elements into a form of layout that guides your audience’s eyes from one element to another
- It encourages your audience to focus on different elements based on their importance
- It brings movement to the page and it creates the right balance between text and images
As you’ve probably figured out by now, all of the above can become extremely handy when you’re about to write a report, present your findings or submit a proposal to your client.
You have pages and pages of written information, key points, important stuff that you’ve worked so hard to put together and now it’s time to show them off! Of course it’s easier to write everything in a word document and send them across. But is it as powerful and as efficient than a document that looks great, communicates every bit directly and it’s interesting enough to be read, understood and remembered? No.
So let’s begin…
Creating Visual Hierarchy
Before you start the process, ask yourself: what is it that you’re trying to convey? What are the MOST, LESS, LEAST important things on the page that you want to show?
When you have a clear idea about the importance of each part of your content, you then need to emphasis 3 design elements listed below. This is how a basic and simple visual hierarchy is born!
Find or create a balanced colour palette. A balanced colour palette is should contain a few dark, bright and subtle shades. Just remember that you don’t need a rainbow to make your point. In fact, having only two or three shade of colours is more practical than having more. Too many different colours in one place can distract the eyes.
The image below is sourced from designspiration.net. This is to show you how having a simple colour palette can help bring the information to life and also create the right balance of colour in your visual hierarchy.
In this example, the gigantic numbers are important. They are important enough to be presented by the colour yellow, the brightest shade on the page.
The colour blue on the other hand, has a less punchy tone to it and it is the second priority on the page that you would pay attention to. Images in dark grey are the design element you would focus on the least and their purpose is to give you an idea about the topic at the first sight.
Now that you know the data and have an idea about what the content might be saying just by a quick look, you are more encouraged to read the paragraphs to find out more. Plus, those giant yellow numbers will most probably stick at the back of your mind for a longer period afterwards.
Useful link to create awesome colour palettes: http://www.colourlovers.com/
On this website you can find tons of pre-made colour palettes by the users. Or you can type your key words in to find a palette right for your needs.
All you have to do is add the RGB codes into your colour creator tool and customise your pre-made palette in PowerPoint.
When it comes to design, size matters! It is true that we are attracted to the largest element on the page. This works great when we use a larger font size for the title and a smaller one for the body text in our presentations. But there is more to it than that.
The example below is a page from the Verlasso Sustainability Brochure sourced from designspiration.net
What I like about this visual hierarchy is the free movement it is creating for my eyes. There are a number of different elements on this page that seek my attention one by one. These elements encourage me to read further. The large text in the middle shouts the key message of the study while the 87% in the left corner piques my curiosity and makes me want to find out more by reading the text underneath it. Other numbers and elements, large or small come one after another into my vision. Colours are subtle, simple and appropriately used. In a short amount of time, I’m fully educated about the study, the key message is clear and it is highly possible that the numbers stay in my memory for a while.
Studies have shown that, when there is uncertain visual chaos on a page, the first way our brain wants to try to organize the information is in the order we were taught to read: left to right, top to bottom. Therefore, becoming more consciously aware of this tendency will help you structure your content appropriately.
Top tips for the right positioning:
- Elements that are placed in the center often tend to be perceived as the focal point
- Imagery placed on top of a page attract the most attention whereas pictures on the bottom are less likely to be noticed at the first sight
- Alignment creates a solid structure to the page and reduces the risk of getting distracted
- On a landscape surface, placing the text on the left side and the imagery on the right side create a logical balance in subconscious mind and it helps the reader to focus on each part separately and accordingly
Thanks for reading and until next time!