User Interface (UI) Prototyping

Active learning works for UI prototyping because students must experience the gap between their mental model and the user’s response. When they test a paper sketch or wireframe, they see immediately how users interpret their design choices, which builds empathy and sharpens their ability to ask the right design questions early.

• 11th Grade
• Computer Science
• 3 activities
• 25 min–50 min

Learning Objectives

1. Design low-fidelity wireframes for a given software application, specifying layout and content hierarchy.
2. Create high-fidelity mockups that include visual design elements and user interaction flows for a software application.
3. Compare and contrast the use cases for wireframes, mockups, and interactive prototypes in the software development lifecycle.
4. Evaluate the strengths and weaknesses of at least two different UI prototyping tools based on project needs.
5. Critique a peer's UI prototype, providing specific, actionable feedback on usability and design.

Ready-to-Use Activities

Project-Based Learning

⏱ 35 min·Small Groups

Paper Prototype Sprint

Groups have 15 minutes to sketch a complete low-fidelity paper prototype for a simple app concept (provided by the teacher). They then run a two-minute user test with a classmate who was not involved in the sketching. Groups revise based on what they observed and present their before and after sketches.

Prepare & details

Design low-fidelity and high-fidelity prototypes for a software application.

Facilitation Tip: During the Paper Prototype Sprint, insist students use only black markers and plain paper; this removes visual distractions so peers focus entirely on layout and flow.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

Project-Based Learning

⏱ 50 min·Pairs

Figma Wireframe Workshop

Students create a wireframe for their capstone project's main user flow using Figma. Pairs swap laptops and attempt to complete a specific task using only the wireframe. The observer notes every moment of confusion without giving hints, and designers get a prioritized list of structural issues to fix.

Prepare & details

Differentiate between wireframes, mockups, and interactive prototypes.

Facilitation Tip: In the Figma Wireframe Workshop, demonstrate the ‘present mode’ feature so students can simulate user interactions without coding.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

Project-Based Learning

⏱ 25 min·Small Groups

Prototype Fidelity Gallery: Same App, Three Ways

Post three versions of the same app concept at different fidelity levels: a hand sketch, a digital wireframe, and a high-fidelity Figma mockup. Groups identify what questions each version can and cannot answer for a designer, then present their analysis to establish a shared vocabulary for discussing prototyping choices.

Prepare & details

Evaluate the effectiveness of different prototyping tools and techniques.

Facilitation Tip: For the Fidelity Gallery, assign each group a 3-minute rotation to prevent over-explaining and keep the focus on comparing structure, not aesthetics.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

Teaching This Topic

Teachers approach this topic by framing prototyping as a conversation, not a deliverable. Students learn to treat each prototype as a script for a usability test, where the audience’s confusion or delight becomes the data. Avoid letting students spend time on visual polish in early rounds; research shows aesthetics bias feedback toward surface-level comments rather than structural issues.

What to Expect

Successful learning looks like students confidently selecting the right prototype fidelity for their question, running quick tests, and using feedback to refine their interface without over-investing in polished details. They should articulate why a rough prototype was more effective than a high-fidelity one during the Fidelity Gallery activity.

Watch Out for These Misconceptions

Common Misconception

During the Paper Prototype Sprint, watch for students hesitating to test rough sketches because they believe prototypes need to look finished.

What to Teach Instead

Remind students that the goal is to test the layout and flow, not the drawing quality. Encourage them to label buttons with text and use arrows to simulate interactions so peers can focus on the design logic.

Common Misconception

During the Figma Wireframe Workshop, watch for students assuming they must create a high-fidelity mockup before gathering feedback.

What to Teach Instead

Pause the class to demonstrate how a low-fidelity wireframe in Figma can be tested just like a paper prototype. Ask students to hide the color palette and focus on structure only.

Common Misconception

During the Fidelity Gallery, watch for students believing that the most visually polished prototype must be the best design.

What to Teach Instead

Prompt students to compare prototypes side-by-side and ask which one revealed the most user pain points. Use this moment to reinforce that clarity beats polish in early testing.

Assessment Ideas

Quick Check

After the Fidelity Gallery activity, show three images on the board: a paper sketch, a grayscale digital layout, and a fully designed interactive screen. Ask students to label each as a wireframe, mockup, or interactive prototype and explain their choices in one sentence.

Peer Assessment

During the Figma Wireframe Workshop, have students share their low-fidelity wireframes in pairs. Each pair discusses two prompts: 'Does the layout clearly communicate the purpose of this screen?' and 'What is one change that would improve the navigation?' Each student records one piece of feedback to incorporate.

Exit Ticket

After the Paper Prototype Sprint, ask students to write down one UI prototyping tool they used today. Then, have them list one specific scenario where a low-fidelity prototype would be more appropriate than a high-fidelity one, using a concrete example from their project.

Extensions & Scaffolding

• Challenge: Ask students to redesign their prototype based on the most surprising feedback from the Fidelity Gallery and document the changes in a reflection paragraph.
• Scaffolding: For students struggling with Figma’s tools, provide a 5-minute video walkthrough of creating a basic wireframe and share keyboard shortcuts to speed up their workflow.
• Deeper exploration: Invite students to research A/B testing methods and propose how they could apply one to their capstone project prototype.

Key Vocabulary

Wireframe	A basic visual guide representing the skeletal framework of a user interface, focusing on layout, content placement, and functionality without visual design elements.
Mockup	A static, high-fidelity visual representation of a user interface that includes color, typography, and imagery to convey the look and feel of the final product.
Prototype	An interactive simulation of a user interface that allows users to click through screens and experience the application's flow, used for usability testing.
Fidelity	Refers to the level of detail and interactivity in a prototype, ranging from low-fidelity (basic structure) to high-fidelity (detailed visual design and interaction).
User Interface (UI)	The visual elements and interactive components through which a user engages with a software application or website.