VISUAL HIERARCHY

What is VISUAL HIERARCHY?

The arrangement of design elements to show their order of importance and guide the viewer’s eye through the content.

• Helps the viewer process information efficiently

• Makes designs readable, logical, and user-friendly

• Highlights key messages or actions

For the two National Geographic magazine covers below, what do you see first? What do you see next? What do you see last?

Both designs above have a clear header and a strong central image which capture our attention first. The small subtexts are the least important elements which we look at last.

What about the two sales banners below?

They both have a huge attention-grabbing header, with smaller products and sales details.

Similarly, for the two Singapore government posters below, there is a big header/tagline, followed by images, and small subtexts.

• Size. Bigger = more important.

• Contrast. Use differences in shape, colours, value, and texture.

• Position. Arrange elements from top-to-bottom or left-to-right for natural reading flow.

• Typography hierarchy. Header, subheader, caption, body text. 

• Grouping. Group related elements together using proximity or white space.