Learner worksheet

Visual Foundations Board

A visual foundations board for annotating layout, typography, color, composition, accessibility, AI critique, and one product-facing visual decision.

Output standard

One public-ready visual foundations board with evidence notes, AI curation, and a scoped visual-design decision.

Use when

Use in Session 3 as the overview board, then specialize it across the craft lessons.

Related sessions

Session 03Visual Foundations: How Designers See ScreensVisual foundations map with layout, typography, color, composition, AI critique, and one product decision Session 04Layout and Spacing: Order, Grouping, Grid, and DensityFigma layout and spacing studio board with content inventory, mobile and desktop frames, layout guides, auto layout test, AI critique notes, and one product decision Session 05Typography: Type Roles, Hierarchy, Readability, and ToneTypography audit board with type roles, hierarchy, readability, accessibility, AI critique, and one typography decision Session 06Color: Roles, Contrast, State, Accessibility, and TrustColor role and contrast sheet with palette roles, state meanings, accessibility checks, AI critique, and one color decision Session 07Composition: Focal Point, Balance, Rhythm, Density, and PolishComposition critique board with whole-screen read, focal point, visual weight, rhythm, density, AI critique, and one composition decision

Worksheet fields

Use this when the learner needs to build design-specialist visual judgment before deeper product framing or interface redesign.

Fields to complete

Screen or UI sample
Layout notes
Typography notes
Color roles
Composition and density notes
Accessibility and contrast concerns
AI critique to accept
AI critique to adapt
AI critique to reject
Visual-design decision sentence

Quality check

The board should explain how visual choices affect clarity, trust, and action.

Check before accepting

Layout notes cover spacing, alignment, grouping, and density.
Typography notes cover hierarchy, readability, and role.
Color notes cover meaning, contrast, state, and restraint.
Composition notes separate evidence from taste.
AI critique is checked before the final decision is written.
Accept/adapt/reject notes include reasons.
Final decision names visual evidence, product reason, and scope limit.

Quality benchmark

Use this benchmark to calibrate the board before showing it publicly or submitting it for review.

Check before accepting

Weak: describes the screen as clean, modern, premium, or nice without evidence.
Better: names visible elements and one hierarchy issue, but the AI trail or product reason is still thin.
Strong: includes layout, typography, color, composition, accessibility, AI curation, uncertainty, decision, and tradeoff.

Starter prompt

Use this prompt after the learner has annotated the screen visually.

Starter prompt

I am learning visual design fundamentals for product screens.

Screen or design sample:
[describe the screen, paste a safe screenshot description, or describe an AI-generated UI]

Please critique it in simple English.
Return:
1. Layout: how spacing, alignment, grouping, and grid help or hurt clarity.
2. Typography: whether size, weight, line length, and hierarchy support reading.
3. Color: what roles the colors play, including meaning, state, contrast, and trust.
4. Composition: whether the screen feels balanced, crowded, sparse, or visually noisy.
5. Accessibility: what might be hard to read, distinguish, tap, or understand.
6. AI-output risk: if this were generated by AI, what looks polished but weak?
7. First improvement: recommend one visual-design improvement and explain the product reason.

Rules:
- Do not redesign the whole screen.
- Separate visual evidence from taste.
- Do not say "modern", "clean", or "beautiful" without explaining why it helps the user.
- Name what you are uncertain about.