Visual hierarchy
Understanding Visual Hierarchy in Graphic Design
- Definition: Visual hierarchy is a key principle in graphic design that determines the importance and sequence in which our eyes perceive what they see. It influences the order in which the human eye perceives what it sees.
Why is Visual Hierarchy Important?
- Visual hierarchy helps in organising information to make it easier to understand.
- It guides the viewer’s attention to the most important elements first.
- Creates a flow and narrative, enhancing the user experience.
- Helps in communicating messages effectively.
Elements that Affect Visual Hierarchy
- Size and Scale: Larger elements will draw attention first and are perceived as more important.
- Colour and Contrast: Bright colours and strong contrast attract the eye, while muted colours and low contrast make elements recede.
- Typographical Hierarchy: Elements like type size, weight, and capitalisation can establish a visual hierarchy among text elements.
- Position and Layout: Elements placed higher and towards the centre of the page, or isolated from other elements, will catch the viewer’s attention first.
- Whitespace: The use of whitespace around an element can draw attention to it, making it seem more important.
Creating Effective Visual Hierarchy
- Define a clear goal: Understand what is the most important message or information you want to convey.
- Prioritise elements: Rank elements based on their importance.
- Group related items together: This helps create different layers of hierarchy and makes your design easier to comprehend.
- Use varying sizes and colours: Using different sizes and colours effectively will guide the viewer’s eye and create a sense of order.
- Create contrast: Use contrasting colours, sizes or weights for different elements to make the core elements stand out.
- Balance your design: Avoid making all elements scream for attention; balance bold, prominent features with some quieter, less noticeable aspects.
Visual Hierarchy in Practice
- Websites and Apps: In web or app design, visual hierarchy helps guide users to actionable items like buttons or links, important information and helps improve usability.
- Advertising and Media: In media and advertising, designers use visual hierarchy to draw attention to the key message or selling point, making it pleasing for viewers while effectively communicating the purpose.
- Information and Data Visualisation: In infographics or data visualisation, visual hierarchy makes complex information easier to understand by guiding the viewer’s eye through the data.
Understanding Terms Related to Visual Hierarchy
- Primary, Secondary, and Tertiary elements: In a design layout, primary elements are the most important and should stand out the most, followed by secondary and tertiary elements.
- Emphasis: Designers use visual hierarchy to create emphasis on crucial information or calls to action.
- Dominance: This refers to an element or group of elements that stands out in a design. It’s often the largest, brightest or most complex object on the screen.
- Proximity: Related elements are grouped together to demonstrate a relationship between them and create a visual unit.
- Balance: The arrangement of elements in a design so that no one part overpowers (or seems heavier than) any other part. Balance can be symmetrical or asymmetrical.