Wireframe vs Prototype, how are they different?

*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.