Lesson Plan
Pop Quiz: Design Essentials
Assess adult learners’ baseline understanding of contrast, hierarchy, alignment, repetition, and proximity through a quick 10-minute formative quiz with multiple-choice and short-answer questions.
Identifying learners’ prior knowledge helps tailor the workshop, ensuring key design principles are neither under- nor over-taught.
Audience
Adult Learners
Time
10 minutes
Approach
10-minute pop quiz warm-up
Materials
Prep
Prepare Quiz Materials
5 minutes
- Print or project the Pop Quiz: Design Essentials for each learner or group.
- Ensure learners have pens or devices for responses.
- Familiarize yourself with the questions and answers to facilitate quick review.
Step 1
Administer Quiz
10 minutes
- Distribute or display the Pop Quiz: Design Essentials.
- Instruct learners to complete all questions independently.
- Emphasize a 10-minute time limit.
Questions:
- Multiple Choice: Which principle is primarily about the visual importance of elements on a page?
a) Repetition
b) Contrast
c) Hierarchy
d) Proximity - Multiple Choice: Two similar design elements placed close together demonstrate which principle?
a) Alignment
b) Proximity
c) Contrast
d) Repetition - Multiple Choice: Using the same font family throughout a design is an example of:
a) Contrast
b) Alignment
c) Repetition
d) Hierarchy - Multiple Choice: Which principle is at play when bold text stands out against lighter text?
a) Proximity
b) Hierarchy
c) Contrast
d) Alignment - Multiple Choice: Lining up text and images along a common edge illustrates:
a) Alignment
b) Repetition
c) Contrast
d) Hierarchy - Short Answer: In 1–2 sentences, explain how contrast affects readability in a layout.
- Short Answer: Describe a real-world example where visual hierarchy guides your attention.
- Collect responses for quick review.
Slide Deck
Principles That Pop
In this session, we’ll explore the five core principles of graphic design:
• Contrast
• Hierarchy
• Alignment
• Repetition
• Proximity
Learn how each principle helps your designs stand out and communicate effectively.
Welcome everyone! Introduce the session: we’ll uncover what makes designs grab attention by exploring five core graphic design principles. Mention that these concepts will guide today’s hands-on activities.
Contrast
Definition:
• The difference in color, tone, size, or weight between elements to create visual interest and emphasis.
Key Tip:
• Use high contrast between text and background to improve readability and direct attention.
Example:
• Dark text on a light background, or a bright accent color against muted tones.
Explain that contrast is about differences—color, size, weight—that help important elements stand out. Show examples on screen if available.
Hierarchy
Definition:
• The arrangement of elements in order of importance, steering the viewer’s eye through the content.
Key Tip:
• Vary font sizes, weights, and positions to establish a clear reading order.
Example:
• A large, bold headline at top followed by smaller body text and subheads.
Talk through how visual hierarchy guides the viewer’s eye. Point out how designers use size and placement to suggest importance.
Alignment
Definition:
• The lining up of elements along shared edges or axes to create cohesion and structure.
Key Tip:
• Use consistent left, center, or right alignment to anchor your design and improve flow.
Example:
• Left-aligned text blocks and images sharing a common margin.
Emphasize alignment’s role in creating polished, organized layouts. If possible, overlay a grid to illustrate.
Repetition
Definition:
• The repeated use of colors, shapes, fonts, or other design elements to create unity and consistency.
Key Tip:
• Choose 1–2 key elements (e.g., a color or icon style) and repeat them throughout your design.
Example:
• Consistent button shapes and colors across multiple pages.
Describe how repetition builds brand consistency and rhythm. Show branded materials if available.
Proximity
Definition:
• The placement of related elements close together to create a clear relationship and improve readability.
Key Tip:
• Group headings with their corresponding text or images; add space between unrelated groups.
Example:
• Contact information items (address, phone, email) arranged in one clustered block.
Explain how proximity groups related content and declutters a layout.
Recap & Next Steps
We’ve covered:
• Contrast • Hierarchy • Alignment • Repetition • Proximity
Now, put these principles into practice with the
Contrast and Hierarchy Detective worksheet.
Summarize the five principles and transition to the hands-on activity. Distribute the worksheet and encourage learners to apply what they’ve learned.
Worksheet
Contrast and Hierarchy Detective
Part 1: Detective Work
Examine each sample layout description below. Identify which principle is being applied (Contrast and/or Hierarchy), then explain how it guides the viewer’s eye.
Layout A
• A clean newsletter header: a large, bold title in dark blue sits above body text in smaller, light gray font on a white background.
Principle(s): ________________________________
Explanation: ________________________________________________________________
Layout B
• A webpage banner shows a brightly colored call-to-action button (“Sign Up”) beside a muted headline; the headline is centered, the button sits at the bottom right.
Principle(s): ________________________________
Explanation: ________________________________________________________________
Layout C
• A poster lists event details: the date is oversized at top, the location is medium sized below, and the description is small text at the bottom—all left-aligned.
Principle(s): ________________________________
Explanation: ________________________________________________________________
Part 2: Design Remix Challenge
Below is a simplified flyer layout that needs stronger contrast and hierarchy. Review the description, then answer the prompts.
Original Flyer Description:
• Background: pale yellow
• Headline: small black text, centered at top
• Body copy: same size black text below headline
• Button: light gray box with “Learn More” in white, centered at bottom
- List two specific design changes you would make to improve contrast and/or hierarchy (e.g., color change, size adjustment, weight change, placement).
a) ____________________________________________________________
b) ____________________________________________________________ - Sketch or describe your revised layout below (consider font sizes, colors, positioning).
__________________________________________________________________________
Use what you’ve learned about contrast and hierarchy to make this flyer truly pop!
Activity
Design Remix Challenge
Objective: In small groups, apply contrast, hierarchy, alignment, repetition, and proximity to redesign a provided layout and explain how your changes make the design more effective.
Audience: Adult Learners
Time: 15 minutes
Materials:
- Principles That Pop slide deck (for reference)
- Contrast and Hierarchy Detective worksheet (sample layouts)
- Sketch paper, pens, or digital design tools
Prep (5 minutes)
- Print or project the Original Layout Description below for each group.
- Provide sketch paper, markers, or access to a simple digital design tool.
Original Layout Description:
• Background: pale yellow
• Headline: small black text, centered at top
• Body copy: same size black text below headline
• Button: light gray box with “Learn More” in white, centered at bottom
Instructions
1. Form Groups (2 minutes)
- Organize into teams of 3–4 learners.
2. Remix the Layout (8 minutes)
- Review the Original Layout Description.
- Use contrast, hierarchy, alignment, repetition, and/or proximity to improve visual interest and guide the viewer’s eye.
- Sketch or mock up your redesigned flyer, noting any color, size, weight, or placement adjustments.
3. Prepare Your Rationale (2 minutes)
- Identify 2–3 key design changes.
- For each change, specify which principle(s) you applied and how it strengthens the design.
4. Share & Discuss (3 minutes)
- Each group presents for 1 minute: show your mock-up and explain your principle-based adjustments.
- Classmates ask one clarifying question or offer a quick suggestion.
Use this challenge to flex your creative muscles and see how small tweaks in contrast and hierarchy can make a big difference in grabbing attention!
Discussion
Before & After Breakdown Discussion
Objective: Reflect on how applying design principles transforms a layout’s effectiveness by comparing original and redesigned versions.
Audience: Adult Learners
Time: 10 minutes
Materials:
- Group mock-ups from the Design Remix Challenge
- Notes from the Contrast and Hierarchy Detective
Discussion Guidelines
- Arrange chairs or digital pods so every group can easily show their before/after sketches.
- Each group will have 1 minute to present: show their Original Layout and Redesigned Version, then highlight key changes.
- After each presentation, the class will respond to one or more of the prompts below.
- Aim for constructive, principle-based feedback—focus on why a change improves the design, not just what changed.
Prompts for Reflection
- Contrast & Emphasis
- How did the redesign strengthen contrast to guide the viewer’s eye?
- What specific color, size, or weight adjustments made the biggest impact?
Response: ______________________________________________________
- Visual Hierarchy
- In what ways did your group re-order information to establish a clear reading flow?
- Which element now appears most important—and why?
Response: ______________________________________________________
- Alignment & Organization
- Describe how alignment choices in the redesign create a more polished layout.
- Did moving or aligning elements change the overall balance? How?
Response: ______________________________________________________
- Repetition & Consistency
- What repeating elements (fonts, colors, shapes) did you introduce or reinforce?
- How do these repeats build unity across the design?
Response: ______________________________________________________
- Proximity & Grouping
- Which related items did you group more closely together?
- How did spacing between groups help clarify relationships?
Response: ______________________________________________________
Wrap-Up Questions
- Of all the changes you saw, which single tweak would you recommend to every designer?
Response: ______________________________________________________ - How might these principles apply to a layout you use in your own work (e.g., presentations, social media posts, reports)?
Response: ______________________________________________________
Closing: Summarize key takeaways and encourage learners to apply these insights in their next design project.