The Non-Designer's Design Book
You don't need to be an artist. You just need to know the rules — then break them on purpose.
If two things are not the same, make them very different. If you make them only slightly different, it looks like a mistake.
Date: 15 June 2025
Time: 2pm – 5pm
Venue: Hall B
All students welcome. Come and support your classmates!
Contact: Mr Tan
✗ No contrast — everything looks the same
✓ Strong contrast — eye knows where to go
Contrast shows up everywhere in real life. Here are 3 examples you see every day.
What's the contrast?
The time is huge. Notifications are tiny. You know instantly what matters most.
What's the contrast?
Title is bold & large. Subtitle is small. Author is smallest. Clear visual hierarchy.
What's the contrast?
Big bold text on contrasting background grabs attention. Channel info is much smaller.
Toggle contrast on and off to see the difference in real time.
School Trip to Science Centre
Date: 20 June · Cost: $12 · Return forms by Friday
Sign up nowNotice how the title, supporting info, and call-to-action each feel completely different in size, weight, and colour.
Our eyes are wired to notice difference. When a design has no contrast,
the viewer's eye doesn't know where to look first — so it looks everywhere and remembers nothing.
Contrast can come from:
Look at a food menu near you (hawker stall, canteen, restaurant). Does the menu title stand out from the item names? Does the price look different from the dish description? If not — how would you fix it?
Repeat visual elements throughout a design. This creates consistency and tells the viewer: "these things belong together."
✗ No repetition — every card is styled differently
English Language
Room 301 · Mon 8am
Mathematics Room 215, Tue
Science · Room 402
Wednesday morning
✓ Consistent style — same pattern repeated
English Language
Room 301 · Mon 8am
Mathematics
Room 215 · Tue 8am
Science
Room 402 · Wed 8am
Repetition is the secret behind every strong brand and consistent design system.
Same colours, everywhere
You recognise McDonald's before you even read the name — because the colours repeat everywhere.
Same format, every post
Every post is the same square shape. The repetition of the format creates a clean, unified grid.
Same header style, every page
When every worksheet uses the same header style, students immediately know where to look.
Pick an accent colour. Watch how the same colour repeated across all cards creates a unified look.
Repetition is what makes a design feel like a system rather than a collection of random elements.
When you see the same dot, the same colour, or the same font used again and again, your brain groups them together automatically.
Things you can repeat:
Open any school app or website. List 3 elements that are repeated consistently. Then list 1 element that is NOT consistent. How would you fix the inconsistent one?
Nothing should be placed on the page arbitrarily. Every element should have a visual connection to something else.
✗ Random placement — nothing lines up
✓ Left-aligned — everything connects
The left edges of every element in the good version are on the same invisible vertical line.
Alignment is the invisible grid holding every great design together.
Bad vs. Good alignment
Bottom version: every element shares one left edge — clean and intentional.
Mixed vs. consistent alignment
Top: title centred, text left, button right — 3 different alignments. Bottom: all left-aligned.
Why left-align works
Name, title, contact — all share the same left edge. Your eye reads straight down effortlessly.
Drag the labels around. Click Auto-align to snap them to a left edge.
Even if elements are far apart, aligning them to the same invisible line creates a visual connection.
It gives the design a clean, professional edge that random placement never achieves.
Types of alignment:
The worst mistake: centering some text and left-aligning other text on the same page with no intention behind it.
Take a photo of any printed notice or poster at school. Draw invisible lines on it — do the text blocks align? Are there elements floating randomly? Describe what you'd move to fix it.
Group related items together. Move unrelated items apart. Physical closeness = logical relationship.
✗ Equal spacing — no grouping
Every Tuesday
3pm to 4pm
Room 210
Bring your textbook
Bring your calculator
Bring your worksheet
Contact Mr Lim for details
Email: lim@school.edu.sg
✓ Grouped by topic — easy to scan
When & Where
Every Tuesday, 3pm – 4pm
Room 210
What to Bring
Textbook · Calculator · Worksheet
Contact
Mr Lim — lim@school.edu.sg
Proximity tells your brain what belongs together — without any words needed.
Name close to number = one person
Caption near image = they belong together
✗ Caption far from image
Fig 1. Students at the Science Centre.
✓ Caption directly below image
Fig 1. Students at the Science Centre.
Symbol right next to its label
✗ Labels scattered
✓ Symbol paired with label
Drag the slider. Watch how changing the gap between groups (big gap) vs. within groups (small gap) reveals the structure.
Your brain automatically groups things that are close together. This is called Gestalt psychology — we can't help it.
Good designers use this instinct on purpose.
How to use proximity:
Take any class timetable. Group the subjects by day. Add a larger gap between days and a smaller gap between subjects within the same day. Does it become easier to read?