Visual & Performing Arts · 9th Grade

Active learning ideas

Interactive Media and Web Design Basics

Active learning works for interactive media and web design because students need to experience design decisions firsthand to grasp their impact. Ninth graders learn best when they test, iterate, and reflect on real design scenarios, not just memorize principles. These activities make abstract concepts like visual hierarchy and navigation logic tangible through hands-on tasks.

• Common Core State Standards
• NCAS: Creating MA.Cr1.1.HSProf
• NCAS: Producing MA.Pr5.1.HSProf

• 20–50 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Problem-Based Learning
• 20 min · Small Groups

Usability Test: The 5-Second Rule

Show students a screenshot of an unfamiliar website for exactly five seconds, then ask them to write: what the site is for, what they should do first, and what drew their eye. Groups compare answers to identify which design elements created clear hierarchy -- or failed to. The debrief introduces visual hierarchy, contrast, and call-to-action placement as concrete design tools.

How does effective UI/UX design enhance user engagement and accessibility?

Facilitation Tip

For the 5-Second Rule usability test, deliberately create a site with poor navigation so students feel the frustration of unclear design choices firsthand.

What to look for

Provide students with a screenshot of a popular app's main screen. Ask them to write two sentences identifying one UI element and one UX consideration evident in the design, and one sentence explaining how they contribute to the user's interaction.

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

Activity 02

• Think-Pair-Share
• 25 min · Pairs

Think-Pair-Share: Static vs. Interactive Design

Provide students with a printed poster and a screenshot of an app home screen covering the same topic. In pairs, students identify three design decisions that differ specifically because one is static and one requires tapping, navigation, and loading states. Partners present their most interesting finding before a class synthesis on what interactivity demands from a designer.

Compare the design principles for static images versus interactive web elements.

Facilitation Tip

During the Think-Pair-Share activity, provide concrete examples of static and interactive designs (like a poster vs. a social media app) to ground the discussion.

What to look for

Students will exchange their basic wireframe sketches. Instruct them to provide feedback using these prompts: 'Is the navigation clear? (Yes/No, explain why)', 'Is the purpose of each section obvious? (Yes/No, explain why)', and 'Suggest one change to improve usability.'

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

Activity 03

• Problem-Based Learning
• 50 min · Individual

Studio Challenge: Wireframe Design

Students wireframe a 3-screen app for a school-relevant purpose (a lunch menu browser, a library reservation system, a homework tracker). They must show navigation between screens and annotate three specific design decisions with UX reasoning, explaining why a given element is placed where it is based on user needs rather than personal preference.

Construct a basic wireframe for a website or app, justifying your layout and navigation choices.

Facilitation Tip

For the Wireframe Design studio challenge, limit tools to paper and markers to force focus on layout and hierarchy before visual polish distracts.

What to look for

Present students with two different website homepage designs for the same hypothetical product. Ask them to select the design they believe offers a better user experience and write 2-3 sentences justifying their choice, referencing visual hierarchy or navigation logic.

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

Activity 04

• Gallery Walk
• 30 min · Small Groups

Gallery Walk: Accessibility Audit

Post printouts of eight different website home pages with varying levels of visual accessibility (low contrast, unclear navigation, text-heavy layouts, hidden CTAs). Students circulate and mark each with color-coded sticky dots for usability strengths and weaknesses, using a short checklist of accessibility principles. Debrief identifies which design choices consistently create barriers for users.

How does effective UI/UX design enhance user engagement and accessibility?

Facilitation Tip

In the Accessibility Audit gallery walk, provide a checklist with specific criteria like color contrast and alt-text placement to guide students’ observations.

What to look for

Provide students with a screenshot of a popular app's main screen. Ask them to write two sentences identifying one UI element and one UX consideration evident in the design, and one sentence explaining how they contribute to the user's interaction.

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

A few notes on teaching this unit

Experienced teachers approach this topic by balancing theory with rapid, low-stakes practice. Avoid starting with lectures on principles; instead, let students discover them through failure and iteration. Research shows that usability testing, even with simple tasks, builds empathy and improves design judgment faster than abstract explanations. Model your own design process by thinking aloud as you sketch wireframes or evaluate sites.

Successful learning looks like students confidently explaining how design choices affect user behavior and revising their work based on feedback. They should articulate the difference between UI and UX, identify accessibility barriers, and defend their wireframe designs with clear reasoning. Collaboration and peer feedback become natural parts of their process.

---

Watch Out for These Misconceptions

• During the Usability Test: The 5-Second Rule, students may assume that a site’s visual appeal determines its success.

  During the 5-Second Rule activity, use a deliberately cluttered or confusing site with strong visuals. After the test, debrief by asking students to reflect on whether they could complete the task, even if the site looked attractive. Connect their frustration to the importance of usability over aesthetics.

• During the Think-Pair-Share: Static vs. Interactive Design, students may conflate interactivity with visual complexity.

  During the Think-Pair-Share activity, provide two versions of the same content: one static (like a print flyer) and one interactive (like a mobile app). Have students list differences in how they navigate and process information, emphasizing that interactivity is about function, not just visuals.

• During the Studio Challenge: Wireframe Design, students may treat wireframing as a purely visual task.

  During the Wireframe Design challenge, require students to annotate their sketches with notes like 'users will click here to buy' or 'this section must be readable in grayscale.' Use their annotations to assess whether they’re prioritizing user needs over visual appeal.

---

Methods used in this brief

• Problem-Based Learning
• Think-Pair-Share
• Gallery Walk