Visual Hierarchy and Layout

Year 7 English • Sustainability Infographic • Week 3 • 45-55 minutes • Whole class

Hierarchy is the order in which the eye finds information. If everything shouts, nothing is heard.

Success criteria

I can identify the first, second, and third things a viewer notices.
I can use size, contrast, position, and white space to build a reading path.
I can group related information and separate unrelated information.
I can test whether my layout works at a glance.

The tools of hierarchy

Tool	What it does	Risk
Size	Makes the title or key number dominant.	Too many large elements flatten the hierarchy.
Contrast	Separates text from background and emphasis from support.	Low contrast makes text unreadable.
Position	Top and left positions are read earlier in English.	Assuming every culture reads in the same direction.
White space	Separates groups and gives the eye rest.	Fear of emptiness leads to clutter.
Colour	Creates emphasis and groups related ideas.	Colour-only meaning excludes some readers.
Alignment	Creates order and invisible lines.	Random centring makes the page feel unstable.
Proximity	Puts related items close together.	Equal spacing makes everything look equally related.
Repetition	Reuses type, colour, and icon style for consistency.	Too many repeated elements become noise.
Isolation	Gives one element space so it stands out.	Isolation without meaning is just a gap.

Reading paths

Z path

Useful for a simple poster-like layout: top-left title, top-right key image, diagonal to the main claim, bottom-right action.

F path

Useful for text-heavy explainers: strong top heading, a second horizontal section, then a vertical scan down the left edge.

Single column

Useful for mobile viewing and step-by-step explanation. Keep line length comfortable and sections clearly separated.

Three-column grid

Useful for causes, impacts, and solutions. Each column should have the same internal structure so comparison is easy.

Model layout

This schematic shows a three-column structure with a dominant claim and a clear action.

Sustainability in Australia • Food

Waste less at lunch

A simple plan can reduce food waste, packaging, and cost at the same time.

1. CauseToo much food is packed; single-use packaging is treated as unavoidable.

2. ImpactFood rots in landfill, wasting water, land, energy, and money.

3. SolutionPlan portions, use reusables, share surplus, and compost.

Main claimMost lunchbox waste is preventable, but the solution has to be easy enough to repeat.

ActionTry one reusable swap and one portion change this week.

Hierarchy: title first, standfirst second, section headings third, supporting detail last. The action is isolated at the end.

Illustrative layout. Replace with sourced content.

Build a grid

Set margins. Nothing important should touch the edge.
Choose two or three columns. More columns make a school infographic harder to read.
Place the title and standfirst across the top.
Give each section a heading, one main idea, and one visual.
Align edges. A few strong alignment lines make the page feel designed.
Leave white space between sections. Do not fill every gap.
Place the source line and action where the eye finishes.

Type hierarchy

Level	Job	Guidance
Title	Make the main claim or question visible	Largest text; short; high contrast.
Standfirst	Explain the issue and why it matters	One or two sentences; slightly larger than body.
Section headings	Guide the scan	Consistent size and style; verbs or clear nouns.
Body	Explain the evidence	Short lines; readable size; avoid long paragraphs.
Captions and source	Explain visuals and credit evidence	Smaller, but still readable; never hidden.

Use no more than two typefaces. One serif for headings and one sans serif for body is enough. Do not use decorative fonts for body text.

The three tests

Three-second test

Show the infographic for three seconds. Can the viewer say what it is about and what they should notice?

Squint test

Blur your eyes or step back. Can you still see the title, main sections, and key number?

Thumb test

View it on a phone-sized screen. Is the body text readable without zooming? Do sections stack sensibly?

Layout planner

Decision	My choice	Why it helps the audience
Reading path
Grid
Focal point
Section order
White-space strategy
Typefaces and sizes
Source and action placement

Common mistakes

Centring every element, so nothing has a clear edge or order.
Using five fonts and four icon styles.
Putting text over a busy photo.
Making the decoration larger than the evidence.
Leaving no white space because the page feels "empty".
Hiding the source in tiny text at the very bottom.
Adding arrows to fix a layout that is already confusing.

Assessment link: visual language and design usually carry a large share of the marks. Your teacher is looking for skilled, thoughtful visual choices and a clear, engaging layout, not clutter.