Lesson 1

18 min Brand/SocialVisual judgment

Visual Hierarchy

Visual hierarchy guides viewers through your design in a specific order.

Core idea

Visual hierarchy is about having one main focus and making other elements clearly less important.

Decide what's most important for people to see first. Then make the supporting information less prominent so the viewing order is clear.

  • Pick one main element that should grab attention first. If two elements compete for attention, viewers get confused.
  • Make the difference clear. Making text just a little bigger usually isn't enough - your main element should catch the eye immediately.
  • Use multiple techniques to make important elements stand out: size and weight, position and spacing, or color and contrast.
  • Making one element stand out only works if you make other elements less prominent. Often this means reducing supporting text rather than making headlines bigger.

Before and after

See the same text without and with hierarchy.

Without ranks

Heading, subheading, and bullet points all look equally important - viewers have to guess what to read first.

With clear ranks

The heading clearly leads with size and weight, the subheading provides supporting context, and bullet points present key information cleanly.

Common mistakes

What to watch for

  1. Thinking hierarchy is just about making important things bigger instead of making clear differences between elements.

    Making elements just slightly different in size still makes them look equally important.

  2. Making everything stand out to make the main element more prominent.

    When everything is equally prominent, nothing stands out - the main element only stands out when other elements are less prominent.

  3. Letting small decorative elements grab too much attention.

    Minor details get the same visual emphasis as important information.

  4. Using color or bold text on everything.

    These techniques should be used sparingly for the most important elements.

Read more

Where the first read tends to land

Research shows how people tend to look at designs. Use these patterns as starting points for placing your main message - not strict rules.

F-shape

Pages with lots of text. Readers look across the top, move down and look across again, then scan down the left side.

Z-pattern

Simple layouts. The eye moves from top-left to top-right, diagonally down to bottom-left, then across to the action.

Layer cake

Pages with clear headings. The eye jumps from heading to heading and quickly reads the content between them.

Small exercise

Diagnose, edit, justify

Compare two campaign cards, then diagnose which area is breaking the reading flow and explain which detail you would make less prominent first. The best test is the squint test: blur the design and see what stands out. Whatever you can still see clearly is your main focus.

Start quick practice Skip to next lesson