Bring your app to life with a User Flow and Wireframe!
Updated: Jan 28
📚 First of all, a quick definition for the uninitiated:
A user flow is a series of steps a user takes to achieve a meaningful goal.
🖥 What role do wireframes have?
Wireframes are an important step in design. My use of wireframes also stretches to cover: low-fi mockups and hi fi mockups. The purpose of a wireframe is to define the user flow, information architecture, UI/UX and overall concept.
1. Faster iterations Wireframes give designers—and non-designers—a way to iterate faster through ideas. From left to right you're seeing a wireframe go from a low-fi to a hi-fi then all the way to a prototype. As explained by emojis:
2. Better communication
I love how wireframes give us something to keep the discussion about the design itself; without requiring a crisp pixel-perfect interface.
With wireframes the process has shifted from situations like this:
"Hey developer I need you to code something that looks exactly like this mockup I did in PowerPoint." - Eager Founder
To more like this:
"Here’s an idea how the interface could look, but I’ll put it in front of some users first." - Eager Founder
And in an infographic for our skim-reading peers:
— So how do wireframes and user flows bring your app idea to life?
They both have different levels of ‘resolution’ and fidelity of the finished product. When used correctly they'll paint a clearer picture. You'll be able to visually see how the user goes from one screen to the next. You'll be able to identify where buttons go and what they do. In addition, they'll help you with
Speed of iterations with added features or scope
Improve communication across partners and investors