KLD Institute
Course mapOpen slides

Week 2 tutorial notes

Composition: Focal Point, Balance, Rhythm, Density, and Polish

Explain composition as whole-screen read, focal point, balance, rhythm, density, visual noise, and product reason, then create a composition critique board and one evidence-backed composition decision.

Lesson thesis

Composition is the whole-screen judgment layer. It brings layout, typography, color, spacing, imagery, density, and visual weight together so the first read supports the product moment.

Preparation status

Outline only. Research pass still required before teaching.

Study notes

1. Lecture spine

This lesson closes the visual craft block. It teaches learners to zoom out and judge the whole screen after studying layout, typography, and color separately.

The learner should stop asking whether a screen looks good and start asking what the screen says first, what it supports, what it hides, and what visual tradeoff it makes.

2. Vocabulary

Composition vocabulary gives learners a way to critique the whole screen. It also helps them review AI-generated UI without being fooled by surface polish.

Focal point

The first meaningful thing the screen asks the eye to notice.

Example: The comparison table, recovery message, hero image, or primary decision.

Visual weight

The perceived heaviness of visual elements.

Example: Large, dark, colorful, dense, or isolated elements feel heavier.

Balance

The way visual weight is distributed across the screen.

Example: An asymmetrical page that still feels stable and intentional.

Rhythm

The pace and path of attention across repeated and changing elements.

Example: A row of cards, a section break, then a primary action.

Noise

Visual elements that compete with the task without adding meaning.

Example: Decorative accents that draw more attention than the decision content.

3. AI critique lab

The AI prompt should make composition critique specific. The learner should use AI to sharpen observation, then decide which visible issue matters most.

Composition prompt lab
I am learning composition for product interface screens.

Screen or rough UI:
[describe the screen or paste a screenshot description]

Please review the composition in practical design language.
Return:
1. Whole-screen read: what the screen communicates before details are read.
2. Focal point: what draws the eye first, and whether that matches the task.
3. Visual weight: which elements feel heavy, light, loud, quiet, or misplaced.
4. Balance: where the screen feels crowded, empty, unstable, or too symmetrical.
5. Rhythm: how the eye moves across sections, cards, media, text, and actions.
6. Density: whether the screen is too crowded, too sparse, or appropriately dense.
7. Noise: decorative or competing elements that weaken the task.
8. AI risk: where a generated UI looks polished but has weak composition.
9. One improvement: the first composition decision I should make and why.

Rules:
- Do not give generic advice like "make it cleaner."
- Connect composition to task, trust, reading, or action.
- Separate visible evidence from taste.
- Mark assumptions clearly.
- Finish with one composition decision sentence.
Check before accepting
  • Does the output describe the whole-screen read?
  • Does it identify the focal point and whether it matches the task?
  • Does it explain visual weight and balance with visible evidence?
  • Does it discuss rhythm, density, and noise?
  • Does it avoid generic polish language?
Reject or revise when
  • The answer says only to make the screen cleaner.
  • The answer praises polish without naming the focal point.
  • The answer ignores visual weight and density.
  • The answer does not connect the critique to task, trust, reading, or action.

4. Studio exercise

The studio output is a composition critique board. It should show whole-screen read, focal point, visual weight, rhythm, density, noise, AI critique notes, and one decision.

Studio output
  • Choose one screen and write the whole-screen read.
  • Mark the focal point and competing focal points.
  • Annotate visual weight, balance, rhythm, density, and noise.
  • Run the AI composition critique prompt.
  • Accept, adapt, and reject AI feedback.
  • Write one composition decision sentence with product reason.

5. References

These references support the tutor. The lesson itself should teach composition through visual annotations, screen comparisons, and prompt-led critique.

Reference spine

Nielsen Norman Group: 5 principles of visual design in UXA compact visual-design reference for scale, hierarchy, balance, contrast, and Gestalt principles.Apple Human Interface Guidelines: layoutProfessional layout guidance for hierarchy, reading order, spacing, alignment, and adaptable interfaces.Material Design: layoutDesign-system guidance for responsive layout structure, margins, columns, gutters, and adaptive composition.Figma Help Center: layout guidesPractical tool guidance for grids and guides that help learners structure composition inside Figma.

References

Nielsen Norman Group: 5 principles of visual design in UX

A compact visual-design reference for scale, hierarchy, balance, contrast, and Gestalt principles.

Apple Human Interface Guidelines: layout

Professional layout guidance for hierarchy, reading order, spacing, alignment, and adaptable interfaces.

Material Design: layout

Design-system guidance for responsive layout structure, margins, columns, gutters, and adaptive composition.

Figma Help Center: layout guides

Practical tool guidance for grids and guides that help learners structure composition inside Figma.

Web examples

Nielsen Norman Group5 principles of visual design in UX

Use this to teach composition through visual weight, balance, hierarchy, grouping, and contrast rather than taste.

Apple DeveloperLayout

Use Apple layout guidance to connect composition with platform structure, reading order, adaptability, and clear hierarchy.

Material DesignLayout overview

Use Material layout to show how composition changes across responsive windows while keeping structure and priority coherent.

Figma Help CenterCreate layout guides

Use Figma layout guides as the hands-on bridge for alignment, columns, and composing screens with intention.

Guided practice

Choose one screen, zoom out before judging details, mark focal point and competing signals, run the composition prompt, accept/adapt/reject AI critique, and write one composition decision sentence.

Artifact: Composition critique board with whole-screen read, focal point, visual weight, rhythm, density, AI critique, and one composition decision
Tutor review questions
  • Can the learner describe the whole-screen read before details?
  • Can the learner identify the focal point and whether it matches the task?
  • Can the learner explain visual weight, balance, rhythm, density, and noise?
  • Can the learner separate evidence-led critique from taste language?
  • Can the learner critique AI-generated UI without being fooled by polish?
  • Can the learner finish with one composition decision tied to task, trust, reading, or action?
AI prompt
I am learning composition for product interface screens.

Screen or rough UI:
[describe the screen or paste a screenshot description]

Please review the composition in practical design language.
Return:
1. Whole-screen read: what the screen communicates before details are read.
2. Focal point: what draws the eye first, and whether that matches the task.
3. Visual weight: which elements feel heavy, light, loud, quiet, or misplaced.
4. Balance: where the screen feels crowded, empty, unstable, or too symmetrical.
5. Rhythm: how the eye moves across sections, cards, media, text, and actions.
6. Density: whether the screen is too crowded, too sparse, or appropriately dense.
7. Noise: decorative or competing elements that weaken the task.
8. AI risk: where a generated UI looks polished but has weak composition.
9. One improvement: the first composition decision I should make and why.

Rules:
- Do not give generic advice like "make it cleaner."
- Connect composition to task, trust, reading, or action.
- Separate visible evidence from taste.
- Mark assumptions clearly.
- Finish with one composition decision sentence.

Home study

Choose two safe product screens or AI-generated UI samples. For each, write the whole-screen read, mark the focal point, visual weight, balance, rhythm, density, noise, AI critique notes, and one composition decision with a product reason.