Key deliverables (wireframes, prototypes, user flows)
Let’s break down the key deliverables in UI/UX design — these are the tangible outputs created during the design process to communicate ideas, gather feedback, and guide development.
These key deliverables include:
1. Wireframes
What is a Wireframe?
A wireframe is a basic, low-fidelity layout that shows the structure of a screen or page without detailed visuals.
Think of it like a blueprint of a house — it shows where everything goes, but not how it looks in color or style.
Purpose:
- Define layout, structure, and functionality
- Focus on content placement, navigation, and interactions
- Quickly validate ideas before investing time in visual design
Types:
- Low-fidelity wireframes: Rough, grayscale sketches (using boxes and lines) — fast and useful for early brainstorming
- High-fidelity wireframes: More polished, can include basic UI elements, but still without branding or colors
Tools to Create Wireframes:
- Figma
- Balsamiq (for low-fidelity)
- Adobe XD
- Pen and paper (yes, this works!)
Example Use:
Designing a landing page layout with header, call-to-action, features, and footer — all blocked out as rectangles with placeholder text.
2. User Flows
What is a User Flow?
A user flow is a diagram or map that shows the steps a user takes to complete a task within a product.
It answers:
“What are the key pages/screens a user visits to reach a goal?”
Purpose:
- Visualize the path a user follows
- Help teams understand logic and navigation
- Prevent dead ends and confusion in UX
- Communicate the entire journey from start to finish
Tools to Create User Flows:
- FigJam (Figma’s whiteboard tool)
- Lucidchart
- Whimsical
- Miro
Example Use:
For an e-commerce app, a user flow might show:
Home Page → Product Page → Add to Cart → Checkout → Payment → Confirmation
Each step can include decision points, like:
- “Do they have an account?” → Yes: Login / No: Sign up
3. Prototypes
What is a Prototype?
A prototype is a clickable simulation of your design that looks and feels like a real product — but it’s not functional (no backend).
It brings together the visuals, interactions, and navigation so stakeholders and users can test it.
Purpose:
- Mimic how users will interact with the final product
- Identify problems before development
- Present ideas to clients/stakeholders
- Use in usability testing
Types of Prototypes:
- Low-fidelity prototypes: Simple click-through demos using wireframes (basic navigation, no animation)
- High-fidelity prototypes: Detailed and interactive, look close to the final product, may include micro-interactions
Tools to Create Prototypes:
- Figma (very beginner-friendly)
- Adobe XD
- InVision
- Marvel App
Example Use:
Prototype of a signup form:
- User can click “Create Account”
- See validation messages
- Navigate to dashboard after signup
Summary Table
| Deliverable | Description | Purpose | Fidelity Level |
|---|---|---|---|
| Wireframe | Basic layout showing content structure | Layout planning, early feedback | Low to Mid |
| User Flow | Step-by-step diagram of user journey | Understand logic & interactions | High-level |
| Prototype | Interactive simulation of the design | Usability testing, stakeholder demos | Low to High |
Why These Deliverables Matter
They:
- Help you plan before building
- Ensure the product is user-friendly
- Allow teams to collaborate better
- Save time and money by catching issues early
NEXT LESSON – LESSON 2. Design Thinking & UX Process
