Composition

Composition is the way type, image, colour, logo, space, and action are arranged so people know what to look at first, second, and third. It works with the Grid foundation: grid gives the structure; composition gives the visual judgement.

Most Landcare design work is created by people who are not trained designers. This page gives practical fundamentals so local groups can make posters, social posts, reports, signs, slides, and web pages that feel together, clear, and professional.

The First Question

Before arranging anything, ask:

What should someone understand first?

If the answer is unclear, the design will probably become crowded. Decide the first-read message before choosing colours, adding photos, resizing logos, or asking an AI tool to make a layout.

Visual Weight

Visual weight is how strongly an element pulls attention. A small saturated colour block can feel heavier than a large pale image. A bold heading can outweigh a paragraph. A logo in a corner can become too heavy if it is oversized or trapped in too little space.

Element	Adds weight	Reduces weight
Size	Make it larger, wider, taller, or more isolated.	Make it smaller or group it with related supporting content.
Colour	Use saturated brand colour, dark colour, or high contrast.	Use neutral colour, lighter tint, or less contrast where appropriate.
Type	Use larger size, heavier weight, shorter line, or strong position.	Use body size, regular weight, calm line-height, and consistent measure.
Image	Use a large crop, strong contrast, people, faces, animals, water, fire, or action.	Use a quieter crop, more space, lower contrast, or fewer competing images.
Position	Place it near the top, left edge, centre, or isolated area.	Place it in a supporting region with clear relationship to the main content.
Space	Surround it with open space so it becomes important.	Place it inside a group so it shares attention.
Shape	Use a box, rule, icon, circle, or badge.	Remove unnecessary containers and rely on alignment instead.

Composition Examples

These examples show visual weight patterns, not finished artwork. Use them to explain why one layout feels clearer than another.

Clear hierarchy

One dominant message

Make the main message visibly heavier than the supporting details. A viewer should know where to look first within three seconds. Best for posters, social tiles, covers, and web openers

Too much weight

Everything competes

When every element is large, coloured, boxed, or centred, nothing feels important. Reduce, group, and create a clear first read. Common risk in local flyers and event notices

Balanced field

Image, type, and action work together

Large image areas, strong headings, quiet captions, and small calls to action can share the page when their weights are planned. Best for reports, web pages, newsletters, and brochures

AI design prompt

Ask for visual weight, not decoration

Describe the hierarchy, grid, white space, colour restraint, and first-read message. This gives AI tools clearer design intent. Use when briefing AI image, layout, or presentation tools

Reading Order

A good composition has a controlled reading order:

First read: the main message, campaign, event, warning, or purpose.
Second read: the supporting explanation, image, date, location, or benefit.
Third read: details, contact information, partners, QR code, terms, or references.

Use	Avoid
Use one dominant element per artefact.	Avoid making the heading, photo, logo, date, QR code, and partner logos all compete equally.
Use scale contrast between the main message and details.	Avoid many similar-sized text blocks with no clear priority.
Use quiet areas to make important content easier to see.	Avoid filling every empty space because the page feels unfinished.
Use consistent alignment to connect related elements.	Avoid placing items by eye in many unrelated positions.
Use brand colour as emphasis.	Avoid using all brand colours at once just because they are available.

White Space

White space is not empty. It is the part of the composition that lets people understand the content.

Use outer margins to protect the design from feeling cramped.
Use space between groups to show what belongs together.
Use space around the main message to make it important.
Use quiet fields behind body copy so reading is easy.
Use less content when the format is small, distant, or fast-moving.

Use space to create confidence

Leave enough space around headings, logos, photos, and calls to action. A layout with controlled space often feels more professional than a layout with more information.

Avoid edge pressure

Do not push important text, logos, QR codes, or partner marks close to the edge. Crowded edges make an artefact feel accidental and can cause print, crop, or screen issues.

Image And Type Balance

Images carry strong emotional weight. In Landcare materials they can show place, people, land, water, learning, restoration, biodiversity, and community action. Use them deliberately.

