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:

  1. Determine layout using boxes
  2. Add text and other elements (buttons, input forms etc)
  3. Design a bit: size, alignment, rounded corners (buttons), bolded headings
  4. Add short sharp annotations when needed
  5. Create transitions
  6. Test on devices
  7. Get feedback from the team and users
  8. 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!