1 - Introduction ~5 mins
Welcome
A document can say all the right things and still look unfinished. Today you learn four design principles that make a page feel clear and professional: Contrast, Repetition, Alignment, and Proximity (often remembered as CRAP). You will fix a rough sample first, then redesign one of the documents you have already made for your own real project — the notice, letter or handout you produced for a real reader rather than a practice exercise — so that reader can scan it in seconds.
What you will walk out able to do
- Use Contrast, Repetition, Alignment, and Proximity on a real page
- Make a page easy to scan, with the title, the headings and the details clearly apart and space that is deliberate
- Take one document you have already written and give it a professional layout
Warm-up
In pairs, 30 seconds each: name one document that looked professional and one that looked messy (a flyer, WhatsApp graphic, school notice, or Work Experience handout). What pulled your eye first: a bold title, clear spacing, or a tidy layout? You will use the same idea on your own portfolio work today.
Need a document later? Your project folder is named {{code:sm1}} — that is where the work for your specialism is kept. If there is no finished page of your own in there yet, you will take today's sample, change its wording into a notice for your own project, and still save a full redesign as {{code:sm1_doc5_crap_applied.docx}}.
2 - Key Concepts ~6 mins
These four principles come from Robin Williams' design guide The Non-Designer's Design Book. You do not need fancy tools. You need deliberate choices about size, consistency, edges, and space.
CRAP in one sentence: make the important thing stand out (Contrast), keep choices consistent (Repetition), line things up (Alignment), and group related content with space between groups (Proximity).
| Concept | Why it matters | Example |
|---|---|---|
| Contrast — make important elements clearly different (size, weight, or colour) | Readers decide in seconds what matters; weak contrast forces them to hunt | 22 pt bold title vs 11 pt body |
| Repetition — reuse the same fonts, heading sizes, colours, and spacing rules | Consistency makes a document feel intentional rather than thrown together | Same Heading 2 on every section label |
| Alignment — line elements up to a shared edge instead of placing them at random | Aligned edges calm the page and make scanning faster | All body text flush to one left margin |
| Proximity — group related items close together; leave clear space between groups | Space tells the reader what belongs together without extra words | Name, phone, email as one tight block |
Glance back at the table during the demo if you forget a name. Watching the messy flyer turn into a clean one is what will teach you most.
3 - Step-by-step Task ~15 mins
Open the messy one-page sample Saturday Skills Swap, saved for you as {{code:sm1_crap_demo.docx}} in {{code:Project_Portfolio/09_specialism/sm1/01_drafts}}. It is a real community flyer with every layout choice stripped out: six cramped lines, all the same font and size, no bold, no headings and no gaps.
The walkthrough below takes you through it on your own platform. You will give the title real weight, add a subtitle line for the place, time and price, rebuild the body as three labelled sections (What is it?, Who we need, Contact), put the same heading treatment on all three labels, pull the body text to one left edge, and close the gaps inside the contact block while opening them between sections. If the file is not there, the first steps show you how to make it and type the six lines.
This is the model for the portfolio document you will redesign next, so keep the finished demo in {{code:01_drafts}} and leave it open beside your own page.
4 - Common Issues ~4 mins
Common Issues
| Issue | Solution |
|---|---|
| I changed five fonts and three colours and it still looks messy | Reset to two fonts maximum (or one font family with bold for headings). Pick one accent colour. CRAP is restraint, not decoration. |
| My page has huge empty regions and still feels cramped in places | Use paragraph spacing and clear section gaps, not random blank lines. Group related lines tightly, then put one deliberate gap between sections. |
| Heading styles look different from my classmate's | That is fine if each heading level is consistent inside your own document. Check that every Heading 2 matches the others in size, weight, and colour. |
| I cannot find Align left or paragraph spacing | In Word Online use the Home ribbon: alignment icons and the Line and paragraph spacing control (1.15, then Add space after paragraph). Layout Before/After fields are an optional backup only if they appear. In Google Docs use the toolbar align icons and {{menu:Format -> Line & paragraph spacing}}. |
5 - Independent Practice ~20 mins
Independent Practice
Only if your page is already simple you may instead use a short newsletter, a light table page, or a mail-merge letter. If your page is denser than the demo, still do only the four checklist moves on title, headings, left edge, and section gaps — do not rebuild the whole layout.
If you have no finished document of your own yet: open {{code:sm1_crap_demo.docx}}, make a copy, rewrite it as a notice for your own project (real title, date and place, roles, and your contact details), apply the same CRAP moves, and save that copy as {{code:sm1_doc5_crap_applied.docx}} in {{code:03_finished}}.
Do this checklist (match {{code:sm1_crap_demo.docx}}):
- First, strengthen the title versus body (size and bold)
- Then use the same style on every section heading
- Then left-align body text to one shared edge
- Finally, group related lines tightly and add deliberate space between sections
Same moves, different page: on a newsletter, strengthen the masthead title and match section labels; on a letter, strengthen the subject or opening line and group the address or sign-off block.
If the clock is tight: get a stronger title, matching headings, and one tight contact or facts block done — that already reads more professional than the draft you started with.
- {{code:sm1_doc5_crap_applied.docx}} is saved in {{code:Project_Portfolio/09_specialism/sm1/03_finished}} (a copy of a real project document, or a personalised Skills Swap notice if that was your fallback)
- A reader can tell the title, section headings, and body apart at a glance (clear hierarchy)
- Headings, fonts, and spacing choices feel consistent across the page rather than random
- Related details sit together and sections have deliberate breathing room between them
Unlock the full learning experience
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.
This lesson is copyright of 123Learn.ie 2017 - 2025. Unauthorised use, copying or distribution is not allowed.