The importance of visual hierarchy in graphic design
Visual hierarchy encapsulates the arrangement, opacity, colour and presentation of any design elements in order of importance. Planning and prioritising your visual hierarchy order will determine where the human eye looks first and what information they ingest.
Let’s take a Twitter Profile and biography as an example to show off visual hierarchy. On a Twitter profile, the display image is framed in a circular outline and is laid over the cover image.
You are instantly drawn to this first and what do you find just below the image? The Twitter username. Its placement is not a mistake. And below the username? A perfectly placed section for the user’s biography. And below that? The number of accounts being followed and the number of followers. Twitter has curated this visual hierarchy so that anyone landing on the profile gets information in the right order and don’t feel overwhelmed.
Today, we will be taking a look at the importance of visual hierarchy in graphic design, as well as how it can be used to bring order to your content creations.
Tips for Text
Consumers will gravitate towards text, so it is important to position text correctly. Bigger text with bolder and darker colour tones will be noticed first. Smaller text will be read after this. And finally, smaller text with a very faint colour or a high opacity level will be spotted last. Use this to your advantage to take your consumers on a journey within a graphic.
The main rule with colour use is to make sure that elements stand out from the background. It is also paramount to use contrasting colours when trying to drive attention to a specific area. For example, if you are hosting clickable buttons, one that says ‘Close’ and one that says ‘Visit’, it is good to apply a subdued tone on ‘Close’ and a vibrant tone on ‘Visit’. This will visually prompt the user to navigate to ‘Visit’.
One major issue with graphic design can be going over the top. It may be due to a client’s demands or it may be due to wanting to fit all your ideas on one page, regardless of the reason you mustn’t overdo it. Use white space to break up elements, paragraphs and images. When consumers see white space, it provides them with a moment to digitally breathe. It also gives your content a more professional look.
Graphic design isn’t just a flat space operating within the rules of 2D. You can use shadows, bevels and elevation to let elements pop off the screen. You may want to indulge in elevation when highlighting customer reviews, pop ups or sign up prompts. Elevation signifies importance for visual elements and is a nifty tool for graphic designers.
Graphic design can be used to prompt consumers to look at certain things. Leading lines are carefully places lines or subtle arrows in a graphic that sway the consumer’s view towards a particular element. Often, these leading lines are incorporated into white spaces or backgrounds and point to images and text bodies.
Every culture reads from the top to the bottom. Most cultures read from left to right. Designers have to keep this in mind but reading patterns in modern society is a little more complicated.
The first pattern, F-pattern, applies to text-heavy content where readers scan down the left-side of a page for headings, keywords and topics before moving across for more information.
The second pattern, Z-pattern, usually applies to web pages and adverts where readers scan across the top of the page for names and headlines, then down and across to get an overview, and then finally across the bottom for important redirect information. Web designers usually construct pages based on these patterns.
When dealing with a lot of text and short consumer attention spans, designers have to practice visual hierarchy planning to guide readers to the most pertinent information. These principles of visual hierarchy are vital to practice and keep in mind with every project … from brochures to apps, business cards to websites, social images to infographics, visual hierarchy may now be the most important aspect of graphic design.