Wireframing and Prototyping

Wireframing and prototyping are core activities in UX design. They allow designers to explore ideas, communicate concepts, and test solutions before committing to full development. Together, they bridge the gap between abstract ideas and tangible products.

---

Why Wireframe and Prototype?

Building a product without wireframes and prototypes is like constructing a building without blueprints:

• Explore ideas quickly — test multiple approaches before investing in code
• Communicate clearly — show stakeholders and developers what you mean
• Identify problems early — catch usability issues before they become expensive
• Align the team — create a shared understanding of the product vision
• Gather feedback — give users something tangible to react to

---

Wireframes

A wireframe is a low-fidelity visual representation of a page or screen layout. It focuses on structure, content placement, and functionality — not visual design.

What Wireframes Include

Included	Excluded
Layout and page structure	Final colours and branding
Content hierarchy and placement	Actual images and photography
Navigation elements	Detailed typography choices
Key interactive elements (buttons, forms)	Animations and transitions
Annotations explaining behaviour	Production-ready specifications

Types of Wireframes

Type	Description	Tools	Time
Sketch wireframes	Hand-drawn on paper or whiteboard	Pen, paper, markers	Minutes
Low-fidelity digital	Basic digital layout with placeholders	Balsamiq, Whimsical, Excalidraw	30-60 minutes per screen
Mid-fidelity digital	More detailed layout with real labels and spacing	Figma, Sketch, Adobe XD	1-2 hours per screen

Wireframe Best Practices

• Use greyscale — avoid colour so reviewers focus on layout, not aesthetics
• Include real content where possible (avoid "Lorem Ipsum" for key text)
• Annotate interactions: "On click, this opens a modal"
• Show all key states: default, hover, active, error, empty, loading
• Number and label screens for easy reference

---

Prototypes

A prototype is an interactive simulation of the product. It lets users click, tap, and navigate through screens to experience the flow.

Fidelity Spectrum

Fidelity	Detail Level	Interaction Level	Best For
Low (paper)	Sketched screens	Facilitator acts as "the computer"	Early concept testing
Medium (clickable wireframes)	Digital wireframes with links	Basic click-through navigation	Flow validation
High (realistic mockup)	Pixel-perfect screens with real content	Transitions, microinteractions	Stakeholder demos, usability testing
Code prototype	Built with HTML/CSS/JS or framework	Fully functional behaviour	Complex interaction testing

Prototyping Tools Comparison

Tool	Strengths	Best For
Figma	Collaborative, browser-based, powerful prototyping	Most UX teams, all fidelity levels
Sketch + InVision	Established design tool with prototyping overlay	macOS-based teams
Adobe XD	Integrated design and prototyping	Adobe ecosystem users
Framer	Advanced interactions and code components	High-fidelity interactive prototypes
Axure	Logic, conditions, variables, complex interactions	Enterprise and complex flows
Balsamiq	Deliberately low-fidelity, sketch-like	Quick wireframing and early concepts
Whimsical	Simple wireframes, flowcharts, mind maps	Rapid ideation and diagramming

---

Paper Prototyping