Section 342 of 440
Complete canonical tutorial. This reader section contains the same teaching body as PWR-160 · Visual composition. Open the Power dossier.
PWR-160 · SELF GUIDED full tutorial
Arrange a small layout so the viewer finds the main message and next action
This lesson teaches composition for a declared communication goal. You will set the viewer task, create hierarchy, align related elements, use contrast and whitespace, test at target size and revise from viewer performance rather than taste alone.
1 · Permission and limits
Know exactly what you may do
2 · Get ready
Gather what you need and check the starting conditions
What you need
- Brief A — Repair café. Title: “Repair café.” Date: “Saturday 18 October, 10:00–14:00.” Place: “Riverside Hall.” Description: “Volunteers will inspect one small household item. Repair is not guaranteed.” Action: “Book a free 20-minute slot.”
- Brief B — Winter-planning meeting. Title: “Winter planning meeting.” Date: “Thursday 6 November, 18:30–20:00.” Place: “Oak Room, Central Library.” Description: “Residents will choose two priorities for safer winter travel and assign volunteers to the next survey.” Action: “Read the two-page briefing before you attend.”
- Brief C — Seed swap. Title: “Community seed swap.” Date: “Sunday 22 February, 11:00–13:00.” Place: “Market Hall.” Description: “Exchange home-grown vegetable and flower seeds. Label each packet with the plant name and harvest year.” Action: “Bring up to five labelled packets; no booking is needed.”
- One sheet of paper and marker, or accessible layout software with alignment guides and a grayscale preview.
- A five-second test sheet with spaces for viewer, first item noticed, action found, incorrect detail and unreadable detail.
Before you start
- Use Brief A exactly as written for the first lesson; do not solve a wording problem by deleting required information.
- Choose one target size: an A5 printed page or a 390-pixel-wide phone screen. Keep that size for every comparison.
- Write: “Within five seconds the viewer should find ‘Bring one broken item’; next they should find ‘Book a free 20-minute slot.’”
- Arrange for one diagnostic viewer and three different final viewers who consent to the short test.
- Record that the wording is supplied fictional material and that any added visual asset must be learner-owned or openly licensed.
3 · The method
Follow these steps in order
- Write the viewer task
Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.”
Why: A composition can be judged only against a declared communication goal.
Check: The task names one first focus and one next action.
- Rank the content
Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task.
Why: Hierarchy begins with information priority, not decoration.
Check: Only one item is primary and every remaining item has a role.
- Place the focal point
Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length.
Why: A single focal point guides the first glance.
Check: The primary item is found first without covering required detail.
- Align related elements
Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges.
Why: Consistent alignment shows which items belong together.
Check: Related elements share visible edges or centres and unrelated items have deliberate separation.
- Use contrast with redundancy
Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view.
Why: Redundant cues preserve meaning when colour is unavailable.
Check: The action remains identifiable in grayscale and without colour naming.
- Protect whitespace and reading
Increase space between groups and keep type at the declared readable size. Remove decoration before shrinking text.
Why: Whitespace separates groups; tiny type transfers burden to the viewer.
Check: All required text remains readable at target size with clear group spacing.
- Run a five-second test
Show the layout to a consented viewer for five seconds, hide it, then ask what they saw first and what action they would take.
Why: Viewer task performance tests hierarchy more directly than asking “Do you like it?”
Check: The viewer returns the primary message and action without prompting.
- Revise one cause
If the viewer misses an item, change only hierarchy, alignment, contrast or spacing and repeat with a new viewer.
Why: One-variable revision links the design change to the observed error.
Check: A new viewer succeeds without a new content error or access loss.
4 · Worked example
See the whole method used once
Scenario
A learner designs a fictional free repair-café card with “Bring one broken household item” as the main message and a booking link as the action.
Walkthrough
- They define the first focus as “Bring one item” and the next action as “Book a free slot.”
- They rank title and action above date, place and description and remove an unrelated decorative quote.
- Title, date and place share a left edge; the booking action uses bold type and a bordered button that survives grayscale.
- The first viewer recalls the event but misses the booking action because it sits too close to the footer.
- The learner moves the action beside the date and adds whitespace; three new viewers each find both message and action within five seconds and read the date, place and booking detail correctly.
Result
Three viewers meet the declared finding and reading task after one traceable revision. That does not establish universal aesthetic quality or art expertise.
5 · Right and wrong
Compare correct or safer execution with the common wrong version
| Moment | Right / safer | Wrong / riskier | Why it matters |
|---|---|---|---|
| Write the viewer task | Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.” | Start decorating before defining what the viewer must find. | A composition can be judged only against a declared communication goal. |
| Rank the content | Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task. | Make every item large and bold so nothing is primary. | Hierarchy begins with information priority, not decoration. |
| Place the focal point | Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length. | Place the title wherever space remains after other elements. | A single focal point guides the first glance. |
| Align related elements | Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges. | Use several almost-aligned edges for related details. | Consistent alignment shows which items belong together. |
| Use contrast with redundancy | Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view. | Indicate the action only with red versus green. | Redundant cues preserve meaning when colour is unavailable. |
6 · Common mistakes
Spot the error and apply the correction
| Mistake | Fix |
|---|---|
| Start decorating before defining what the viewer must find. | Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.” |
| Make every item large and bold so nothing is primary. | Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task. |
| Place the title wherever space remains after other elements. | Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length. |
| Use several almost-aligned edges for related details. | Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges. |
| Indicate the action only with red versus green. | Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view. |
7 · Practice
Turn the steps into a usable skill
First session
- Copy every item from Brief A onto the target page before styling it.
- Mark “Bring one broken item” as primary, the booking action as secondary, and the date, place and description as supporting information.
- Use one main alignment line. Make the primary message largest, place the action close enough to be found next, and separate the supporting details with whitespace.
- Make the action distinct with two non-colour cues, such as bold text plus a border, and check the page in grayscale.
- Show the page to one diagnostic viewer for five seconds. Hide it and record what they saw first, what action they found and which detail they misread or missed.
- Change only the layout feature most likely to have caused that error. Then test the revised page with three fresh viewers and record every answer.
Repeat plan
After at least three days, repeat the complete method with Brief B. After another three days, repeat it with Brief C. Keep the same target size, use fresh viewers, and do not look at the previous layout while making the first draft. The longer description in Brief B tests information grouping; the different action in Brief C tests whether the hierarchy follows the brief rather than a memorised layout.
Progress when
- All three final viewers find the intended first message and next action within five seconds.
- All three final viewers read the date and place correctly when allowed to inspect the page normally.
- The action remains identifiable in grayscale and without colour naming.
- No required text was removed or made harder to read during revision.
Do not progress when
- Different viewers keep noticing different first items because several elements compete for attention.
- The action depends on colour alone or required text is too small at the declared target size.
- A revision changes the wording, target size and layout at the same time.
8 · Check the result
Measure what changed
Whether three fresh viewers find the intended first message and next action on the final page
How: Show the final page to each viewer for five seconds, hide it, and record the first item recalled and the action recalled. Then let the viewer inspect the page normally and record whether the date, place and required description are read correctly.
Good result: All three viewers recall the intended first message and action after five seconds, then read every required detail correctly. The result is reported only for this content, size and viewer group.
This does not prove: It does not prove artistic quality, universal usability, accessibility certification, branding skill or success with another audience or display size.
Self-check
- What should the viewer notice first, and what should they do next?
- Is there exactly one primary item?
- Do related details share an alignment while separate groups have visible space between them?
- Can the action still be identified in grayscale?
- Which single layout change was made after the diagnostic viewer's error?
9 · Stop, adapt or get help
Keep the safety boundary practical
Stop and get help
- Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
- Stop using any visual asset whose ownership, licence or cultural authority is unclear.
- Return to the information ranking when more than one item appears primary.
- Return to the readable target size when the layout works only after required text is shrunk.
Accessibility and adaptations
- The composition may be made with keyboard-only software, screen magnification, a text-first wireframe, tactile cards or help from a scribe.
- Keep the information order meaningful without colour and write alt text for any meaningful image.
- This lesson's five-second visual check is not suitable as the only test for blind or low-vision users; test the delivered format with appropriate access users and methods.
10 · Evidence and limits
Why these instructions are here
- primary research
Art-knowledge training affected aesthetic judgements but did not transfer to executive function or unrelated styles, supporting bounded task claims.
The role of art knowledge training on aesthetic judgements and executive functions - primary research
Observational drawing feasibility research does not justify broad cognitive or artistic transfer claims from one composition exercise.
Promoting Successful Cognitive Aging Through Observational Drawing: A Feasibility Study
Limits
- One event card does not establish art, branding, accessibility certification or design-system competence.
- A five-second result belongs only to these viewers, this content and this display size.
- Viewer performance can test the declared communication task; it cannot produce a universal beauty or artistic-talent score.
Open the complete canonical research register
- Primary empirical supportLimiting / contraryEfficacy of Edwards' Cognitive Shift Approach to Art Education
C A Chambliss; A J Hartl · 1987 · Primary research
- Primary empirical supportLimiting / contraryThe role of art knowledge training on aesthetic judgements and executive functions
I Bara; E S Cross; R Ramsey · 2025 · Primary research
- Primary empirical supportLimiting / contraryImitation, Inspiration, and Creation: Cognitive Process of Creative Drawing by Copying Others' Artworks
T Okada; K Ishibashi · 2017 · Primary research
- Primary empirical supportLimiting / contraryPromoting Successful Cognitive Aging Through Observational Drawing: A Feasibility Study
M M Vodyanyk; S M Jaeggi · 2025 · Primary research
- Limiting / contraryOfficial boundary contextAssessment of repetitive tasks of the upper limbs (the ART tool)
UK Health and Safety Executive · 2010 · Official guidance
Read the complete evidence interpretation on the Power dossier.
Tutorial delivery controls
Learn, adapt, troubleshoot and resume
Progress is saved only in this browser on this device.
Step-by-step learner mode
Each activity includes its success check, a nearby accessible alternative and an “I’m stuck” correction path. Alternatives preserve the target where possible; when they change the task, Titan labels them as related rather than equivalent.
Write the viewer task
Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.”
A composition can be judged only against a declared communication goal.
The task names one first focus and one next action.
I’m stuck on this step
Reset: Re-read this authored instruction — “Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.”” — and its success check, then attempt only this step.
Possible snag: Start decorating before defining what the viewer must find.
Correction: Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.”
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Rank the content
Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task.
Hierarchy begins with information priority, not decoration.
Only one item is primary and every remaining item has a role.
I’m stuck on this step
Reset: Re-read this authored instruction — “Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task.” — and its success check, then attempt only this step.
Possible snag: Make every item large and bold so nothing is primary.
Correction: Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task.
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Place the focal point
Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length.
A single focal point guides the first glance.
The primary item is found first without covering required detail.
I’m stuck on this step
Reset: Re-read this authored instruction — “Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length.” — and its success check, then attempt only this step.
Possible snag: Place the title wherever space remains after other elements.
Correction: Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length.
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Align related elements
Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges.
Consistent alignment shows which items belong together.
Related elements share visible edges or centres and unrelated items have deliberate separation.
I’m stuck on this step
Reset: Re-read this authored instruction — “Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges.” — and its success check, then attempt only this step.
Possible snag: Use several almost-aligned edges for related details.
Correction: Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges.
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Use contrast with redundancy
Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view.
Redundant cues preserve meaning when colour is unavailable.
The action remains identifiable in grayscale and without colour naming.
I’m stuck on this step
Reset: Re-read this authored instruction — “Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view.” — and its success check, then attempt only this step.
Possible snag: Indicate the action only with red versus green.
Correction: Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view.
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Protect whitespace and reading
Increase space between groups and keep type at the declared readable size. Remove decoration before shrinking text.
Whitespace separates groups; tiny type transfers burden to the viewer.
All required text remains readable at target size with clear group spacing.
I’m stuck on this step
Reset: Re-read this authored instruction — “Increase space between groups and keep type at the declared readable size. Remove decoration before shrinking text.” — and its success check, then attempt only this step.
Possible snag: The result from “Increase space between groups and keep type at the declared readable size. Remove decoration before shrinking text.” does not yet meet this declared check: All required text remains readable at target size with clear group spacing.
Correction: Return to the start of “Protect whitespace and reading”, reduce complexity or pace, and repeat only the part needed to satisfy: “All required text remains readable at target size with clear group spacing.”
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Run a five-second test
Show the layout to a consented viewer for five seconds, hide it, then ask what they saw first and what action they would take.
Viewer task performance tests hierarchy more directly than asking “Do you like it?”
The viewer returns the primary message and action without prompting.
I’m stuck on this step
Reset: Re-read this authored instruction — “Show the layout to a consented viewer for five seconds, hide it, then ask what they saw first and what action they would take.” — and its success check, then attempt only this step.
Possible snag: The result from “Show the layout to a consented viewer for five seconds, hide it, then ask what they saw first and what action they would take.” does not yet meet this declared check: The viewer returns the primary message and action without prompting.
Correction: Return to the start of “Run a five-second test”, reduce complexity or pace, and repeat only the part needed to satisfy: “The viewer returns the primary message and action without prompting.”
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Revise one cause
If the viewer misses an item, change only hierarchy, alignment, contrast or spacing and repeat with a new viewer.
One-variable revision links the design change to the observed error.
A new viewer succeeds without a new content error or access loss.
I’m stuck on this step
Reset: Re-read this authored instruction — “If the viewer misses an item, change only hierarchy, alignment, contrast or spacing and repeat with a new viewer.” — and its success check, then attempt only this step.
Possible snag: The result from “If the viewer misses an item, change only hierarchy, alignment, contrast or spacing and repeat with a new viewer.” does not yet meet this declared check: A new viewer succeeds without a new content error or access loss.
Correction: Return to the start of “Revise one cause”, reduce complexity or pace, and repeat only the part needed to satisfy: “A new viewer succeeds without a new content error or access loss.”
Stop / get help: Stop and obtain specialist review if a visual error could affect safety, healthcare, money, rights or legal compliance.
Correct versus incorrect execution
These accessible process diagrams are built from the tutorial’s own right/wrong teaching. They are not anatomical illustrations and do not add technique beyond the canonical tutorial.
Complete the sentence: “Within five seconds, the viewer should find ___; next they should ___.”
Start decorating before defining what the viewer must find.
Label each item primary, secondary or supporting. Remove anything that does not serve the viewer task.
Make every item large and bold so nothing is primary.
Put the primary item where it can dominate by size, position or contrast, then view the page from arm’s length.
Place the title wherever space remains after other elements.
Choose one or two alignment lines and attach related date, place and action elements to them. Avoid almost-aligned edges.
Use several almost-aligned edges for related details.
Make the action distinct using at least two cues such as weight plus border or size plus icon. Check a grayscale view.
Indicate the action only with red versus green.
Method-structure checklist
10 of 10 structural checks present
- Ordered, Power-specific instructions — present
- Every activity has a success check — present
- Materials or supplied records are declared — present
- Measurement or assessment rule is present — present
- Tutorial-specific troubleshooting is present — present
- Stopping or escalation boundary is present — present
- Every activity has an adjacent alternative — present
- Correct-versus-incorrect comparison is present — present
- Evidence context is bound to the Power record — present
- Planning metadata is present — present
The method-readiness band and presence checklist assess tutorial presentation and are separate from evidence quality for the underlying Power. They are automated editorial aids, not human approval.
Manual editorial sign-off: Pending. This tutorial must not display a human-approved state until an identified editor signs the exact content hash.