Computer Science · 11th Grade · Capstone Software Development · Weeks 28-36

User Interface (UI) Prototyping

Creating wireframes and mockups to visualize the software's interface.

• Common Core State Standards
• CSTA: 3B-AP-19
• CSTA: 3B-AP-21

About This Topic

Prototyping transforms design ideas from mental concepts into testable artifacts that other people can respond to. In 11th-grade capstone projects, students learn that the purpose of a prototype is not to build a finished product but to answer a specific question cheaply before committing to full development. CSTA standards 3B-AP-19 and 3B-AP-21 ask students to design and refine interfaces through iterative feedback cycles, which requires understanding what kind of prototype is appropriate at each stage.

The fidelity spectrum matters here. Low-fidelity prototypes like paper sketches and wireframes test navigation structure and content hierarchy without the distraction of color or visual polish. Mid-fidelity mockups add visual design. High-fidelity interactive prototypes built in tools like Figma closely simulate the final product and are used for usability testing. Students who understand this spectrum build better products because they fail earlier and cheaper than those who build fully coded features before testing user response.

Active learning is central to effective prototyping education because the core skill is iteration in response to feedback. Critique sessions, rapid design sprints, and structured peer feedback protocols give students practice presenting work in progress and incorporating external perspectives before they are emotionally invested in a final design.

Key Questions

1. Design low-fidelity and high-fidelity prototypes for a software application.
2. Differentiate between wireframes, mockups, and interactive prototypes.
3. Evaluate the effectiveness of different prototyping tools and techniques.

Learning Objectives

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

Before You Start

Introduction to Software Development Concepts

Why: Students need a foundational understanding of what software is and its basic components before designing its interface.

Basic Design Principles

Why: Understanding concepts like layout, hierarchy, and visual balance is crucial for creating effective wireframes and mockups.

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.

Watch Out for These Misconceptions

Common Misconception

A prototype needs to look close to finished before you can get useful feedback.

What to Teach Instead

Paper prototypes and rough wireframes often produce better design insights than polished mockups because users respond to the structure rather than reacting to visual aesthetics. Students who run tests with rough sketches are consistently surprised by how much useful feedback they get.

Common Misconception

Prototyping is only necessary for complex professional projects.

What to Teach Instead

Even simple school projects benefit from prototyping because it surfaces structural mismatches between what the developer imagines and what users need. Running a single two-minute paper prototype test consistently reveals issues that were invisible during planning.

Common Misconception

Once you build a high-fidelity prototype, major design changes are too costly to make.

What to Teach Instead

Sunk cost thinking in design leads to shipping known problems. Figma and similar tools are specifically designed for rapid iteration; changing a high-fidelity prototype is far cheaper than changing a coded application. Students who encounter this in class are less likely to carry bad design decisions into implementation.

Active Learning Ideas

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.

35 min·Small Groups

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.

50 min·Pairs

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.

25 min·Small Groups

Real-World Connections

• UX designers at Google use Figma to create interactive prototypes for new features in Android apps, allowing product managers to test user flows before coding begins.
• Game developers at Blizzard Entertainment sketch paper wireframes to map out player navigation and menu structures for new game titles, ensuring intuitive gameplay.
• Web designers at Airbnb build high-fidelity mockups in tools like Sketch to present visual design concepts to stakeholders, refining the aesthetic and branding of their website.

Assessment Ideas

Quick Check

Present students with three images: a paper sketch, a grayscale digital layout, and a fully designed interactive screen. Ask them to label each as a wireframe, mockup, or interactive prototype and briefly explain why.

Peer Assessment

Students share their low-fidelity wireframes. In pairs, they discuss: '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

Ask students to write down one UI prototyping tool they learned about today. Then, have them list one specific scenario where a low-fidelity prototype would be more appropriate than a high-fidelity one.

Frequently Asked Questions

What is the difference between a wireframe, a mockup, and a prototype?

A wireframe is a low-fidelity sketch showing layout and navigation without visual design. A mockup adds visual detail like colors, fonts, and imagery but is static. A prototype is interactive, allowing users to simulate navigating the product. Each answers different design questions at different cost levels.

What prototyping tools do professional UX designers use?

Figma is the dominant professional tool for UI/UX prototyping, supporting wireframes through high-fidelity interactive prototypes with built-in collaboration. Other common tools include Adobe XD, Sketch (Mac only), and InVision. For paper prototyping, physical sketching remains valuable for early-stage ideation.

How many iterations should a prototype go through before development starts?

There is no fixed number; the goal is to iterate until critical design questions are answered and no new significant usability issues surface in testing. In professional practice, two to three rounds of testing that each address a specific question typically resolve the major structural design risks.

How does active learning help students build prototyping skills?

Prototyping is a craft skill that develops through practice and feedback, not through reading about it. Rapid design sprints with immediate user tests, structured critique sessions, and peer evaluation exercises give students the iterative practice loop that builds design intuition faster than any lecture-based approach.