Capterra IT Management Blog

Software, technology, and management insights for IT professionals

5 Awesome Free and Open-Source Wireframe Tools

Share This Article

0 0 0 0 0 0

Capterra Affiliate Linking Policy

Capterra’s blogs aim to be useful to small business software buyers. Capterra participates in vendor affiliate, referral, and pay-per-click programs where available. This means after a content piece is written by our researchers, our affiliate manager converts existing mentions of vendors into affiliate links where possible and adds PPC links where appropriate. When readers click on those links, sometimes we make a small commission and when they make purchases, sometimes we earn an affiliate fee. That said, we do not accept free products or services from vendors in exchange for mentioning them on the site.

No Capterra blogs or blog posts are sponsored by vendors; further, our writers independently choose which vendors to cover and what to write about them. In fact, most of our writers are unaware of Capterra’s affiliate relationships.

If you have any questions about Capterra’s affiliate policy, including our impartiality or how to get your affiliate links on our editorial content, please email cathy@capterra.com.

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.

1. Lucidchart

2013-05-23_0806

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.

Speaking of Google Docs, they’ve created a Chrome add-on that makes it easy to add a Lucidchart diagram to a Google Doc (including, as of earlier this year, Google Sheets).

Browse through a variety of shapes and templates for UI containers, menus, widgets, and more, or import your own elements directly.

The free trial is indefinite and requires no credit card. Upgrading is inexpensive and unlocks features that include Visio import and Google Apps for Work integration.

aUEtfVo

5y69432

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.

2. Wireframe.cc

4

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.

hoDt6tX

GNW3yQm

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

3. MockFlow

WF-editor

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.

IrycM6J

23jWWXc

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

4. Pencil

home-ss

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).”

5. Gliffy

network-diagram-satellite

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.

55RsoCX

H5KrMKz

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

Bonus: Google Drive

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.

Conclusion

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.

Share This Article

About the Author

Cathy Reisenwitz

Cathy Reisenwitz helps B2B software companies with their sales and marketing at Capterra. Her writing has appeared in The Week, Forbes, the Chicago Tribune, The Daily Beast, VICE Motherboard, Reason magazine, Talking Points Memo and other publications. She has been quoted by the New York Times Magazine and has been a columnist at Bitcoin Magazine. Her media appearances include Fox News and Al Jazeera America. If you're a B2B software company looking for more exposure, email Cathy at cathy@capterra.com . To read more of her thoughts, follow her on Twitter.

Comments

Cathy – thank you for providing this review of open-source wireframe tools. I am unashamedly new to the process but want to develop an application that allows others in my profession to benefit from the many years experience I’ve developed in my field of expertise.

I like the sound of Pencil, since it’s the tool I mostly use in the beginning to express and illustrate my ideas, so this will be my first choice. And if I find it wanting I would migrate to Lucidchart.

To anyone reading Cathy’s review who happens upon my comment, please feel free to share with me your experience with either of these tools.

I’m sorry but LucidChart, Mockflow, and Wireframe.cc are not “free and open source”. If the source code is not available, then the software is NOT “open source”

Also see: https://www.gnu.org/philosophy/free-sw.en.html

I like MockFlow.. But what about Pingendo.. Its open source and free..

We published a similar, updated version of this post, containing 20 mockup tools. Could be a great addition to this one 🙂

Link: http://codingsans.com/blog/mockup-tools

I don’t think you know the definition of neither open source, nor free as different as these two terms can be when compared to each other directly.

I tried using Lucidchart, even something as basic as grid is part of the paid version. . .it’s not free!

Comment on this article:


Your privacy is important to us. Check out our Privacy Policy.