Prototype: Creating low/high-fidelity designs
Now that you’ve brainstormed design ideas, it’s time to bring those ideas to life with prototypes — visual, clickable versions of your product that users and stakeholders can interact with.
What is a Prototype in UX Design?
A prototype is a simulation or model of your final product, used to test design ideas, gather feedback, and communicate functionality. It can be very simple or very detailed.
Types of Prototypes
| Type | Description | Purpose |
|---|---|---|
| Low-Fidelity | Rough, simple sketches or wireframes with minimal detail | Early validation, quick feedback |
| High-Fidelity | Pixel-perfect, interactive designs with UI elements and real data | Usability testing, stakeholder demos |
Low-Fidelity Prototypes
What They Include:
- Black-and-white wireframes
- Basic layout blocks (text, images, buttons)
- Minimal or no interactivity
- No branding or colors
Tools:
- Figma (frames + shapes)
- Balsamiq (very sketch-like wireframes)
- Paper + pen (still valid for brainstorming!)
When to Use:
- Early in the process
- When validating layout or feature ideas
- To test basic navigation flow
Example:
A wireframe for a signup page showing:
- Logo placeholder
- “Name”, “Email” input fields
- “Sign Up” button
High-Fidelity Prototypes
What They Include:
- Full UI design (colors, fonts, icons)
- Real or realistic content
- Clickable buttons and page transitions
- Animations or hover effects
Tools:
- Figma (Prototype tab)
- Adobe XD
- Sketch + InVision
When to Use:
- After wireframes are approved
- Before handoff to developers
- During stakeholder or usability testing
Example:
A fully designed mobile app screen with:
- Branded colors
- Interactive navigation bar
- Functioning modals (e.g., popups)
How to Create a Prototype in Figma (Step-by-Step)
1. Create Your Screens
- Use frames (e.g., Desktop, iPhone 13) for each screen
- Add your wireframes (for low-fidelity) or full UI elements (for high-fidelity)
2. Switch to the “Prototype” Tab
- Click on a button or element
- Drag the blue circle to the next frame
- Choose interaction type (e.g., On Click → Navigate To)
3. Add Interactions
- Transitions: Slide in, fade, instant
- Hover effects (for high-fidelity)
- Back buttons or close modals
4. Preview
- Click the “Present” button (top right) to test your clickable prototype
Benefits of Prototyping
- Let’s users interact with your design
- Makes feedback more actionable
- Helps you catch usability issues early
- Builds clarity for developers
Deliverables from the Prototype Stage
| Deliverable | Description |
|---|---|
| Low-Fidelity Prototype | Basic wireframes linked together to test layout and flow |
| High-Fidelity Prototype | Fully styled, interactive mockup to simulate real user experience |
| Interaction Map | (Optional) A diagram showing which screens link to each other |
Example Use Case: Course Booking App
Problem Statement:
Users want a fast and easy way to book and pay for online classes.
Prototype Plan:
| Fidelity | Screens Created | Interactions |
|---|---|---|
| Low-Fidelity | Home → Courses List → Booking Page | Click “Book Now” → Booking Page → Thank You |
| High-Fidelity | Same screens, but with color, buttons, form fields | Hover effects, transitions, error messages |
NEXT LESSON – Test: Gathering feedback and iterating
