The right wireframe tool for you can make a huge difference in your productivity as well as the overall outcome of your product.
In this article, I give you a short but honest review of several free wireframe tools as well as a few paid ones. I’ll also talk about option to use online tools that allow you to create wireframes without having to download or sign up for anything.
Best wireframe tool for complex projects
Mockplus (Web, macOS, Windows)
At this point, we’ve covered a large variety of really solid wireframe design apps that can make your design tasks much easier. But there’s one area of the design process that most of the apps tend to ignore: all of the admin and organizational tasks that go along with designing a new interface.
Which is exactly why Mockplus impressed us enough to merit a spot on this list.
Not only can you add notes and documentation to each element in your design, but your project area in Mockplus also has room for you to create and save documentation in a text editor, save your style guide (so everyone is on the same page), and even create and assign tasks to your team. Since the tasks can be linked to a project (and even dialed down to an individual design within the project), you can really dial in your review feedback process and feel confident that nothing will fall through the cracks as you polish up your wireframe.
Finally, while there is a desktop app available, Mockplus is similar to Figma in that you can do all of your wireframe designing from your web browser and feel confident that you are always working from the most up-to-date version.
Mockplus price: Free for the Basic loud plan with up to 10 users and 10 projects; from $5.95/user/month for unlimited projects on the cloud plan. Mockplus Classic, a desktop prototyping app, begins at $199/year for the Individual plan.
Adobe Photoshop (macOS, Windows)
Photoshop is the industry heavyweight when you’re looking for advanced pixel-based design software. It can handle almost anything, from photo editing to digital painting, and is beloved by the majority of graphic design professionals for that reason alone. The advantage of using Photoshop for your wireframes (especially web-based design, where you will depend more on pixel graphics) is that you can easily create a high-fidelity mockup without switching design systems.
To create a wireframe, you can add any number of artboards that correspond with your screen size dimensions (and add a grid layout that corresponds with your responsive breakpoints, if you want). You can either design UI components yourself with Photoshop or download a kit from online for standard elements like iOS keyboards. And, while the vector design tools (Sketch, Illustrator, Designer, etc.) are great for a lot of design work, no tool beats Photoshop for its raster image editing capabilities, which is invaluable when you eventually turn your wireframes into mockups and start adding photos and other graphics.
Despite the array of features, there are a few downsides to using Photoshop for your wireframes. Not only is the learning curve fairly steep, but it can also be a little clunky to use if you need to wireframe multi-screen flows, site structure, etc. Fortunately, many prototyping tools (like Proto.io, InVision, or Adobe XD, for example) let you import Photoshop files directly, so you can move back and forth between tools to create a more polished design that can be used for prototyping, user testing, or simply passing to developers for implementation.
Photoshop Price: From $9.99/month for the Creative Cloud Photography Plan that also includes access to Lightroom.
Figma Clique favorite
User-review rating: 4.5/5
Type: Web-based, Freemium
Overview: Figma is an all-in-one design platform for UX/UI pros and offers a robust free offering for creating wireframes. It’s starter package is completely free and is one of the most robust free offerings on this list – 3 active projects, 30 day revision history, 2 editors at any time, and unlimited cloud storage.
The first paid tier (which is free for students with a valid school email address) is $12/mo per editor and includes an upgrade to unlimited active projects and version history, custom permissions, private boards, and team collaboration features.
Cacoo
Cacoo is an Online Diagram Software for creating a Flow Chart UML
You can easily create mockups for website designs and even smartphone applications. The free plan will allow you to export the final project only in .PNG format, but I think it’s enough for those freelancers who’re not working with major clients, and mostly need something to expand their ideas upon. A great set of tools and functions come integrated with this free wireframing platform, and it’s easy to upgrade whenever you’re ready.
Gliffy
I have mentioned Gliffy in a recent post of mine – tools to publish better content – and it goes to show the variety that his platform is able to offer. You can see an example of Gliffy’s wireframe on this page, the free plan allows 2MB storage and 5 diagrams. More than enough to do some testing, and small scale projects.
Jumpchart
Jumpchart allows us to involve everyone within a single project, and so the whole team is always educated on the latest changes, and the needs of a project. You can easily monitor changes, and updates as they happen, so there is no reason to question whether something was done on purpose or not. It comes ready for tablet devices, and they even allow you to export the designs to WordPress, allowing you to create live sites within minutes.
You get two users, one project and ten pages from the free plan that Jumpchart offers, I think that’s more than enough to test the waters and see if you’d like to make it your companies default way of wireframing and creating mockups.
MockFlow
MockFlow is famous for its flagship product ‘WireframePro’ – which is both a desktop & web application for creating, designing, and collaborating on web design projects with your product development team, or by yourself. It’s fully interactive and even enables you to create sitemaps of the project pages you’ve created. You can export in almost every possible format there is, and there are hundreds of features and options to choose from.
The Free plan comes with one design project and one design license.
Fluid UI
Blessed with 16 built-in libraries, Fluid UI functions for iOS, Windows, Android, and more. These pages are created by dragging in elements from the libraries. It’s an amazing way to map out your project visually by creating links to join screens. It helps in creating a diagram of how everything should be.
InVision Clique favorite
User-review rating: 4.4.5
Type: Web-based, Freemium
Overview: InVision is an all-in-one wireframing, prototyping, and mockup tool for designers and is one of the most well-known brands in all of wireframing software.
Invision came out of applications, specifically Photoshop (at the time) not having screens that could interact with each other (also why many moved to Sketch). It filled the void of
It does require some sort of external application (we like Sketch) to create the screens to be bought into InVision.
InVision’s free wireframing plan gives individual UX/UI designers the tools create one active prototype or wireframe at anytime. It’s a basic plan designed mostly for freelancers and those not working collaboratively.
The next level of pricing for InVision is $15/mo per user and gives design teams the ability to create up to three projects that can remain active at any time – with full feature access to the InVision app.
Draw.io
User-review rating: 4.3/5
Type: Web-based, Open source
Overview: Draw.io is a completely free and open-source wireframing software that feels similar in UI to Google Docs. It’s a simple layout with powerful features. Simply put, it may be the most robust free offering of any of the free wireframing tools on this list.
Users can export designs to their Google Drive, Microsoft OneDrive, their desktop, or directly supported integrations including Gliffy, Lucidchart and more. An added benefit is it’s active open-source community that works to fix product bugs and issues, and add new features.
Pencil Project
User-review rating: 4.1/5
Type: On-premise, Open source
Overview: Project Pencil is a completely open-source and free wireframing and prototyping tool. It has an unlimited amount of designs for UX/UI pros to utilize and all of its features come completely free.
The open-source community is another perk, meaning developers are constantly keeping the tool updated with new features and security.
Miro Clique favorite
User-review rating: 4.7/5
Type: Web-based, Freemium
Overview: Miro, which previously operated under the name RealTimeBoard, is an online whiteboarding tool for distribution product and UX teams. A nimble tool for fast prototyping, Miro is extremely collaborative and akin to using an extremely light version of figma.
Miro isn’t as robust as other dedicated prototyping tools, which sounds like a negative, but actually serves as one of its strengths, since its limitations help facilitate faster prototyping, with an experience that feels like sketching on a whiteboard in a virtual room with the rest of your team.
Miro is free for your first three boards, at which point each board costs $3 per-day-logged-in, or you can build unlimited boards for $15 per month per user.
Conclusion
One of my favorite tools in a web design workflow is a wireframe. Wireframes are great for making website designs cleaner and more manageable. Personally, when I begin a new project, I will build a wireframe using one of these tools. In this post, I wanted to share 8 of the best wireframe tools that you can use for your web design projects