In August, I visited Italy for the first time. It was a wonderful trip, but it reinforced a powerful lesson. Sure, it’s cliche. But it’s true what they say – an ounce of prevention is better than a pound of cure.
Because my travel partner and I didn’t plan much before going, we weren’t able to see some of the attractions. The waits were too long or I wasn’t wearing the right thing. And while our tour of Tuscany was the highlight of the trip, we had to choose the most expensive option because we waited until the last minute to book and every cheaper tour was sold out already.
Like trip planning, wireframing your website or app can feel like an extra, unnecessary step. After all, plans always change, so why spend hours mapping out every detail when you know you’re going to have to make new decisions on the fly? And isn’t it more fun to be spontaneous anyway?
But the upfront work can save you hours on the backend. You won’t regret getting feedback on your UI when it’s still in a wireframe, rather than in development.
Here are five awesome free and open-source wireframe tools.
Lucidchart is a full-featured, free wireframe builder and UI design software tool that offers easy collaboration on wireframes.
No more saving, sharing, getting feedback, incorporating it, saving, and sharing again. Lucidchart lets multiple people edit the same wireframe simultaneously, like Google Docs.
Browse through a variety of shapes and templates for UI containers, menus, widgets, and more, or import your own elements directly.
Capterra users give Lucidchart an average rating of 4.5 out of 5 stars. For ease of use, the average rating is 5/5 stars. But for customer service, the score is 4/5 stars.
Jo Le at Salesforce uses Lucidchart daily and wrote, “The ease of use and the ability to quickly create a data flow diagram on the fly is one of my favorite features. Moreover, my team collaborates on diagrams very often so the ability to share and automatically save it fantastic.”
“Lucidchart is generally a great product for the casual flowcharter or diagrammer,” wrote Thomas Gappmayer. He loves the fact that multiple users can collaborate on a “live” wireframe. “You can send out a URL that will represent a live version of your document, not a static edition like a PDF or a JPG.” His big complaint is Lucidchart’s “relatively simple shapeset and functionality. For 95% of users, this won’t be an issue – but for Visio power users, Lucidchart’s limitations are quickly apparent.”
User Raphael Bousquet appreciates the regular updates and bug fixes. “I don’t recall any downtime,” Bousquet wrote. It’s got all the features they need, and is easy to use.
Check out the Lucidchart blog to learn more about the company and more about wireframing and software development.
Wireframe.cc is a free and open-source browser-based wireframe tool. This is a great option for people who want a simple and uncluttered user interface. Instead of toolbars, Wireframe.cc offers options that pop-up when you need them and stay hidden when you don’t. There are only three templates to choose from: browser, tablet, and mobile phone. The limited design options decrease decision-fatigue.
You can also share live wireframes with your whole team for collaborative editing, and anyone with a link can comment on a wireframe, though unlocking this functionality does require upgrading.
Be aware that at the free level there’s no user account, all your wireframes are public, and you’re limited to a single page.
But upgrading isn’t terribly expensive.
Front-End Web Developer Jacqueline Silseth loves how easy it is to save her work in Wireframe.cc and the simplicity of the design options. “There’s a bunch of preset styles so you don’t have to worry about accidentally putting your own personality into what you’re building,” Silseth wrote. “It’s quick-and-dirty, but still looks nice.”
Support is what you would expect for a free tool. “They do not offer tutorial videos, live chat, telephone, forum or even an extensive FAQ section,” writes Russell Thompson. In addition, the price of simplicity is limited functionality. “Other competitors allow complete functions in the prototypes so that it can act like an actual website instead of just PNG or PDF files that just give you the visual representation of each page.”
MockFlow is like the opposite of Wireframe.cc. Whereas Wireframe.cc has three templates, MockFlow has an entire design library of templates (called the MockStore) that users can search or even submit their own work to. You can also choose from third-party templates, layouts, and components. The image and component collections include forms, navigation elements, shapes, and icons.
With MockFlow, you can build working prototypes, website and app interface blueprints, sitemaps, and more.
It’s got a TON of functionality you won’t find on other free software, including version tracking and HTML5 export. It’s got a 960 grid, rulers, and layers, like Photoshop. It also supports master pages, has a presentation mode option, and will auto-size your canvas.
MockFlow also has advanced collaboration functionality. You can work on the same wireframe with your colleagues or clients in real-time, but you need to upgrade to WireframePro, which includes TeamChat and annotations. But the kicker is that you can set sharing permissions, including Reviewer, Editor, and Admin levels of access. A preview URL lets you share publicly.
Unfortunately, any collaboration requires upgrading to the most expensive option.
When you upgrade MockFlow, you also get to organize your projects into folders and subpages to make it all easier to find.
Again, the customer support is a little lacking. According to Russell Thompson, “They mostly deal in self-help options.” However, Mockflow does offer tutorials and comprehensive FAQs. MockFlow also offers email support, but not telephone or live chat support.
For all the functionality, I was surprised to hear people say the software is easy to use. Nicole W. C. Yeatman wrote that MockFlow was “very user-friendly even for those with little web or design experience.” Thompson wrote that “creating and editing your work is easy with MockFlow as it uses a full featured drag-and-drop editor that is very easy to learn, especially with the tutorials provided by MockFlow.”
Pencil is the only desktop-based, open-source wireframe tool on this list. Which means that every feature it has is available to all users for free. One of the first things you want to look at when evaluating open-source, desktop-hosted software is when it was last updated. There are three main reasons.
First, the software may be way behind the times in terms of features. Second, you may not want to invest time in learning to use software which is or will soon be outdated and is unsupported. Third, there may be security risks to using severely out-of-date software. But Pencil seems to be a very alive project, with version 3.0.0 – RC1 released July 25, 2016.
Slant points out that you can use Pencil to create multi-page wireframe, with links between the pages. Which is cool. But even cooler, when you export your wireframes to an HTML webpage, Pencil preserves the links. Which means you can share full app or website mockups with linking pages.
With Pencil, you can import external objects. And like most options, there are templates included. Choose from its collection of shapes for wireframing for both desktop and mobile with preinstalled Android and iOS UI stencils.
“Pencil also includes open-sourced clipart that allows users to drag-and-drop a seemingly unlimited collection of clipart into wireframes,” according to Slant. “Unlike other tools which may include just a small collection of shapes to put in your wireframe, Pencil has a huge, well-organized collection of shapes and flowchart elements.” Slant especially like that the icons are all vector format, and thus are fully scalable.
Pencil helps with aligning, z-ordering, scaling, and rotation objects. And like MockFlow, you can export to HTML, PNG, and PDF. But, with Pencil, you can also export to an Openoffice.org document or a Microsoft Word document.
When I asked Peter Casey why he liked using Pencil, he said, “Above all else, the beauty of the interface. It is by far the most intuitive and easy-to-use standalone wireframing tool I’ve ever used.” Casey likes that Pencil wireframes “pretty much every size of paper and website. And has both paper and website measures. In addition, Pencil has a large community with a ton of stencils for all the graphics you need for various platforms (web, mobile app, etc).”
Gliffy has branded itself as the cheaper version of Visio. In fact, you can actually import Visio wireframes and edit and save them with Gliffy. The web-based flowchart tool can be used for wireframing and offers drag-and-drop elements, along with online collaboration, export, and version tracking. And Gliffy is fast, as the editor is built with HTML5, not Flash. Which also makes it more secure.
It’s got a robust library of shapes with multiple connector points. The automatic spacing and alignment option helps your wireframe look polished. You can also save time by making your elements “snap” to the grids and guides.
An embed tool allows you to share your work via social media and Google Docs. Google Drive integration means you can create, open, edit, and share your Gliffy wireframes on any computer or device.
The free version limits you to five wireframes, and all of them are public.
One of the big cons, according to Top Ten Reviews, is that Gliffy lacks the ability to let you export your wireframe as a PDF or HTML. However, it would seem like users would be able to work around this limitation by embedding the wireframe in Google Drive and exporting that document. However, that’s a suboptimal option, as that process might degrade some of the richness of your wireframe.
Another drawback is Gliffy doesn’t support multi-page wireframes. Other missing features include the ability to replace shapes. You have to delete the shape that’s there first. And each element can be connected to another via one point and one point only. When you enter text, Gliffy doesn’t resize the element.
Capterra reviewer Tony Miller has been using Gliffy for wireframing interfaces, ER diagrams, and flow diagrams for several years. “The software is easy to use and intuitive,” Miller wrote. “There’s a good range of form elements for wireframing and the export options work well. They had a bad outage a while ago, but they were up-front about what happened and did a great job of keeping users informed of how service restoration was progressing. I’m looking forward to making more use of the google docs integration. Pros: Easy to use, fast to use. Works great in Ubuntu.”
You can also wireframe in Google Drive. They’ve got a ton of templates, and you can add yours to the mix if you want. Obviously the pros are all the pros of Google Drive. The editor is built with HTLM5, not Flash, so it’s fast and secure. You can set sharing permissions, including view only, comment, or edit. Anyone with permission can comment on your wireframe, however I resist calling it annotation because it’s hard to get the comment to appear in the right place.
You can create as many wireframes as you want for free, you can export as PDF or embed them. However, there is, oddly, no way to export your wireframe as HTML. You can publish them to the web, but only as static images. Google Drive doesn’t support multi-page wireframes. You can set the shapes to snap to other shapes for a streamlined look. But there are no rulers and there’s not really a grid.
The biggest limitation to using Google Drive to wireframe is that the shapes available to you depend on which template you are using. For most of the templates I looked at, that makes them basically unusable.
To use another cliche, Rome wasn’t built in a day. Neither is your website or app. If you’ll be spending hours in your wireframing software, you want to be sure it’s the right one for your needs.
For my money, Lucidchart is the best free wireframe tool out there. It’s got tons of features, supports real-time collaboration even at the free level, and lets you build multi-page wireframes. However, it’s got a ton of options which can be slightly overwhelming to the new user.
If you don’t wireframe often, and you need something stupid-simple and easy-to-use, Wireframe.cc is your best bet. You’ll find most robust feature set on MockFlow, which is the most flexible free wireframe software available, as far as I know. However, unlocking the best of these features requires upgrading not just to the paid version, but to the most expensive level. So I’m not sure I’d recommend MockFlow if you’re dedicated to not spending any money.
Pencil is a great option for those who want to self-host, which is the only way to be sure your software is always going to be free (though the updates might not be). Whereas the free level of Lucidchart limits you to wireframes with 60 elements, with Gliffy you can create wireframes of unlimited complexity. But you can only make five of them. If your colleagues use Visio but you can’t afford to, Gliffy is your best bet.
Have you used any of these free wireframe tools? Leave a review and let others know what you think!
Looking for IT Management software? Check out Capterra's list of the best IT Management software solutions.