What is visual hierarchy?

Three levels are usually enough

Most effective flyers work with only three tiers of importance. The first tier is one thing, usually the headline or the offer, and it should be obviously bigger or stronger than anything else. The second tier carries the facts a reader needs to act: the date, the price, the location, the way to respond. The third tier holds everything else, from conditions to the website footer. Nielsen Norman Group defines visual hierarchy as organising design elements so the eye consumes each one in the order of intended importance, and a three tier plan is the simplest way to make that order unambiguous. When a design has five or six competing levels, readers cannot tell the difference between the fourth and fifth, and the result reads as clutter rather than order.

How the tools combine

Nielsen Norman Group groups the main levers into three families: colour and contrast, scale, and grouping through proximity and shared regions. In practice the strongest hierarchy uses two levers at once for the top tier and restraint everywhere else. A headline that is both large and high contrast wins easily. A headline that is large but the same colour as everything around it is weaker than it looks, and a small red word can steal attention from it. Space is the lever most often forgotten, because it is the absence of something. Surrounding an element with empty area raises its rank without making it bigger, which is useful when the most important line, such as a phone number, cannot sensibly be the largest text on the page.

When hierarchy matters most

Hierarchy does the most work when attention is shortest. A flyer on a café noticeboard competes with twenty others and is judged from a metre away in a second or two. A social post is judged mid scroll. A poster on a pole is judged from across a footpath. In each case the reader absorbs perhaps three things before deciding, so those three things have to be the ones that make the offer worth stopping for. A useful test is to squint, or to shrink the design to the size of a thumbnail: whatever is still legible is the real first tier, whatever the designer intended. If the business name survives and the offer does not, the flyer is advertising the logo rather than the reason to come in.

Common mistakes

The most common mistake is emphasising everything. When every line is bold, bold stops meaning anything, and when four elements are coloured, none of them is the priority. A second mistake is two headlines, often the business name and the offer at similar sizes, splitting the first glance in half. A third is giving equal boxes to unequal content, such as three cards of identical size where one holds the main offer. Designers also lose hierarchy by adding elements late: a badge or a logo placed in the only empty corner can outrank the call to action simply by being isolated. Finally, a hierarchy that works at A4 can collapse when the same content is squeezed into a square post, where the second tier often ends up as large as the first.

Where hierarchy shows up in the flyer builder

Every one of the 199 flyer designs arrives with a hierarchy already set, and the text Size control picks from the theme's type ramp rather than a free point size, which keeps headings, subheadings and body in proportion. The Weight control and a text Colour that can be a theme colour or a custom hex value handle emphasis within a tier. The risk comes from additions. Items from the Add items panel are placed at the centre of the canvas when their tile is clicked, and nothing snaps into place, so a new Badge or Chip lands wherever it is dragged and can easily outrank the offer. Style overrides are stored per canvas size, so emphasis changed by hand on the A4 page needs checking again after switching to a social size.

Questions people ask