Pattern	Use	Avoid
One strong image	Use one large image when the story is about place, action, or impact.	Avoid adding many small images when one image would communicate better.
Image plus quiet text field	Place text on a clear field beside or over a quiet part of the image.	Avoid placing body copy over busy detail, faces, water texture, foliage, or high-contrast backgrounds.
Captioned image	Use captions to explain why the image matters.	Avoid decorative images that do not support the message.
Image grid	Use repeated image sizes and consistent gaps for galleries or reports.	Avoid uneven crops and mixed gaps unless the difference has a purpose.

Logo And Partner Marks

Logo placement is part of composition. It should identify the artefact without overpowering the message.

Keep the Landcare brand mark clear with approved clear space.
Place logos in a consistent region such as the footer, header, or closing panel.
Keep partner logos smaller than the main message unless the artefact is specifically about the partnership.
Do not use logo size to solve weak hierarchy. Fix the message, grid, and spacing first.
For multiple marks, use a logo strip with consistent height and spacing.

Common Landcare Layouts

Artefact	First read	Supporting weight	Quiet details
Event poster	Event name or action invitation	Date, location, image, registration call to action	Partners, contact, QR code, conditions.
Social tile	One short message	One image or graphic field	Logo and short URL only.
A4 flyer	Purpose or offer	Key benefits, date, location, image	Contacts, partners, references.
Report page	Section title or key finding	Chart, image, summary paragraph	Footnotes, source notes, captions.
Field sign	Safety, wayfinding, or interpretation message	Icon, map, image, action step	Contact, partner marks, acknowledgements.
Learning worksheet	Activity title and task	Steps, examples, diagrams	Metadata, teacher notes, references.

AI Design Guidance

AI tools can help create draft layouts, but they need clear composition direction. Ask for structure and hierarchy, not just style.

Prompt Pattern

Use this pattern when asking an AI tool to create or revise a layout:

Create a Landcare [format] using a [grid] with a clear first-read message: [message]. Use Open Sans typography, approved Landcare colours, generous margins, strong alignment, and controlled visual weight. Make [primary element] dominant, [secondary element] supporting, and [details] quiet. Avoid clutter, decorative effects, justified text, and too many colours.

AI Review Checklist

Check	Question
First read	Can a viewer name the main message in three seconds?
Hierarchy	Are the main, supporting, and detail layers clearly different?
Brand restraint	Are approved colours used with control rather than overload?
Grid discipline	Do major edges align to a clear grid or optical structure?
Legibility	Is text readable at the intended size, distance, and medium?
Logo use	Is the logo clear, correctly placed, and not over-scaled?
Accessibility	Does the design avoid colour-only meaning and low contrast?
Export reality	Will the design survive print trim, social crop, projection, or mobile display?

Self-Review

Use these passes before publishing or exporting:

Squint pass: blur your eyes. The main message should still dominate.
Distance pass: step back or zoom out. Posters and social tiles should still make sense.
Grid pass: check that major edges align.
Weight pass: check that colour, image, type, and logo weight match the intended reading order.
Spacing pass: compare gaps. Related items should sit closer together than unrelated items.
Type pass: check line length, rag, heading scale, and body readability.
Brand pass: check approved colours, typography, logo clear space, and tone.
Accessibility pass: check contrast, plain language, captions, alt text, and colour-independent meaning.

Use And Avoid

Use	Avoid
Use one clear first-read message.	Avoid giving every element equal emphasis.
Use Open Sans for normal typography.	Avoid decorative fonts or overusing Sari outside approved logotype work.
Use alignment and spacing before adding boxes or decoration.	Avoid using boxes around everything to create structure.
Use one strong photo when it tells the story.	Avoid collages that make every image too small to understand.
Use controlled colour weight.	Avoid colour overload across headings, backgrounds, boxes, icons, and charts.
Use logo clear space and consistent logo regions.	Avoid making the logo huge because the rest of the layout lacks hierarchy.
Use AI prompts that specify hierarchy, grid, and restraint.	Avoid prompts that ask only for “eye-catching” or “beautiful” without structure.

Related Foundations

Grid defines the structure composition uses.
Typography defines hierarchy, text elements, and readability.
Colour defines visual weight, colour grouping, and accessible combinations.
Accessibility defines inclusive reading, learning, and interaction guidance.