
How to Wireframe Using the 3 Most Popular Tools
What a wireframe is, how to make one, and why you should use it.
BY IRINA ELISEEVA
What is a wireframe?
A wireframe is the skeleton of a product (a website or a mobile app). It consists of simple shapes that represent functional parts (images, buttons, text areas etc). It focuses on space allocation and the visual prioritization of content, without detailing the purposes of those parts.
When to use wireframes?
Use wireframes early in your process to communicate the structure and functionality of your design to team members and other stakeholders.
They are a cheap fast way to get feedback on functionality and user experience because the visual design is not included. People can see that your project is still a work in progress which makes them more open to providing honest feedback. When providing feedback on a polished prototype, people may be reluctant to critique your work for fear of hurting your feelings (even if your prototype is really bad). But the obvious temporary nature of a wireframe takes that concern away. Plus, people enjoy contributing their ideas!
Wireframe vs Prototype, how are they different?
Wireframe
low-fidelity
greyscale
Lorem Ipsum text area*
generic font
placeholders for images, videos
Prototype
high-fidelity
color
actual copy
custom font
actual media
*High-fidelity wireframes use actual copy
Simplified steps on how to wireframe
The design process has many steps and will be different for each project you work on. Usually sketches come before wireframes, after which a mockup (visual representation of the product, without functionality) or a prototype is created.
My process is: research → user flow → sketch → low-fi wireframe → usability testing → prototype.
As for the wireframing process itself, it might vary slightly depending on what tool I’m using and whether it is a low fidelity or high fidelity wireframe. But in general my steps are as follows:
- Determine layout using boxes
- Add text and other elements (buttons, input forms etc)
- Design a bit: size, alignment, rounded corners (buttons), bolded headings
- Add short sharp annotations when needed
- Create transitions
- Test on devices
- Get feedback from the team and users
- Iterate or move on to the next step
Software to use
You can draw your wireframes by hand, but if you feel more comfortable using software, here are some free browser-based tools you can use.
Miro
Free Tier Limitations: 3 boards, unlimited team members
Paid Plan: $8/ month/ editor (billed annually)
When I use it: When I don’t have much time and my flow and screens are pretty standard. I also use it when I just want to show the basic idea to team members or users. Miro has some templates to start with and a library of wireframing elements, so you can have a simplified flow ready within 5-10 minutes.
Whimsical
Free Tier Limitations: 2 workspaces with 3000 items per workspace
Paid Plan: $10 / month / editor (billed annually)
When I use it: When I want to get into more detail but still don’t have much time. It has a library of basic elements like buttons and images. Even the Lorem ipsum text can be expanded!
Figma
Free Tier Limitations: 3 projects & 2 editors
Paid Plan: $12 / month / editor (billed annually)
When I use it: Usually at a later stage when I need a high fidelity wireframe which will transition into a prototype afterwards. It’s useful if I need to demonstrate transitions from one screen to another. To speed up the process you can use wireframing kits like the one in the video below – created in line with iOS guidelines.
Other tools
Balsamiq – a fast low-fidelity wireframing tool.
InVision Freehand – perfect for collaboration and capturing feedback.
Lucidchart – libraries of objects and templates make it easy to use for non-designers.
UXPin – great for high-fidelity wireframes and prototypes. Allows you to have conditional logic and various states of elements.
WireframeCC – no need to register to start using it. Visit the site, start drawing, and send the link out.
Mockplus – with pre-built components, icons and drag and drop functionality it requires a low learning curve.
Cacoo – easy to track changes, discuss designs with comments, chat, and video chat.
Courses you can take for more practice
Balsamiq Wireframing Academy will teach you the basics of wireframing and user interface design. It has articles, courses, videos, and more.
Unbox wireframe a day is a wireframing course to help you learn design by deconstructing a website or app every day, for 21 days.
Web Design: Wireframes to Prototypes by Calarts on Coursera This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes.
You made it to the end! I hope you now understand better what wireframes are, as well as when and how to use them. We have our monthly Design Hangouts Online where you can show your work and get feedback from other designers!