CEPD · Module 2 — Visual and information design for screens
One primary action, one focal graphic, the CAP checklist (contrast, alignment, proximity, white space, balance, repetition) and a clear reading order.
About 18 min
Practice in the lesson player
Sorting, matching, quizzes, and the module gate stay behind a free account so scored answers are not public. The teaching notes below are the same cited curriculum.
01
A learning screen with six equal bullets, a stock photo and three buttons competes with itself. The learner spends the first seconds working out where to look. Hierarchy decides that for them: one thing is most important, one thing is next, and the action is obvious.
02
Title One screen, one story
Title: States the decision or idea of the screen in one line.
Focal graphic: The one visual that does instructional work.
Supporting text: Short, next to what it explains.
Primary action: One clearly dominant button or interaction.
03
Contrast — The most important element is visibly different. Text meets 4.5:1.
Alignment — Every element lines up with something. No floating items.
Proximity — Related items are close; unrelated items are apart.
White space — Space separates groups and gives the focal element room.
Balance — Visual weight is distributed so the eye is led, not pulled to a corner.
Repetition — The same element looks the same on every screen.
04
Before: Title, six equal bullets, stock photo, three buttons (Next, Resources, Help) the same size.
After: Title as a question, a labelled diagram, two short labels, one primary button, Resources and Help as quiet links.
05
A quick test: blur the screen (squint, or apply a blur in the design tool) and ask what you see first. If the answer is not the focal element or the primary action, the hierarchy has failed. Eye-tracking research by Nielsen Norman Group found readers of text-heavy web pages often scan in an F-shaped pattern, reading the first lines and the left edge. In Arabic the pattern is mirrored to the right edge. Put the words that carry meaning at the start of lines and headings, on the side where reading begins.
06
Run the squint test and the CAP checklist on three screens from your course. Fix the failures. These become the first templates in your pattern sheet.