Web Design and User Experience (UX)Activities & Teaching Strategies
Active learning works for this topic because students must experience the gap between intention and reality in digital design. When students test their own wireframes or audit a peer’s work, they confront cognitive dissonance between what they intended to communicate and what a real user actually understands.
Learning Objectives
- 1Analyze how color theory and typography choices influence user perception and task completion on a given website.
- 2Evaluate the effectiveness of website navigation structures based on established usability heuristics and psychological principles.
- 3Design a functional wireframe for a mobile application that adheres to WCAG 2.1 AA accessibility standards.
- 4Critique the user interface of a popular e-commerce website, identifying areas for improvement in user flow and information architecture.
- 5Synthesize principles of visual hierarchy and Gestalt psychology to create a low-fidelity prototype for a news aggregator website.
Want a complete lesson plan with these objectives? Generate a Mission →
Usability Audit: Navigate a Peer's Wireframe
Students are assigned a different peer's hand-drawn wireframe to navigate, completing a structured task such as finding the contact page or locating pricing information. They annotate what confused them and what worked well, then the class reconvenes to identify patterns in where UX succeeded or failed across the different designs.
Prepare & details
Explain how user interface (UI) design impacts user experience (UX).
Facilitation Tip: For the Usability Audit, remind students to write down every moment of hesitation they feel while navigating the wireframe, not just the final verdict.
Setup: Groups at tables with access to research materials
Materials: Problem scenario document, KWL chart or inquiry framework, Resource library, Solution presentation template
Think-Pair-Share: App Comparison Analysis
Students individually select two competing apps serving the same function , two music streaming services or two food delivery apps , and identify three specific UX differences. Pairs compare observations before the class builds a shared list of UX principles illustrated by concrete examples from apps they actually use.
Prepare & details
Analyze the psychological principles behind effective website navigation.
Facilitation Tip: In the Think-Pair-Share, assign each student a different app so the class collectively sees a wide range of design choices in one discussion.
Setup: Standard classroom seating; students turn to a neighbor
Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs
Accessibility Redesign Challenge
Working in small groups, students receive a screenshot of a real website with documented accessibility issues (contrast ratio, missing alt text, unclear navigation labels). They mark up the screenshot with specific changes that would improve WCAG compliance, then present their recommendations to the class with justifications grounded in accessibility standards.
Prepare & details
Design a wireframe for a website that prioritizes user accessibility.
Facilitation Tip: During the Accessibility Redesign Challenge, provide screen readers and keyboard-only navigation tools so students feel the barriers firsthand.
Setup: Groups at tables with access to research materials
Materials: Problem scenario document, KWL chart or inquiry framework, Resource library, Solution presentation template
Wireframe Sprint with Live Testing
Pairs design a wireframe for a school event registration page, starting with user goals before moving to visual layout. They present their wireframe to a second pair who tries to complete the registration task and reports back on where they succeeded or got stuck, giving designers direct feedback to incorporate.
Prepare & details
Explain how user interface (UI) design impacts user experience (UX).
Facilitation Tip: In the Wireframe Sprint, set a timer for 15 minutes of solo sketching, then 10 minutes of live testing with a partner to prevent over-polishing before feedback.
Setup: Groups at tables with access to research materials
Materials: Problem scenario document, KWL chart or inquiry framework, Resource library, Solution presentation template
Teaching This Topic
Teach this topic by grounding every principle in lived experience. Ask students to recall a frustrating website they used recently, then map that frustration to specific UX failures. Avoid starting with theory—instead, let students articulate problems before naming the principles that explain them. Research shows students retain accessibility standards better when they experience the limitations of a poorly designed interface than when they read guidelines alone.
What to Expect
Students will move from abstract principles to concrete decision-making. By the end of these activities, they will critique interfaces based on user psychology, apply accessibility standards, and revise designs to align visual presentation with functional clarity.
These activities are a starting point. A full mission is the experience.
- Complete facilitation script with teacher dialogue
- Printable student materials, ready for class
- Differentiation strategies for every learner
Watch Out for These Misconceptions
Common MisconceptionDuring Usability Audit, watch for students who focus only on color schemes or fonts instead of asking peers to complete a specific task.
What to Teach Instead
Give students a clear goal like 'Find the contact information' and require them to document each step their peer took, including dead ends and backtracking.
Common MisconceptionDuring Accessibility Redesign Challenge, watch for students who assume accessibility only means adding alt text or captions.
What to Teach Instead
Have them test their redesigns with screen readers or keyboard-only navigation, then list the specific features that improved or worsened the experience.
Assessment Ideas
After Usability Audit, students exchange wireframes and provide feedback using prompts that require them to name a confusing element, suggest a specific change, and explain why it would help.
After Think-Pair-Share, ask students to write down one app they analyzed and describe how its navigation aligned or conflicted with principles of logical grouping and clear labeling from the lesson.
During Wireframe Sprint, circulate and ask students to point to one element in their wireframe that demonstrates information hierarchy and explain how it guides the user’s attention.
Extensions & Scaffolding
- Challenge students to redesign a complex form (like a college application) using progressive disclosure, then test it with a classmate who has never seen it.
- Scaffolding: Provide pre-labeled wireframe templates with placeholder content so students focus on structure rather than blank-page paralysis.
- Deeper exploration: Have students compare the same website’s mobile and desktop versions to analyze how constraints shape UX decisions.
Key Vocabulary
| User Interface (UI) | The visual elements and interactive components of a digital product that a user directly interacts with, such as buttons, menus, and layouts. |
| User Experience (UX) | The overall feeling and satisfaction a user has when interacting with a digital product, encompassing usability, accessibility, and desirability. |
| Wireframe | A basic visual guide representing the skeletal framework of a website or application, focusing on layout, content placement, and functionality without visual design elements. |
| Information Architecture (IA) | The practice of organizing, structuring, and labeling content in an effective and sustainable way to help users find information and complete tasks. |
| Usability Heuristics | A set of general principles for user interface design, often used as a checklist to evaluate the ease of use of a system. |
| WCAG | Web Content Accessibility Guidelines, a set of standards for making web content more accessible to people with disabilities. |
Suggested Methodologies
More in Visual Storytelling and Media Arts
Cinematography and Frame Composition
Analyzing how camera angles, lighting, and framing communicate subtext in film and photography.
2 methodologies
The Art of Persuasion: Graphic Design
Critiquing graphic design and advertising to understand how visual elements manipulate consumer behavior.
2 methodologies
Interactive and New Media
Exploring how video games, VR, and interactive installations create new forms of artistic engagement.
2 methodologies
Narrative Structure in Film
Analyzing different storytelling structures in cinema, including linear, non-linear, and episodic narratives.
2 methodologies
Editing for Impact
Exploring the principles of film and video editing, focusing on pacing, rhythm, and emotional manipulation.
2 methodologies
Ready to teach Web Design and User Experience (UX)?
Generate a full mission with everything you need
Generate a Mission