Let’s create
All notes
DESIGN / HIERARCHY4 min read

What do we notice first in a design?

Making everything bigger does not make everything clearer. When many elements carry equal weight, the viewer has no obvious starting point. Visual hierarchy uses the arrangement itself to suggest what to notice first and what to read next.

TALHA KORKMAZ / DESIGN NOTES
Three illustrative design boards arranging a red circle, charcoal bars and blue accents at different visual weights
AI-created illustrative scene · Not a client project

THREE POINTS TO KEEP

  1. Choose one first point of attention.
  2. Use space to explain relationships.
  3. Check legibility at the real viewing size.
THE WORKING MODEL
  1. 01Message
  2. 02Priority
  3. 03Relationship
  4. 04Reading
  5. 05Review

A conceptual workflow · No client results or performance metrics are represented.

01

Make one decision about the first glance

Reduce the main message to one sentence. If a viewer could notice only one thing, what should it be? Let a headline, image or information block carry that first glance. Giving everything equal emphasis makes the parts compete.

The leading element changes with the project. A product launch may lead with the product; an event announcement with the date or name; an editorial cover with an idea. Hierarchy should follow the communication purpose before familiar visual habits.

02

Space explains which parts belong together

Keeping a heading near its explanation while separating unrelated information helps make relationships readable. Instead of distributing whitespace equally, consider which elements need to be understood together.

Try temporarily removing decorative details. Do the remaining headlines, images and information blocks still establish a reading order? If they do not, revise the spacing and visual weights first. Adding more decoration may only hide the issue.

03

Legibility is not only a question of size

For digital interfaces, W3C’s WCAG 2.2 AA contrast criterion specifies at least 4.5:1 for normal text and 3:1 for large text. These thresholds do not replace visual hierarchy, but they give a measurable check for faint text.

Review text beyond the design workstation. Look at it on a small phone, against its actual background, at a normal reading distance. Fine type, tight spacing and a moving background can make even a large heading difficult to read.

Related official guidance: W3C · Understanding Contrast (Minimum)

04

Review the composition as a reading sequence

Look at the design for a few seconds and note the order your eyes follow. Compare that with the intended sequence. Even if the starting point is correct, the next steps may lose the message. A person unfamiliar with the artwork can provide useful feedback.

Rebuild the hierarchy when adapting to another ratio. Items arranged side by side in a horizontal layout need a sequence in a vertical one. Shrinking an image and carrying the same idea to another surface require different decisions.

Working checklist

  • Clear starting point
  • One central message
  • Readable information groups
  • Legible text and background
  • Checked at actual size
  • Order retained in adaptations

A strong composition gives the viewer a reading path without making them work to find it.

Let’s discuss your project

Sources and scope

Tool-specific statements were checked against the official resources below on 5 October 2026. Features and access conditions may change; check the current documentation when planning production. Workflow examples and checklists are editorial suggestions, not model guarantees or client performance claims.

  1. W3C · Understanding Contrast (Minimum)

CONTINUE EXPLORING

Another angle.