Okuzeka
UX/UI Design vocabulary · Visual Design and Layout

Visual hierarchy

Meaning in UX/UI design, with examples

nounCore term

In UX/UI design, visual hierarchy means: The use of size, colour, contrast, spacing and position on a screen so that people notice the most important elements first and read the rest in a clear order.

In Turkish: görsel hiyerarşi, görsel öncelik sırası

How it is used

A regular topic in design reviews: 'the visual hierarchy is unclear', 'there's no hierarchy here'. Designers build hierarchy with heading sizes, font weight, colour and white space. Often just called 'hierarchy'.

Example sentences

  1. Everything is bold, so the visual hierarchy is lost and nothing stands out.

  2. A stronger visual hierarchy would make the price easier to spot.

Common collocations

  • clear visual hierarchy
  • establish a visual hierarchy
  • strengthen the hierarchy
  • lack of hierarchy
  • typographyThe choice and arrangement of typefaces, font sizes, weights, line height and letter spacing to make text readable and to set the tone of a design.
  • white spaceThe empty space between and around elements on a page, which gives content room to breathe, groups related items and makes the design easier to read.
  • layoutThe arrangement of text, images, buttons and other elements on a page or screen, including their size, position and the space between them.
  • color contrastThe difference in brightness between text or an icon and its background, which decides how easy it is to see, especially for people with low vision.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Visual Design and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: