Brief Explain: 3 types of wireframes & When to use them

A wireframe is a blueprint for your website or digital product

There are 3 main types:

1️⃣ Low-fidelity
2️⃣ Mid-fidelity
3️⃣ High-fidelity

So when should you use these?

1️⃣ Low-fidelity

Block diagrams provide only the most basic but essential information about a wireframe:

→ The layout
→ Types of content or functionality

2️⃣ Mid-fidelity

The grey boxes wireframes allow you to use grayscale colours to emphasise the layout:

→ No need to choose a colour palette
→ No need to spend time on real copy

3️⃣ High-fidelity

A higher-fidelity detail of the product:

→ Should be understood with little or no explanation
→ Facilitates moving on to the next design phase

🔸 Bonus: Wireflows

Wireflows = Wireframes + Flowcharts

Wireframe-style page layout designs with a simplified flowchart-like way of representing interactions.

Want to learn more about wireframes?

Deep dive into this framework with https://uxplaybook.org/userexperience

✅ Clear steps to improve your UX process
✅ Ready-to-use templates
✅ Solutions that can be applied to UX projects