Principle 3 of 4

Alignment

Nothing should be placed on the page arbitrarily. Every element should have a visual connection to something else on the page.

Key rule: Find a line and stick to it.
💡
Why it matters: Random placement looks accidental. Aligned placement looks intentional. Even when elements are far apart, if they share the same invisible edge, your eye connects them — making the whole page feel organised and professional.

Example 1 · Event Poster

School Camp Announcement

Where you see it: class notice boards, printed handouts, email newsletters

✗ Elements floating randomly — no shared edge

School Camp 2025 12 – 14 July, Ubin Island Spots are limited. Register early. Register now

✓ All elements share one left edge

School Camp 2025
12 – 14 July · Ubin Island
Spots are limited. Register early.
Register now
📌 In the good version, an invisible vertical line runs down the left side. Every element — title, subtitle, body, and button — has its left edge on that line. The eye travels straight down effortlessly.

Example 2 · Business Card

Contact Information Card

Where you see it: teacher's name cards, professional introductions, design portfolios

✗ Text indented randomly — no alignment

Ms Sarah Lim
Art Teacher

+65 9123 4567

✓ All text left-aligned on the same edge

Ms Sarah Lim
Art Teacher

+65 9123 4567
💳 A business card is tiny — maybe 85mm × 55mm. Alignment is everything. When every line of text shares the same left edge, the card looks clean and professional. Move just one element off-alignment and the whole card looks sloppy.

Example 3 · CV / Resume

Job Application Document

Where you see it: job applications, scholarship forms, portfolio submissions

✗ Mixed alignments — centre, left, right all on one page

Wei Jian Tan
Student · Sec 1
Education
Orchid Secondary School
2024 – present
Achievements
Class monitor 2024

✓ Consistent left alignment throughout

Wei Jian Tan
Student · Sec 1
Education
Orchid Secondary School, 2024 – present
Achievements
Class monitor, 2024
📋 A resume with mixed alignments (centre name, left-align body, right-align dates) looks amateur. Choosing one alignment and sticking to it immediately makes the document look more professional — even with the exact same content.

Example 4 · Food Menu

Canteen / Hawker Menu Items

Where you see it: hawker stall menus, canteen boards, restaurant menus

✗ Items indented inconsistently

Today's Menu

✓ All items flush left, prices flush right

Today's Menu
🍜 A menu uses two alignment edges: all dish names align on the left, all prices align on the right. This lets your eye scan down the left for the dish you want, then jump across to find the price — without reading the whole line.

Example 5 · Presentation

PowerPoint / Google Slides

Where you see it: every class presentation, teacher's slides, project submissions

✗ Title centred, body left, footer right — 3 alignments

Our Findings
  • Revenue up 20%
  • Students prefer digital

✓ Everything left-aligned — clean and easy to read

Our Findings
  • Revenue up 20%
  • Students prefer digital
📊 Many students centre their slide titles but left-align their bullet points. This creates a tension the eye can feel. Pick one alignment for the whole slide — left alignment is almost always the cleanest choice.

Example 6 · Online Form

Registration / Sign-Up Form

Where you see it: Google Forms, school portals, competition registration pages

✗ Labels and fields unaligned — hard to scan

✓ Labels right-aligned, fields left-aligned — clean grid

📝 The good form uses a two-column grid: labels right-align into the centre, fields left-align out from the centre. Both sets of edges are clean lines. Google and Apple both use this for their forms — it's the fastest layout to fill out.

Interactive

Snap to Alignment

Drag the labels around, then click Auto-align to see them snap to a shared left edge

📌 Title
📅 Date
📍 Venue
📞 Contact
🎯 After clicking Auto-align, notice how all four elements share one invisible vertical line. Even though they're different sizes and on different rows, the shared left edge makes them feel like a unified list.

🎯 Challenge: The Alignment Audit

Take a screenshot of any slide presentation or printed document. Open it in any photo editor and draw vertical lines. Then ask: