10 Completely Free Wireframing and Mockup Tools

February 23, 2011 by Paul Andrew GUI, Mobile, Resources, Web Apps, Web Design

The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user.
It is the most important, yet underused, stage of any web or apps development.

There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.

We have covered free wireframe apps before (here), but a year is a long time in web development – some of the apps we had previously covered are either no longer completely free or are no longer available. And as such, we felt that we should compile a new list with more detail and covering all areas of design including web pages, mobile apps and application dev.
As well as showcasing a variety of free apps (11 in total), at the bottom of the post, we have also highlighted some premium wireframing services that do offer free, yet limited, options. You may like to try them.

Please note that all of these apps have been confirmed as completely free on this articles publishing date.

Lumzy – Quick Mockup Creation and Prototyping Tool

With Lumzy, you can create mockups of how your site or application will function by adding events from the extensive list of controls on offer. As well as having great tools for creating your mockup, you can also create Message Alerts, interactive Page Navigation, add Links to external content, and much more. It does offer a great set collaboration tools for live team editing and a chat engine for deliberating over designs. All of this and it is absolutely FREE.
Lumzy Homepage →View Editor →

Lumzy Editor Screenshot

Mockup Builder – A Killing Prototyping App

Mockup Builder has just recenly been released and looks very promising. It is feature-rich and versatile by allowing you create various prototyping styles, including: UI mockups, interactive wireframes, website layouts, desktop software prototypes and even sitemaps & screen navigation.
Of course, it does come with great collaboration tools for sharing with clients and colleagues. And yes, it is completely FREE.
Mockup Builder Homepage →View Editor →

Mockup Builder Editor Screenshot

Tiggr – Creating Prototypes Collaboratively

The idea behind Tiggr (currently in beta) is to give you the resources needed to create prototypes (for web, app or mobile) that look and feel like the final product. It allows you to design from a large number of components, share (via email, Twitter or Facebook), you can collaborate with any number of users and will generate an HTML/JS/CSS so that you can preview your UI mockups very quickly. A 10 second registration (email & password) is the only thing you have to go through to use this fantastic FREE tool.
Tiggr Homepage →

Tiggr Editor Screenshot

Frame Box – Lightweight Online Tool for Creating Mockups

Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface. Again, this app is FREE and only requires a quick registration.
Frame Box Homepage →

SimpleDiagrams Free Edition (Adobe Air App)

SimpleDiagrams (free version) is a tiny Adobe Air app that helps you express your design ideas quickly and simply. Drag & drop symbols from its libraries, add images or post-notes, export as a PNG are all of its features, adding up to just just enough functionality to create a decent mockup.
SimpleDiagrams Homepage →

iPhone Mockup

With iPhone Mockup you have a choice of using either the Pencil styled editor (screenshot above) or the Illustration editor (screenshot below). Whichever editor you decide to use, the functionality remains the same: Its a very simple and easy to use app that allows you to create your own iPhone mockups very quickly, share them with other people at the click of a button, and any changes you make will by synced to everyone who has the mockup’s URL.
iPhone Mockup Homepage →Illustration Editor →Pencil Editor →

iPhone Mockup Editor Screenshot

fluidIA

fluidIA is a downloadable web based design tool for prototyping rich user interfaces. It allows for rapid refinement and exploration of concepts using an object-oriented approach to design. The original idea behind fluidIA is to discover whether a group of interaction designers, IA’s, UX professionals and developers can create there own prototyping tool in an open way. Progress on FluidIA has been a little bit slow recently, but the actual app works perfectly for designing a wireframe mockup.
fluidIA Homepage →Fluidia (GitHub) →

fluidIA Editor Screenshot

Pencil Project (Firefox Extension)

Pencil Project is a free and opensource Firefox addon for designing GUI prototypes. With its built-in stencils you can create linked multi-page UI documents and finally export your mockup in either HTML, PNG, Openoffice.org document, Word document or PDF. What more would you want from a wireframing app? This truly is an essential Firefox extension that any serious developer or designer should use.
Pencil Project Homepage →Screenshots →

Pencil Project Editor Screenshot

CogTool – General Purpose UI Prototyping Tool (Standalone Application for Win & Mac)

CogTool is a FREE and powerful general purpose UI prototyping tool with a difference – it automatically evaluates your design with a predictive human performance model (a “cognitive crash dummy”). You simply create a storyboard of your design idea with sketches, images or on a canvas with CogTool’s widgets, demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks. CogTool offers a lot of support via its extensive user guides, step-by-step tutorials (video and articles), its forum and also offers example files to help you get started.
CogTool Homepage →

Prototype Composer (Community Edition)

Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written. Instead of endless text entries, complex data hierarchies, or too technical UML diagrams, Serena Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high fidelity prototypes that simulate a working application. It is a tool for prototyping data, processes, activities and most importantly, user interfaces. The application also works as a fairly easy to use Project Management tool.
The Community Edition is its free version which allows users to work in a sample project as well as in one user-defined project.
Prototype Composer Homepage →

DUB – DENIM (Standalone Application for Win, Linux & Mac)

DENIM is a free desktop application that is available for Windows, Unix, and Mac OS X. DENIM describes itself as “an Informal Tool For Early Stage Web Site and UI Design”.
It combines many of the benefits of paper-based sketching with existing electronic prototyping tools. It allows designers to quickly sketch an interface, preserving the important properties of pencil and paper: a rough drawing can be produced quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified.
DUB – DENIM Homepage →

Premium Wireframe/Prototype Apps with a Free Option Available

All of the Wireframe/Prototype/Mockup web-based applications below are premium services that do offer a free, yet limited, option. You may like to try them:

You may also like…

An Introduction to HTML Prototyping →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
25 Free Pictogram and Symbols Sign Icon Sets →
Illustrator Template Toolbox for Web, Mobile and App Developers →
20 Free Web UI Element Kits and Stencils →

Tim

Awesome list! And timely, as I was just about to embark upon a new mockup. So… which one is the best?
- http://creately.com/desktop Rohitha
  
  Creately is awesome!
  
  Oh recently, they have released the desktop version.
  
  So now I can create my Mockups both online and offline!! :)
  - http://headwaymarketing.com/ Tanner Hobin
    
    +1 for Creately
    
    Nice list.
  - http://creately.com/ Nishadha Silva
    
    Thanks for including Creately to the list, we have recently released a completely new comprehensive toolkit specifically for iPhone mockups, this blog post covers most of the features ( http://creately.com/blog/announcements/iphone-mockup-tool-mockup-templates/ ) , Please consider promoting it to your followers :-)
http://amosrivera.com Amós Rivera

Very nice list, yet my favorite: Mocking Bird (which is not listed https://gomockingbird.com/)
- Taylor Lautner
  
  @2640408773c68933d5aa9a6e3b6384ac:disqus Mocking Bird is no longer free, hence the reason you do not see it in this article titled “10 Completely Free Wireframing and Mockup Tools”
John

Surprised that there’s no mention of my favorite – http://www.lucidchart.com. I’ve tried a number of the ones listed above and found Lucid Chart to be much better. A free plan is available.
- http://creately.com/ Nishadha Silva
  
  iPhone mock-up is a premium feature in Lucidchart, really shouldn’t be in the free list
http://flairbuilder.com Cristian Pascu

Hey, thanks so much for mentioning FlairBuilder.

We recently launched a new version of our website and are working on a very cool update. So check it out! :)

http://flairbuilder.com

Thanks,
Cristian
Susann

Cool list!
Don´t forget http://gomockingbird.com/ and http://hotgloo.com in your list. They also offer a Free Plan.

My favorite is Axure.
http://www.volkside.com/ Jussi Pasanen

Shameless plug: For something a bit different have a look at http://www.wirify.com/ – it lets you turn any web page into a wireframe in one click.
http://www.nxtwebsol.com Hastimal Shah

Nice to get the list on right time..
Thanks a lot
http://www.hotgloo.com Wolf Becvar

Hey Paul,

Thanks for the list. I know it’s hard to capture all tools, it’s nearly impossible, that’s why I’d like to add HotGloo to the list.

Suitable for all web workers looking for a web-based solution, who want to speed up the process and work collaboratively on their interactive wireframes.

Come and say hi, try the 30day free trial and see if HotGloo is the right tool for you.

http://www.hotgloo.com

Wolf Becvar
@HotGloo
- Mike
  
  Not “Completley” free so shouldnt be on the list
federico

What about Balsamiq Mockups. Excellent freemium app. Constant improvements from the dveloper and an active community behind it (mockupstogo.net)
Great article btw!!
Pingback: 10 Completely Free Wireframing and Mockup Tools | Spoon Usability
http://www.justproto.com/en/ Ewa

Hey.

How about including JustProto to your list?:)
Webbased, creating fully interactive lo-fi and hi-fi prototypes. Supports realtime collaboration and have live preview function.
Worth checking out, especially since its paying plans starts from $19/month (with 30 free trials). It has a free plan as well.
- http://www.justproto.com/en/ Me, myself and I
  
  Really good tool! Had problem at first with locating properties tab, bot then it was like “Facepalm, silly me! left sidebar!” and my work is sooo much faster now. I made few prototypes of an iPod app with it. a bit of imagination ad you’re ready to go. I also designed my wordpress theme with it. I was using free plan at first but I liked it so much that now I’m using Plus – realtime colaboration rox!
  a little tip for those who wanna try it: go to http://justproto/com/en/ and plan what to build with it first f.ex. simple login form or twitter interface. you’ll be surprised how addictive it can be.
  
  oh, and one more thing, Tbbt inspired app prototype is awesome! see it on their facebook page.
http://wireframesketcher.com Peter Severin

WireframeSketcher is a wireframe and mockup plugin for Aptana, Flash Builder, Cold Fusion Builder and other Eclipse IDEs. There is also a standalone version that can be used by less technical people. Take a look at it here:

http://wireframesketcher.com

Thanks,

Peter
@wiresketch
- Glenn
  
  Tool looks great, but it’s not free.
Pingback: La veille du week-end (dix-neuvième) | LoïcG
http://mobdis.com Patrick Boon

Really useful tools listed here! Great article! For web app designers who like working on canvases, MobDis could be another tool to consider. But unlike the tools listed, MobDis is a tool to create web apps without coding.
Pingback: Dohn » links for 2011-02-26
http://www.inkfreakz.com Inkfreakz – Tattoo Design

Awesome list
http://iamautocomplete.com angelee

Thanks for the list. But Im wondering which one is really suitable for a beginner like me. This month, Im looking forward to start using any of these tools, aside from photoshop of course.
- http://www.justproto.com/en/ Dann
  
  try JustProto :) easy, fast and reliable.
  - Guest
    
    Its not free though, so shouldnt be on here
http://www.animhut.com. Sri Ganesh.M

Thank for the information, some of them really useful. !!
http://hoffmangraphics.com Sheila Hoffman

I think I’m losing my mind. I was sure I had downloaded and stored a WordPress theme that would let you make a site’s wireframe structure. Now I can’t find it. This would be more to look at the site’s organizational structure more than for the page design. I think it took all the pages entered in and instead of applying a graphical look, it turned it into a site map so you could show a client how the site structure would be.

Have any of you ever seen anything like that? Thanks.
Traderbond

Greatss .. Thanks so much..
james@ http://bestpricecoffeemakers.com/
Pingback: 11个完全免费的线框图工具 | 刀侠剑客
Pingback: Website Wireframing and Mockup Tools - Best Web Design Tips | Best Web Design Tips
Anonymous

Wow, those JustProto people are really spamming this page aren’t they? :)
Kartofelek007

Yep. Very nice list. I check some program from this list. Mockup Builder and Pencil was very nice in use parallel they was veeery slow. In simple prototyping they very good program. But when we create some big layout we cant work on this “turtle-prog” :)
Pingback: 3 Resources for Planning and Discovering Interactive Projects | JavaScript HTML CSS
Pingback: What has you ripping your hair out sometimes in this business? - Page 3 - Expedite Trucking Forums
http://a.khavr.com/ Andriy Khavryuchenko

BTW, http://framebox.org/ doesn’t *require* registration. You can use it anonymously.
http://www.techload.com.br Criação de Sites

Awesome list.Thanks!
http://twitter.com/widodemarco Wido De Marco

Hi there, pretty nice tools. You forgot to mention Balsamiq, it’s another online wireframe/mock-up tool but it’s limited and paid for its full features. So I’ll be definitely trying these out.

Best wishes and thanks for the excellent info.wido
- Arsudhindra
  
  Hi Wido,
  But Balsamiq is not a free to use software :(
  - Irondoor
    
    Yeah it is, just have to click OK every 5 minutes…
Phil Sweeney

Tiggr - Not so Free anymore.
bbleo

This has been so helpful. Thanks for this article, Paul!
David Luu

SimpleDiagrams link is outdated. Correct one now is:

http://www.simplediagrams.com/download/free_1_3_5
Personally, I think I prefer the open source software options in this list. Looks like Pencil stands out to me.
Caroline Jeannot

Great list! I would add Keynotopia: Just released Free Twitter Bootstrap templates for use with your tool of choice (Keynote, PowerPoint, OpenOffice) to creative interactive wireframes (w/o writing code) that can be annotated, exported, and turned pixel-perfect with just a few clicks :) http://keynotopia.com/bootstrap/
FluidUI_Team

Check out Fluid UI http://www.fluidui.com. A new iPhone and Android prototyping web app. It’s got iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated transitions and on-device testing is a click away.

Cheers,
Ian
Shuzhi36

Hi Paul, I found a good mobile mockups tool named PaPaSketch, I think this tool is easy to use, so share this info at here, Could you please add to your list, maye this can help so many guys. The PaPaSketch’s site is http://www.papablue.com. Thanks a lot.
JustInmind

What about JustInMind? They just launched a new free version of Prototyper http://tiny.cc/Free-Prototyper
Rob

If all you want is to create an iPad mock up visual and drop a PDF into an iPAd surround quickly and easily then this is free and very handy: http://stonewash.co.uk/ipad
raj1982

Thums up for Mockflow here to. Like you say, it’s not entirely free, but $49 a year is reasonable for what you get.
Michael Rummey

I just signed up for a great little service called Prevue. It’s designed to show clients mockups rather than for wireframing but it does this very well. It’s free too! Get it here: http://get.prevue.it/89703
http://twitter.com/flaviusmatis Flavius Matis

If you’re looking for an online tool based on HTML5 & SVG, you should try Moqups as well.

Give it a free spin at https://moqups.com/
FluidUI_Team

Quick update for everyone: Fluid UI is now launched and live. Give it a try:
https://www.fluidui.com/editor
jusinB

there are lot’s of mockup tools and here other one.. http://mocknow.com