Lesson 0002: Practice

CRAP Drill: Make It Stick

Pure retrieval practice. No new vocabulary. Builds storage strength on Lesson 0001.

Recognising the four pillars is easy. Reaching for them when you face a real diagram is the hard part. This lesson trains that reach. Twelve exercises, four modes, increasing difficulty. Answer each one out loud or on paper before opening the reveal. The struggle is the point.

Quick refresher, the four words you should know cold:

C Contrast, different things should look very different R Repetition, repeat visual elements to bind a design A Alignment, every element placed deliberately, on an invisible line P Proximity, related items grouped, unrelated items separated

Mode 1: Cold Recall

Write the answer from memory before revealing. Forcing the word out of your head is what builds the memory trace.

Exercise 1 of 12

Define each of the four CRAP principles in your own words. One sentence each. Don’t peek.

Reveal canonical definitions

Contrast: if two things are different, make them very different.

Repetition: repeat visual elements (colour, shape, font, weight) to unify a design.

Alignment: every element should have a visual connection to another element on the page.

Proximity: group related items together; separate unrelated items.

If you missed any, re-read the matching section of Lesson 0001 before continuing.

Exercise 2 of 12

Which principle is about unity, and which is about grouping? They sound similar, nail the difference.

Reveal answer

UnityRepetition. Same colour, same font, same shape repeated across the whole design so it feels like one thing.

GroupingProximity. Things that belong together sit close; things that don’t, sit apart.

Repetition spans the entire design. Proximity is local, it organises one chunk at a time.

Mode 2: Identify the Principle

One scenario, four candidates. Pick the principle most at work. Answers are interleaved, no two consecutive questions share the same answer.

Exercise 3 of 12

A dashboard uses the same blue for every KPI label, the same grey for every axis, and the same rounded card style around every metric. The whole thing feels like one product. Which principle is doing the heavy lifting?

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity
Reveal answer

B: Repetition.

Re-using colour, shape, and component style across a design is the classic signature of repetition. It’s what makes a thing feel branded and coherent rather than cobbled together.

Exercise 4 of 12

A slide shows a model name, then a 1px gap, then a list of fields, then a 1px gap, then another model name, then its fields. You can’t tell where one model ends and the next begins. Which principle is missing?

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity
Reveal answer

D: Proximity.

The fields belong to their model. To show that grouping, the space between a model and its own fields must be smaller than the space between two different models. Equal gaps everywhere = no groups visible.

Exercise 5 of 12

A page title is 16px and the body text is 15px. The title doesn’t feel like a title, it just looks like the body grew a little. Which principle is violated?

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity
Reveal answer

A: Contrast.

A 1px size difference reads as a mistake, not a hierarchy. Robin Williams’ rule: if two things are different, make them very different. Try 28px vs 15px.

Exercise 6 of 12

A diagram has six text labels scattered across the canvas. None of them share a left edge, a centre, or a baseline. It looks messy even though every label individually is fine. Which principle is missing?

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity
Reveal answer

C: Alignment.

Every element should sit on an invisible line shared with at least one other element. Without that, the eye has no path through the design, just clutter.

Mode 3: Spot the Violation

Each box below is broken. Name the principle being violated and how you’d fix it.

Exercise 7 of 12

A Holistics docs snippet:

Models orders, one row per order placed by a customer customers, one row per registered customer products, one row per item available for sale reviews, one row per review left on a product
Reveal answer

Alignment. Each row begins at a different indent, no shared left edge. The reader can’t scan the list.

Fix: anchor every model name to the same left margin. Optionally indent the descriptions to a second consistent column.

Exercise 8 of 12

A diagram caption:

FIGURE 1, semantic layer Figure 2, ETL pipeline overview fig. 3: caching layer architecture Figure four, Embedded analytics flow
Reveal answer

Repetition. The caption pattern changes every line, casing, numerals, separators. Nothing repeats, so the four captions don’t read as a set.

Fix: pick one pattern, e.g. Figure 1, Semantic layer, and use it everywhere. Repetition is what turns a list of items into a system.

Exercise 9 of 12

A simple card on a landing page:

+----------------------------------+ | Semantic Layer | | The semantic layer translates | | your business terms into SQL. | | Learn more | +----------------------------------+
Reveal answer

Contrast. Title, body, and call-to-action are all the same weight and size. Nothing tells the eye where to start or which word is the action.

Fix: bold and enlarge the title; keep body regular; make “Learn more” a coloured link or button. Three distinct visual roles = three distinct visual treatments.

Exercise 10 of 12

A pricing comparison:

Free $0 No SQL editor Up to 3 users Community support Pro $99 Full SQL editor Up to 25 users Email support Enterprise call SSO + audit logs Unlimited users Dedicated CSM
Reveal answer

Proximity. Every cell is the same distance from every other cell. The eye can’t tell which fields describe a single tier, tiers blur into each other.

Fix: add a clear vertical gap between tiers (or a divider), and tighten the spacing within a tier. Grouping comes from relative spacing, not absolute.

Mode 4: Apply to a Holistics Scenario

Real situations from your day-to-day. Diagnose all the principles in play, then read the model answer.

Exercise 11 of 12

You’re explaining the semantic layer to a non-technical prospect over a one-page handout. Top half: a diagram. Bottom half: 4 short paragraphs of explanation. Right now the diagram boxes use 5 different colours, the 4 paragraphs each use a different heading font, and the diagram floats slightly to the left of the paragraphs.

Name every CRAP principle being violated.

Reveal answer

Repetition, 5 colours and 4 fonts mean nothing visually repeats. The handout feels like four different products.

Alignment, the diagram and the paragraphs don’t share a left edge or a centre line. Reader has no anchor.

Contrast (likely), with so many competing colours, no element stands out as the entry point. Everything shouts, so nothing leads.

Fix order: lock alignment to one column first, collapse the palette to 2–3 colours (repetition), then crank contrast on the diagram’s focal box and the page title.

Exercise 12 of 12

A teammate sends you a Slack draft explaining a data model change. It’s one long paragraph with: the change summary, the affected dashboards, the rollout date, and the rollback plan, all run together with no breaks.

Which single principle gives the biggest readability gain if you apply it first, and how?

Reveal answer

Proximity. Break the wall of text into four chunks, one per topic, with a blank line between each. The reader instantly sees there are four things, not one.

Proximity is the highest-leverage principle when information is already correct but unscannable. You’ll do this every day in writing, not just in design.

Self-Grade & Next Step

Count how many you got right before opening the reveal.

Ask me anything. If any exercise tripped you up or any answer felt unfair, ask, I’m your teacher, not a graded test. The faster you ask, the faster the misunderstanding dies.