Whether you are a novice or an amateur, these six easy-to-follow steps for designing wireframes will come in handy!
- How To Wireframe A Website
- How To Make Wireframes In Sketch
- Draw Wireframe
- How To Make Wireframes In Sketch Free
If you've been in the user experience (UX) design profession for even a little while, you've probably heard of wireframing at some point. In an ideal web designing scenario, wireframing would be the first step you take to visually depict what a webpage may eventually look like.
However, if you're not well versed in designing wireframes or if this is your first time designing one, you may struggle with a few things. You may wonder how wireframing fits into the larger design process, what are the steps involved in creating a wireframe, and whether you should create a wireframe using pen or paper or would you need a specialized tool for it.
While you can create a wireframe with pen and paper as well as a wireframe tool (as per your needs and convenience), answers to the other questions are a bit more tricky. The good news is that we will answer these, and other questions you may have, in this article as we talk about how to create wireframes.
In recent years, Sketch has risen to one of the top vector graphics editors among designers. I use it several times a week at work and I love it! Here are my tips for making great wireframes in. Wireframes can be created using anything from a hand-drawn sketch to professional, digital design tools. For small applications, it may be easier to simply sketch the basic design. However, the design process usually involves a great deal of collaboration and multiple iterations on the original designs. Make sure you know what you're building. So you're creating a mobile UX design. Carbon - Material Sketch Wireframe Kit Resource. Designer: Panagiotis. Popularity: 63063 views. A wireframe is a detailed visual model of an application's user interface that is like a blueprint of functionality and content. These Website and Mobile Wireframe Templates are ideal for creating a low-fidelity, design sketch to present ideas, arrive at a team consensus, and form the basis of a high-fidelity wireframe.
But before we dive in, what exactly is a wireframe?
What is a wireframe?
A wireframe is a mockup or a representation of the broad structure or layout of a web or app page. It shows how various components, such as sections, tabs, products, information, and call-to-actions, will be positioned and how the space will be utilized. Since the wireframe represents the initial layout of a webpage, colors, multimedia content, fonts, and other stylistic elements are typically kept minimal.
Sample wireframe being designed in MockFlow WireframePro(Source)
With that covered, let's look at the steps involved in creating a wireframe.
Conduct research to get clarity and direction
It may be tempting to start pouring out your wireframe ideas immediately, but before you do that, think of the larger goal: designing a compelling user interface (UI). And to do that, you will need to gauge the requirements of your design project and the expectations of your stakeholders and end users.
Your design should not only help the business deliver its message or products to customers but more importantly make it easy for customers to navigate the page and find what they need without much hard work.
Here is how you can ace this step:
- Check in with stakeholders to understand key project needs. Getting this clarity is foundational to the wireframe design.
- Research about the end users, their preferences, and buying behaviors so that you can address their needs with the wireframe.
- Based on your end user research, define common use cases to better understand the scenarios you are designing for.
- Conduct market research and competitor analysis to identify design trends and best practices.
Make it easy to refer back to the research data
You are going to collect a lot of data, including use cases, buyer profiles, market research data, and project requirements, during your research. At various points in your wireframing process, you will need to keep coming back to this research.
Therefore, before you dive in, make sure to document and organize all your research information in a way that you don't waste too much time and effort accessing them. This will ensure the hard work you put into your research reflects in your wireframe and doesn't go to waste.
Here are some quick ways to do this:
- Be sure to document all the key pieces of information you come across.
- Arrange the research based on macro and micro categories, using folders and subfolders.
- Create cheat sheets to capture key concepts such as buyer use cases, buying behaviors, or any intriguing user feedback you may have come across in your research.
Map user flows to address user needs
User flow refers to the path or journey of a user during a website or app session. This journey includes the point where they entered your website/app, all the points where they interacted with the website/app (like the pages they visited and the buttons they clicked on till their final transaction), and where they exited the website/app.
One simple example of a user flow could be: a user enters your eCommerce website after clicking on an ad about, say, grey derby shoes. After landing on your website, the person may want to filter the shoes by price, size, brand, etc; he/she may want to zoom in on one or more of the shoes, check their specifications, add one of the items to the cart, and eventually, make the payment and complete the transaction.
These are the sorts of interactions within your website/app that put together make up the user flow.
Sample user flow for an eCommerce website visitor (Source)
This journey needs to be mapped in a user flow so that you don't miss out on crucial design elements such as the shopping cart, price filter, or specifications checklist. Lacking such elements could confuse website/app visitors, requiring them to contact customer support to seek help with even the basic navigation.
How can i get microsoft word on my computer. The immediate impact in such a case would be dissatisfied or frustrated customers, which would also mean reduced conversions and increased abandonments.
User flows are the foundation of your wireframe, so be sure to cut out some time for this. Here is how you can do this right:
- Map user needs by asking yourself: What goal are the website/app visitors trying to achieve? What features are they looking for? What initial questions could they have? What information might they need to navigate smoothly?
- Create a flow outline that includes a user's entry point into the website/app and all the steps they may take until the final transaction.
- Make sure to keep the user flow logical and to include all possible needs of a user while navigating.
Create a minimalistic layout for the wireframe
It is now that you need to put pen to paper and start pouring your layout ideas. At this stage, you will need to create a basic structure that highlights what elements will be on the page, which UI element will go where, what tabs will be included, where the text boxes will go, and where the multimedia elements will be placed.
The idea is to create a basic skeletal structure of the webpage in a way that addresses all the user and business needs.
Also, as you design the structure, resist the temptation to add too many details—less is more at this stage. Forget the fonts and the colors, just focus on creating an indicative design, not the final thing.
Here are some questions you can answer to get this step right:
- How can I best organize the UI components to support a visitor's end goal?
- What should the user see as soon as he/she arrives on the page?
- Where should I place the main message of the page?
- Which information should be most prominently displayed?
- Which buttons will the user need to navigate through the website or app design?
Once the basic structure is ready, show it to your colleagues or your manager and get some initial feedback on it. Tweak the layout accordingly, if required, to increase usability.
Decide the fidelity level and fill in the details
Now that you have sufficient clarity on the direction of the project, the user flow, the basic wireframe layout (also called mockup), and any required improvements, you can go ahead and start filling in some details.
At this point, you will need to decide the fidelity level of your wireframe, in other words, the amount of detail present in your wireframe. Here is a quick snapshot of the key differences between the three commonly used levels.
| Fidelity | Characteristics | To be used |
|---|---|---|
| Low |
|
|
| Medium |
|
|
| High |
|
|
Once you have decided on the fidelity level, here is how you can fill in the details in the wireframe:
- Add details progressively from top to bottom and left to right.
- Add the basic usability details such as the navigation bar and the search bar on the top right or left.
- Throw in elements that you think will make it convenient for customers to use the page, and see where you can best place them.
Get testing!
With the details filled in, your wireframe is ready to prove its mettle. You will need to test the wireframe to see how usable it is, that is, if all the design elements a user might need are present.
Testing will also help identify any essential elements that may be missing or any additional requirements that need to be addressed. For example, instead of two fields on the Login page (one for username and the other for password), your wireframe has only one. Or maybe there is no navigation bar on the home page when logically, there should be one. Such misses need to be fixed before the wireframe goes further into the design process.
You can take the help of your colleagues in this or get actual users to test the final product. If you need a more in-depth analysis of the wireframe, you can also consider involving subject matter experts.
Defining the criteria for a new test in UserTesting (Source)
Here is how you can test your wireframe:
- Print your wireframes on paper or create digital wireframes and present them to reviewers.
- Ask reviewers a series of questions to gauge their experience and record feedback. Some wireframe testing tools may allow for more interactive wireframe testing and capture feedback automatically.
- Try user testing—a service that allows you to post a link of the wireframe that users can test. Once tested, they may share a video of their screen while testing and audio or written feedback.
Once you are done with the testing and have collected the feedback, make improvements as you deem necessary.
Ready for a wireframing blitzkrieg? Not so soon!
Before you launch into action, there is something you need to consider. Wireframing with pen and paper is great since you don't need to make any software installations, pay for any tool, power up a computer, or it doesn't matter if you are connected to the internet. But using a wireframing tool has some undeniable perks over sketching.
A wireframing tool can help you drastically reduce the time it takes to design a wireframe. You can simply use drag-and-drop placeholder elements and ready-to-use wireframe templates. A tool also makes it easy to collaborate with team members or clients and receive feedback in real time. Moreover, you can integrate with apps such as Adobe Creative Cloud or Jira to create high-quality wireframes.
If you are wireframing on a budget, you can check out this list of free and open source wireframing tools.
Looking for IT Management software? Check out Capterra's list of the best IT Management software solutions.
Wireframing is a big part of every UX/UI designer's daily job. There is an overwhelming number of wireframing tools out on the market that promise to make creating wireframes quick and easy.
But finding which ones will work best for your designs can be a bit like searching for a needle in a haystack, and finding a wireframing software that fits your price range can add even more stress to your search. But don't worry—we're here to help!
We've rounded up our top picks for the best wireframing tools that won't break your budget.
Our top eight wireframing tools are:
We'll give you a price breakdown, the pros, the cons, and a glimpse into what other designers are saying about each tool (all quotes taken from Capterra and G2).
Ready to learn about some amazing wireframing tools? Let's get started.
1. Mockplus
Mockplus is a rapid wireframing tool for designers to create interactive wireframes for websites and mobile apps, which enables you to share and test design ideas across PCs and mobile devices from an early stage in the design process.
Price breakdown
- Basic: Free
- Pro: 15-day free trial, $16 per month( Billed annually)
Why should you use Mockplus for faster and easier wireframing?
With a large number of ready-to-use components, icons, UIs and templates pre-installed, Mockplus goes beyond simply providing you the tools to create your wireframe and lends you a hand with your designs. A full set of interactions and animations also make it easy to create more realistic wireframes. It's also a collaborative tool: Your entire team can work on the same project.
What's not so good about Mockplus?
Mockplus is much suitable for you to create low- and medium-fidelity wireframes, mockups and prototypes. If you are looking for tools to create high-fidelity designs, it may not be a good option.
What users are saying about Mockplus?
- 'Mockplus does what it advertises which is a great thing. No learning curve and free plans that you can check all the features for free. Using the team just an invitation away.'
- 'What used to be time-consuming can now be done with the speed of thought, everything is a drag-and-drop away and with the number of components Mockplus has to offer, you will never feel the need of creating one.'
2. Balsamiq Wireframes
A wireframing tool for creating quick designs, running user testing, and sharing mockups with a design team.
Price breakdown
- Free 30-day trial period
- Pro (single-user license): $89
Why should you use it for wireframing?
One of the many Balsamiq Studios products, Balsamiq Wireframes is a Flash-based wireframing software with an extensive library of UI elements and templates that make wireframing a breeze.
The complexity of the Balsamiq Wireframe library can be a source of great inspiration for designers when producing desktop and mobile wires. Not only does it have many diverse elements, but it's also easy to learn and use. Most designers describe it as being as simple as dragging, dropping, and arranging elements from the menu onto your canvas until you have the interface you desire.
Balsamiq Wireframes also has built-in presentation tools that make presenting your designs to clients a seamless process.
Where Balsamiq Wireframes falls short
Balsamiq Wireframes is not the best for building larger prototypes and lacks animations or interactive features. Designers wishing to simulate the UX of their software must be able to program interactions themselves and export as an interactive PDF.
This wireframing software is unique in style as the design elements have a hand-drawn appearance to them. This gives your designs a bit of a cartoony feel that may not be desired. Also, it's important to note that once your free 30-day trial is up, you'll have to purchase a license to save any of your previous designs.
What other designers are saying
- 'Probably the easiest wireframing tool to use. It's focused feature set is aimed at creating wireframes in the least amount of time possible. Very quick to learn with some depth for power users.'
- 'Wireframes can look child-like and unprofessional with some settings.'
3. Wireframe.CC
How To Wireframe A Website
A simple, minimalistic wireframing tool for mobile apps and websites that's easy to learn.
Price breakdown
- Basic: free
- Premium: 7-day free trial, $16 per month (single-user)
What is a wireframe?
A wireframe is a mockup or a representation of the broad structure or layout of a web or app page. It shows how various components, such as sections, tabs, products, information, and call-to-actions, will be positioned and how the space will be utilized. Since the wireframe represents the initial layout of a webpage, colors, multimedia content, fonts, and other stylistic elements are typically kept minimal.
Sample wireframe being designed in MockFlow WireframePro(Source)
With that covered, let's look at the steps involved in creating a wireframe.
Conduct research to get clarity and direction
It may be tempting to start pouring out your wireframe ideas immediately, but before you do that, think of the larger goal: designing a compelling user interface (UI). And to do that, you will need to gauge the requirements of your design project and the expectations of your stakeholders and end users.
Your design should not only help the business deliver its message or products to customers but more importantly make it easy for customers to navigate the page and find what they need without much hard work.
Here is how you can ace this step:
- Check in with stakeholders to understand key project needs. Getting this clarity is foundational to the wireframe design.
- Research about the end users, their preferences, and buying behaviors so that you can address their needs with the wireframe.
- Based on your end user research, define common use cases to better understand the scenarios you are designing for.
- Conduct market research and competitor analysis to identify design trends and best practices.
Make it easy to refer back to the research data
You are going to collect a lot of data, including use cases, buyer profiles, market research data, and project requirements, during your research. At various points in your wireframing process, you will need to keep coming back to this research.
Therefore, before you dive in, make sure to document and organize all your research information in a way that you don't waste too much time and effort accessing them. This will ensure the hard work you put into your research reflects in your wireframe and doesn't go to waste.
Here are some quick ways to do this:
- Be sure to document all the key pieces of information you come across.
- Arrange the research based on macro and micro categories, using folders and subfolders.
- Create cheat sheets to capture key concepts such as buyer use cases, buying behaviors, or any intriguing user feedback you may have come across in your research.
Map user flows to address user needs
User flow refers to the path or journey of a user during a website or app session. This journey includes the point where they entered your website/app, all the points where they interacted with the website/app (like the pages they visited and the buttons they clicked on till their final transaction), and where they exited the website/app.
One simple example of a user flow could be: a user enters your eCommerce website after clicking on an ad about, say, grey derby shoes. After landing on your website, the person may want to filter the shoes by price, size, brand, etc; he/she may want to zoom in on one or more of the shoes, check their specifications, add one of the items to the cart, and eventually, make the payment and complete the transaction.
These are the sorts of interactions within your website/app that put together make up the user flow.
Sample user flow for an eCommerce website visitor (Source)
This journey needs to be mapped in a user flow so that you don't miss out on crucial design elements such as the shopping cart, price filter, or specifications checklist. Lacking such elements could confuse website/app visitors, requiring them to contact customer support to seek help with even the basic navigation.
How can i get microsoft word on my computer. The immediate impact in such a case would be dissatisfied or frustrated customers, which would also mean reduced conversions and increased abandonments.
User flows are the foundation of your wireframe, so be sure to cut out some time for this. Here is how you can do this right:
- Map user needs by asking yourself: What goal are the website/app visitors trying to achieve? What features are they looking for? What initial questions could they have? What information might they need to navigate smoothly?
- Create a flow outline that includes a user's entry point into the website/app and all the steps they may take until the final transaction.
- Make sure to keep the user flow logical and to include all possible needs of a user while navigating.
Create a minimalistic layout for the wireframe
It is now that you need to put pen to paper and start pouring your layout ideas. At this stage, you will need to create a basic structure that highlights what elements will be on the page, which UI element will go where, what tabs will be included, where the text boxes will go, and where the multimedia elements will be placed.
The idea is to create a basic skeletal structure of the webpage in a way that addresses all the user and business needs.
Also, as you design the structure, resist the temptation to add too many details—less is more at this stage. Forget the fonts and the colors, just focus on creating an indicative design, not the final thing.
Here are some questions you can answer to get this step right:
- How can I best organize the UI components to support a visitor's end goal?
- What should the user see as soon as he/she arrives on the page?
- Where should I place the main message of the page?
- Which information should be most prominently displayed?
- Which buttons will the user need to navigate through the website or app design?
Once the basic structure is ready, show it to your colleagues or your manager and get some initial feedback on it. Tweak the layout accordingly, if required, to increase usability.
Decide the fidelity level and fill in the details
Now that you have sufficient clarity on the direction of the project, the user flow, the basic wireframe layout (also called mockup), and any required improvements, you can go ahead and start filling in some details.
At this point, you will need to decide the fidelity level of your wireframe, in other words, the amount of detail present in your wireframe. Here is a quick snapshot of the key differences between the three commonly used levels.
| Fidelity | Characteristics | To be used |
|---|---|---|
| Low |
|
|
| Medium |
|
|
| High |
|
|
Once you have decided on the fidelity level, here is how you can fill in the details in the wireframe:
- Add details progressively from top to bottom and left to right.
- Add the basic usability details such as the navigation bar and the search bar on the top right or left.
- Throw in elements that you think will make it convenient for customers to use the page, and see where you can best place them.
Get testing!
With the details filled in, your wireframe is ready to prove its mettle. You will need to test the wireframe to see how usable it is, that is, if all the design elements a user might need are present.
Testing will also help identify any essential elements that may be missing or any additional requirements that need to be addressed. For example, instead of two fields on the Login page (one for username and the other for password), your wireframe has only one. Or maybe there is no navigation bar on the home page when logically, there should be one. Such misses need to be fixed before the wireframe goes further into the design process.
You can take the help of your colleagues in this or get actual users to test the final product. If you need a more in-depth analysis of the wireframe, you can also consider involving subject matter experts.
Defining the criteria for a new test in UserTesting (Source)
Here is how you can test your wireframe:
- Print your wireframes on paper or create digital wireframes and present them to reviewers.
- Ask reviewers a series of questions to gauge their experience and record feedback. Some wireframe testing tools may allow for more interactive wireframe testing and capture feedback automatically.
- Try user testing—a service that allows you to post a link of the wireframe that users can test. Once tested, they may share a video of their screen while testing and audio or written feedback.
Once you are done with the testing and have collected the feedback, make improvements as you deem necessary.
Ready for a wireframing blitzkrieg? Not so soon!
Before you launch into action, there is something you need to consider. Wireframing with pen and paper is great since you don't need to make any software installations, pay for any tool, power up a computer, or it doesn't matter if you are connected to the internet. But using a wireframing tool has some undeniable perks over sketching.
A wireframing tool can help you drastically reduce the time it takes to design a wireframe. You can simply use drag-and-drop placeholder elements and ready-to-use wireframe templates. A tool also makes it easy to collaborate with team members or clients and receive feedback in real time. Moreover, you can integrate with apps such as Adobe Creative Cloud or Jira to create high-quality wireframes.
If you are wireframing on a budget, you can check out this list of free and open source wireframing tools.
Looking for IT Management software? Check out Capterra's list of the best IT Management software solutions.
Wireframing is a big part of every UX/UI designer's daily job. There is an overwhelming number of wireframing tools out on the market that promise to make creating wireframes quick and easy.
But finding which ones will work best for your designs can be a bit like searching for a needle in a haystack, and finding a wireframing software that fits your price range can add even more stress to your search. But don't worry—we're here to help!
We've rounded up our top picks for the best wireframing tools that won't break your budget.
Our top eight wireframing tools are:
We'll give you a price breakdown, the pros, the cons, and a glimpse into what other designers are saying about each tool (all quotes taken from Capterra and G2).
Ready to learn about some amazing wireframing tools? Let's get started.
1. Mockplus
Mockplus is a rapid wireframing tool for designers to create interactive wireframes for websites and mobile apps, which enables you to share and test design ideas across PCs and mobile devices from an early stage in the design process.
Price breakdown
- Basic: Free
- Pro: 15-day free trial, $16 per month( Billed annually)
Why should you use Mockplus for faster and easier wireframing?
With a large number of ready-to-use components, icons, UIs and templates pre-installed, Mockplus goes beyond simply providing you the tools to create your wireframe and lends you a hand with your designs. A full set of interactions and animations also make it easy to create more realistic wireframes. It's also a collaborative tool: Your entire team can work on the same project.
What's not so good about Mockplus?
Mockplus is much suitable for you to create low- and medium-fidelity wireframes, mockups and prototypes. If you are looking for tools to create high-fidelity designs, it may not be a good option.
What users are saying about Mockplus?
- 'Mockplus does what it advertises which is a great thing. No learning curve and free plans that you can check all the features for free. Using the team just an invitation away.'
- 'What used to be time-consuming can now be done with the speed of thought, everything is a drag-and-drop away and with the number of components Mockplus has to offer, you will never feel the need of creating one.'
2. Balsamiq Wireframes
A wireframing tool for creating quick designs, running user testing, and sharing mockups with a design team.
Price breakdown
- Free 30-day trial period
- Pro (single-user license): $89
Why should you use it for wireframing?
One of the many Balsamiq Studios products, Balsamiq Wireframes is a Flash-based wireframing software with an extensive library of UI elements and templates that make wireframing a breeze.
The complexity of the Balsamiq Wireframe library can be a source of great inspiration for designers when producing desktop and mobile wires. Not only does it have many diverse elements, but it's also easy to learn and use. Most designers describe it as being as simple as dragging, dropping, and arranging elements from the menu onto your canvas until you have the interface you desire.
Balsamiq Wireframes also has built-in presentation tools that make presenting your designs to clients a seamless process.
Where Balsamiq Wireframes falls short
Balsamiq Wireframes is not the best for building larger prototypes and lacks animations or interactive features. Designers wishing to simulate the UX of their software must be able to program interactions themselves and export as an interactive PDF.
This wireframing software is unique in style as the design elements have a hand-drawn appearance to them. This gives your designs a bit of a cartoony feel that may not be desired. Also, it's important to note that once your free 30-day trial is up, you'll have to purchase a license to save any of your previous designs.
What other designers are saying
- 'Probably the easiest wireframing tool to use. It's focused feature set is aimed at creating wireframes in the least amount of time possible. Very quick to learn with some depth for power users.'
- 'Wireframes can look child-like and unprofessional with some settings.'
3. Wireframe.CC
How To Wireframe A Website
A simple, minimalistic wireframing tool for mobile apps and websites that's easy to learn.
Price breakdown
- Basic: free
- Premium: 7-day free trial, $16 per month (single-user)
What does Wireframe.cc offer?
If you need a quick and efficient tool for putting together some simple wireframes then Wireframe.cc is your best choice.
This web-based wireframe tool is super intuitive as the layout is a bit like drawing items on pencil and paper and cutting and pasting them on to your design. Wireframe.cc made it very easy to turn your mouse into a multipurpose tool. Simply draw your shape on a blank canvas and select what you want it to be from the 9 options on the appearing toolbar.
Wireframe.cc's design templates are simple with the ability to choose from the mobile landscape, mobile vertical, and webpage. This focus on the basics makes Wireframe.cc a great option when you just need something rudimentary done quickly.
What doesn't it offer?
Some see the simple nature of Wireframe.cc to be a downside—especially if you are looking to create anything mid-fidelity and up. No animation or interaction options are provided and it also lacks mockup creation, presentation tools, prototyping, screen capture, and feedback management.
It also doesn't allow for the creation of more than one wireframe at a time so comparing various iterations side-by-side can be difficult. So while this wireframing tool is quick and easy to use, it is a bit limited in features and complexity.
What people are saying about Wireframe.cc
- 'I suck at designing. This dead-simple tool allows me to get my web design ideas out.'
- 'Quick to start. No installation needed. Minimalistic. Easy to understand for everyone.'
4. Figma
A cloud-based design platform great for sharing and collaborating among team members.
Price breakdown
- Starter: free (up to two editors and three projects).
- Premium: free for students or $12 per editor/month (unlimited projects).
Why is Figma good for wireframing?
Not all designers would associate Figma with wireframing as many people use it solely for its wonderful prototyping and graphic design features. However, this design tool gives you the freedom to create pretty much any design you want, including wireframes all the way from low- to high-fidelity.
Its open and expansive layout gives you the ability to create many designs within one project. It also gives you the ability to produce many iterations side-by-side, making brainstorming exercises and redesigns super simple. Figma's design-centered approach makes it a wonderful tool to get your wireframing ideas out quickly by making usually tedious tasks quite easy.
Are there downsides to Figma?
To be honest, it is difficult to find reasons why Figma wouldn't be good for wireframing. However, it's not a tool designed explicitly for creating wires as it has multiple design purposes and functions. So if you are looking for something more specifically designed for wireframing, you might want to look elsewhere—especially if you and/or your design team will need to upgrade to paid versions. You might be paying for more than you really need.
What other people are saying
- 'It's a great tool to share prototypes, wireframes, even other kinds of deliverables such as mood board.'
- 'Figma provides all the comprehensive features of a software diagramming tool but with a laser focus on designing user interfaces and user experiences….The price point for large teams can be a bit prohibitive.'
5. Pencil Project
An open-source graphical user interface tool great for wireframing, mockup creation, and prototyping by both solitary designers and big businesses alike.
Price breakdown
Totally free!
What is Pencil Project good for?
Pencil Project is a downloadable wireframing tool for both Mac and Windows and is also available as a Firefox add-on. Pencil Project has loads of templates to choose from for both mobile and web so you can create many different low-fidelity wires of your interface.
How To Make Wireframes In Sketch
This diverse UX tool has a good amount of interactive elements and is especially noted for its diagramming capabilities. Linking shapes, wireflows, and other flowcharts is made quick and easy with Pencil Project's 'connector' tool and page linking.
Free of charge and intuitive to use, Pencil Project is a great choice for basic wires or beginner designers.
What does Pencil Project lack?
Pencil Project is not the best wireframing tool for big design teams as collaboration features are a bit limited. Users have also noted that the variety of available shapes is a bit light and many designers are left needing to hook up to a more extensive online shapes library.
Other users have noted that Pencil Project feels a bit out of date and could use better-looking features. Furthermore, designers looking for mid- to high-fidelity wireframing capabilities will most likely want to use a different software.
Draw Wireframe
What users are saying
- 'I love using Pencil for the initial mock-up of a project. I can work quickly and get the printout to all of my coworkers for input.'
- 'Pencil is a little limited in what you can add to your design. They have great options, but sometimes you wish they had more to offer.'
6. NinjaMock
Collaborative mockup and wireframing application for designing and testing mobile apps and web pages.
Price breakdown
- Free version (one project with 200 elements)
- Personal (three projects, sinlge-user): $6.99/month
Why is NinjaMock great for wireframes?
NinjaMock lives up to its name by making wireframe creation super fast and efficient. It's simple, quick to learn, and includes many interactive elements for both mobile and desktop.
How to capture image on pc. The speed and intuitiveness of NinjaMock means you can spend less time learning how to work the software and more time getting creative with your wireframes. It's also available for many platforms including IOS, Android, Windows phones and web.
Sharing and editing designs with clients is also made easy by the ability to produce unique links that can then be shared with customers allowing for real-time collaboration and editing.
Issues you may encounter with NinjaMock
If you're a smaller company working on multiple projects that require various elements, NinjaMock's pricing may not be feasible for you. Furthermore, users have reported issues with navigation between mockups and have requested more interactive layouts.
What users are saying about NinjaMock
- 'I love the link feature which allows me to navigate through different pages: my customers love the live results!'
- 'The major problem is with pricing, it's a bit high for small companies.'
7. FluidUI
An intuitive wireframing tool for supported on a wide variety of platforms including mobile Android and iOS.
Price breakdown
- Free version (one project, single-user, 10 pages max)
- Solo (three projects, single-user): monthly, $15/month; yearly, $8.25/month
How FluidUI can help you make great wireframes
FluidUI is all about making great-looking high-fidelity wireframes. The free version offers up to 10 pages of workspace and even allows transitions and gestures between them.
FluidUI is unique among most other wireframing softwares in that it offers a wide variety of interaction elements and animations. Not only that, but it also comes equipped with over 2000 icons, widgets, and design elements that you can customize and drag-and-drop onto your page. Fluid UI puts everything you need for an awesome wireframe right at your fingertips.
What's not so great about FluidUI
Although FluidUI does its best to give you great wireframing tools for free, their unpaid version is still a bit limited and many designers feel the need to upgrade. Another frustrating aspect to FluidUI is that multiple image upload is not supported, leaving you uploading images one-by-one.
How To Make Wireframes In Sketch Free
What are FluidUI users saying?
- 'I haven't actually used any other software other than FluidUI but I truly have no reason to! It's got everything you'd possibly need.'
- 'Sometimes it can be a little awkward to position things…although it does get easier with practice.'
8. Mockflow
On-premise and cloud based wireframing software equipped with template library and drag-and-drop editor.
Price breakdown
- Basic: Free (one project with certain app limitations, two users)
- Premium: $14/month (unlimited projects and users)
Why should you wireframe with Mockflow?
Mockflow is kind of a one-stop-shop for wireframing and web and mobile app development. Not only does this software have amazing tools and presets for fast wireframing, but it also has website building, banner design, collaboration tools, and a timeline manager. All of these extra features make sharing your wires a breeze and moving forward in the design process a lot smoother.
Mockflow is especially great for beginners as their design presets save you the time it would take to create your own shapes and elements.
What are the drawbacks to using Mockflow
The basic package is a bit limited and most users feel the need to upgrade to the paid package. Mockflow is pretty specific to wireframing and mockup creation so if you're needing something for prototyping and user testing, you might be better off with a different software. Users have also reported issues with the software lagging when they try to work with multiple pages.
What people are saying about Mockflow
- 'It is easy to use and easy to load. You do not need any special skills to work on this.'
- 'Wireframe Pro is very slow and needs better speed. It is lacking animations for your prototypes and an infinite artboard where one can just go on making screens.'
9. Cacoo
A diagramming software for designers, freelancers, and students to brainstorm flowcharts, mind maps, mockups, wireframes, and more.
Price breakdown
- Free 2-week trial
- $6 per user, per month (paid monthly); or $5 per user, per month (paid annually—2 months free!)
What's great about Cacoo
Cacoo is a great wireframing tool for creating both low- and mid-fidelity wires. It's cloud based and heavy on team collaboration with quality presentation tools and ways to share your ideas with colleagues. There's a good amount of templates to choose from as well as other features for creating user flows, prototypes, and diagrams.
The free trial is on the shorter side but it offers unlimited users and up to 25 pages or projects— pretty generous! Especially since Cacoo can be a great tool for design tasks other than wireframes, such as flowcharts or user testing.
The downsides to using Cacoo to wireframe
The free version is a bit more limited than the subscription and you can only export projects as PNG files. You also can't access your work once your free trial ends so you must back it up elsewhere in order to save it. Some users have reported its cloud-based nature to be a bit frustrating as it can lag or malfunction if they're not using a very up-to-date computer.
Furthermore, there is a bit of a learning curve to using Cacoo as the keyboard shortcuts are not as intuitive as desired.
What are other designers saying about Cacoo
- 'Easy to learn and use. Cacoo lets you make fast and great diagrams for many usages.'
- 'Using a good computer is needed for flawless function.'
A final word
So there you have it, our picks for the top 9 free wireframing tools. Each software has its own unique features to help you produce professional-looking wires quickly and efficiently. And while they all have their downsides, finding the right wireframing tool will depend on you or your team's individual needs.
If you're about to start creating your very first wireframe, I really recommend watching this video tutorial by CareerFoundry's Head of Design, Jeff Humble.
If you'd like some inspiration as you create your wireframes, check out our favorite examples of website and app wireframes.
And if you'd like to learn more about UX design and wireframing, check out these articles:
