Visual & Performing Arts · 12th Grade

Active learning ideas

Web Design and User Experience (UX)

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.

• Common Core State Standards
• NCAS: Creating MA.Cr3.1.HSAdv
• NCAS: Producing MA.Pr6.1.HSAdv

• 30–60 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Problem-Based Learning
• 35 min · Pairs

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.

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.

What to look for

Students exchange their wireframes for a specific website task. Each student provides feedback using these prompts: 'What was easy to understand about this layout? What part of the task was confusing? Suggest one specific change to improve clarity.'

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management
• Relationship Skills

Activity 02

• Think-Pair-Share
• 30 min · Pairs

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.

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.

What to look for

Ask students to write down two specific UI elements on a website they used today and explain how their design contributed to a positive or negative UX. Then, have them list one principle from the lesson that could improve that element.

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Activity 03

• Problem-Based Learning
• 45 min · Small Groups

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.

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.

What to look for

Present students with three different website navigation menus. Ask them to identify which menu best follows principles of clear labeling and logical grouping, and to explain their reasoning in one to two sentences.

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management
• Relationship Skills

Activity 04

• Problem-Based Learning
• 60 min · Pairs

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.

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.

What to look for

Students exchange their wireframes for a specific website task. Each student provides feedback using these prompts: 'What was easy to understand about this layout? What part of the task was confusing? Suggest one specific change to improve clarity.'

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management
• Relationship Skills

A few notes on teaching this unit

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.

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.

---

Watch Out for These Misconceptions

• During Usability Audit, watch for students who focus only on color schemes or fonts instead of asking peers to complete a specific task.

  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.

• During Accessibility Redesign Challenge, watch for students who assume accessibility only means adding alt text or captions.

  Have them test their redesigns with screen readers or keyboard-only navigation, then list the specific features that improved or worsened the experience.

---

Methods used in this brief

• Problem-Based Learning
• Think-Pair-Share