15 Best Wireframing Tools for Designers

September 4, 2011 · 44 comments

by Tom Walker

15 Best Wireframing Tools for Designers

15 Best Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough? Besides a rough, handwritten sketch, you should be creating wireframes for your own benefit and to aid in preliminary discussions with clients and team members. To create a successful wireframe, you’re going to need to use a good wireframing tool. We explore the 15 best online tools below. Online tools, as opposed to desktop applications, tend to be easier to use, cheaper and better for sharing your designs with colleagues and clients. Each tool in the list below performs several unique functions. Some are better for knocking up a mockup in a matter of minutes; others are better for building fully interactive, clickable, high-fidelity prototypes that look and feel like a proper website. Take some time to try out a few of these tools and find out which one’s right for you. Also check out this article with wireframe tools and tutorials.


ElegantThemes
ThemeForest

Advertisement

1. Cacoo (free)

Besides wireframes, you can use Cacoo, the online drawing tool, for creating sitemaps and network charts. It offers all the basic drawing features you’d expect alongside a vast collection of stencils. Cacoo’s major strength in relation to some of the other tools in this list is its ability to let you work on diagrams with other users, wherever they are, simultaneously, communicating with one another using the ‘Chat’ function.

1-cacoo

2. Balsamiq Mockups ($79 as a desktop app)

Balsamiq Mockups is one of the most popular wireframing tools out there and it’s easy to see why. With over 75 controls, 150 icons and 50 keyboard shortcuts to choose from, you really can create anything. One of its strongest features is ‘Quick Add’. Kind of like Mac’s Spotlight, users only need to type the first couple of letters of a specific control to select it. Elements added to your designs snap into place making everything look clean and professional.2-balsamiq

3. Mockingbird (free)

Safari, Chrome and Firefox users can make the most of Mockingbird’s exceptional prototyping abilities to make really straightforward wireframes without any unnecessary fuss. UI elements can be dragged and dropped into pages, separate pages can be linked together to give you a visual representation of a whole website and you can share your mockups with others simply by sending them a link.

3-mockingbird

4. HotGloo (from $14 per month)

HotGloo launched the latest version of its impressive online wireframing tool on 14th February 2010. People who have used it in the past should certainly consider giving it another go as much has changed. HotGloo has got to be one of the most attractive wireframing tools, but its performance is striking too. The editor is extremely user-friendly and creating custom elements, collaborating in real time and managing sitemaps is a breeze.

4-hotgloo

5. MockFlow (free)

MockFlow claims that it’s a faster way of creating wireframes than using a pen and paper. At first I was skeptical of this, but having now given it a go I’d be inclined to agree. One of the best things about MockFlow is that it lets you work on your wireframes online and offline. With no internet connection, using MockFlow desktop, you can work on your projects with all changes stored locally and optionally synced back when connection is regained. In stead of using a wireframing tool to design a website from scratch it is also a good option to see if you can find a minimal wordpress theme for your website or blog. There are a lot of options and minimal wordpress themes to choose from.

5-mockflow

6. Pencil Project (free)

Pencil is a free, cross platform, open source wireframing tool with a strong following. It’s available as a standalone tool or a Firefox add-on. The latest release (1.1) offers various new features including inter-page linking and the ability to export your wireframes to HTML, PNG, Openoffice.org, Word or PDF. Its stencils look superb and it’s really user-friendly. 6-pencil-project

7. Pidoco (from $9 per month)

Pidoco is a 100% browser-based app requiring no downloads whatsoever. With Pidoco, you can create wireframes that are interactive and clickable with stencils that link to other elements and pages. Different aspects of your design are held in layers, like Photoshop, so common elements can be kept for each page. Getting feedback on your wireframes is easy- simply choose which members of your team you want give access to and they can leave comments.

7-pidoco

8. Protoshare (from $29 per month)

Protoshare offers a higher level of functionality to most of the other tools explored here. You can make everything from the most basic wireframes to the most high-tech, interactive prototypes. As the tool is completely web based, team members can login from any computer to view and comment on your work. You can rearrange pages by dragging and dropping them in your sitemap, view prototypes as website diagrams and make sitewide changes in a couple of clicks. You can add styles, images, Flash, forms, RSS feeds and more to make your wireframes look and behave just like the real thing.

8-protoshare

9. iPlotz (free basic package)

iPlotz is a cross-platform wireframing tool that’s really easy to get to grips with. Its basic package, which lets you edit one project with a maximum of five pages, is completely free, so there’s no excuse not to give it a go. Drag and drop functionality, the ability to quickly upload your own images onto a page, and the facility to export pages as PNG, JPG or PDF, make iPlotz a pleasure to use. You can even invite other colleagues to view, comment on and edit your designs. 9-iplotz

10. Gliffy (free)

Gliffy is a great tool for creating wireframes quickly, but that’s not all it’s good for- you can use it to sketch flow diagrams, floor plans, network diagrams and much more. Such versatility means that its shapes and stencils are more diverse than usual. Embedding your designs into wikis, blogs and hosted apps is simple too.

10-gliffy

11. Jumpchart (free basic package)

Jumpchart is a collaborative website planning application tool which revolutionizes the way we plan our sites. Rather than focus on design, like most of the other tools explored here, it focuses on content, allowing you to order all the text, files and images you need for each page in a highly structured way. Jumpchart uses Textile, so there’s no need for any coding know-how.

11-paste

12. JustProto (free basic package)

JustProto is an excellent web-based tool for building prototypes of web and desktop applications. With JustProto, you can visualize your apps properly by creating interactive simulations before any coding begins. JustProto features a text editor and file manager, and every change you make is previewed instantly.

12-justproto

13. Creately (free basic package)

Creately can be used for working securely and collaboratively on pretty much anything visual, although it specializes in the creation of UI interfaces, flow charts, software and web designs. It features all the usual drag and drop, unlimited undo/redo and curved connections you might expect, but it’s particularly strong when it comes to comments. Click on a comment a colleague has made and you’ll be shown exactly which element of your wireframe they’re referring to.

13-creately

14. Lovely Charts (free)

Wireframing tools don’t come any cuter than Lovely Charts. It doesn’t have the technical abilities of some of other tools, but it’s free and wireframes made on it look really stylish and original. It’s perfect to use when working with a certain type of client- perhaps one that’s more interested in design over functionality. Easy and sexy (its words, not mine), Lovely Charts makes designing wireframes that little bit more fun.

14-lovely-charts

15. Templatr (free)

A lot of people would not consider Templatr to be a wireframing tool, but it’s actually really handy for creating mockups. Simply choose the layout you want, upload any images and customize it to suit your exact needs. It’s simple, but very effective and free! This is a guest post from Tom Walker who blogs for a supplier of ink next day in the UK. He blogs on the CreativeCloud about media design and advertising.

15-templatr

Author : Tom Walker

Tom works at CartridgeSave.co.uk, a supplier of printer cartridges based in the UK. Click here to read more of his work.

We offer best quality HP0-P14 test papers and 642-481 prep materials. You can get our 100% guaranteed HP0-S27 dumps to help you in passing the real exam.

{ 34 comments… read them below or add one }

Raffy November 27, 2012 at 4:42 am

Nice collection of wireframing tools. I haven’t tried ‘em all, but I’ve noticed that iPlotz also offers tutorials on basic and advanced wireframing. Here is the link: http://iplotz.com/helpvideo.php

Reply

Carrie July 20, 2012 at 1:59 am

Great info on the top wireframing tools! I found this article really helpful: http://www.greenhatwebs.com/mockflow-vs-axure-vs-balsamiq. It compares a lot of the features of the three of the top wireframing tools in an easy-to-read chart.

Reply

Jack July 18, 2012 at 8:48 am

Hey,

That is indeed a great collection of tools! I was personally looking for a free tool so I decided to give Gliffy a shot and I’m not regretting it.

Reply

Marcin June 28, 2012 at 12:29 pm

Tom, months ago I was thanking you for including JustProto. This time I’d like to let you know about another very interesting project. Have you ever heard about http://www.uxpin.com/ ? I guess this is the only tool on the market that connects 2 methods of prototyping: paper and digital. I hope you will find it interesting!

Reply

laura May 23, 2012 at 12:24 am

great list! what about omnigraffle?

Reply

Java Tools May 17, 2012 at 1:09 am

I just love balsamiq, and have been using it for quite some time. Quick and handy updates with adobe air and the png export is best feature.

Reply

Peter Drinnan April 27, 2012 at 1:48 pm

Pencil Project has come a long way since this article was written. I have been am using Balsamiq and SmartDraw( not mentioned in the list above) but will start using Pencil Project for basic mockups.

Reply

James March 25, 2012 at 2:04 pm

Anyone know of a program which converts pre-made html pages into wireframes?

Reply

goldesmhark July 19, 2011 at 9:04 pm

Nice list, thanks.

You can check also http://uireframe.com/

Reply

Plinio Theodoro June 9, 2011 at 11:49 pm

Very nice. Tks for the post.

Reply

Snrky May 28, 2011 at 4:45 am

Good list…I like that it’s a mix of free and not free. I’ve only tried Pencil before, so it will be nice to try a few others and see if one fits me better.

Reply

Kile April 8, 2011 at 4:17 pm

I’d like to suggest one more free wireframing/design online service- my.origramy. The thing, that I liked about it is, that you can also download its flash “engine” to use on your own.

Reply

pixelbob February 18, 2011 at 11:44 am

Hi, I’ve got another one you should add to the list, softandgui – UXToolbox (www.softandGUI.co.uk). It was written by a friend of mine. It’s really good for wireframing, prototyping producing documentation. Deff worth checking out. :-)

Reply

Ewa February 18, 2011 at 11:10 am

With JustProto you can prototype not only your websites. you can also prototype iphone and ipad and android apps. good tool.

Reply

adsl fpt January 22, 2011 at 11:57 pm

Hey Tom, you’ve made a nice article but could you tell me more about Wireframing Tools? Is it mandatory for me for my web design project?

Reply

Lars January 23, 2011 at 10:57 am

Hi adsl, It is not mandatory in any way but for making yourself working more efficiently and becoming more effectively in communicating with clients it is a great choice. You see wireframing abstracts the design to a logical level where you can model it and change it fast (even live at a customer session) to reflect the costumer needs. This also makes it easy to make an agreement with the customer… OK so we agree this is how I gonna deisng it and that I can get started now? Remember any change form here may change the price and time plan…. and so on…. The alternative is starting with the design directly and then you risk wasting time on creating goodies that are not right and hard to change as customers get new ideas…

Reply

adsl fpt January 25, 2011 at 12:47 am

Wow, really interesting, thank you for your information, Lars :)

Reply

Brett Widmann December 3, 2010 at 3:52 am

This is a great set of tools. These should really come in handy. Thanks for sharing.

Reply

Joshua September 2, 2010 at 8:12 pm

Has anyone seen anything for Joomla or Drupal?

Reply

InkRaider July 12, 2010 at 5:26 pm

Hi,

Nice list and very useful. Does Cocoo create sitemap of site containing more than 1000 pages? Because I know none of free tools create such long sitemap.

Thanks

Reply

hermes handbags July 9, 2010 at 11:28 am

Thanks for including ProtoShare in your detailed list of wireframing and prototyping applications! You pretty much covered all that we do, but I would also like to point out the ability to export to HTML and add your own custom widgets through the use of HTML, CSS, or Javascript.

Reply

Marcin @ JustProto April 19, 2010 at 11:54 am

Tom, thank you for including JustProto on your list. Please email me if you’d like to get an account for yourself – I got something extra for you :)

Best,

Marcin

Reply

Andrea at ProtoShare April 16, 2010 at 1:10 am

Hi Tom,

Thanks for including ProtoShare in your detailed list of wireframing and prototyping applications! You pretty much covered all that we do, but I would also like to point out the ability to export to HTML and add your own custom widgets through the use of HTML, CSS, or Javascript.

Great list; there is certainly an application out there for everyone!

Cheers,
Andrea
@ProtoShare

Reply

Peter Severin April 15, 2010 at 1:49 pm

Another wireframe/mockup tool is WireframeSketcher. It’s a plugin for Eclipse-based IDEs like Aptana, RadRails, Zend Studio, Flash Builder and others http://wireframesketcher.com

Reply

tripwire team April 15, 2010 at 5:51 pm

@Peter, thanks – great tip. I’m gonna check it out

Reply

Ian Ryde April 15, 2010 at 10:44 am

Great list, Axure surely needs to be added though?

Reply

Keith Kmett September 1, 2011 at 9:52 pm

100% agree – Axure RP now supports team collaboration and is better than a lot of these tools.

Reply

Lena Tailor | DT April 14, 2010 at 7:50 pm

Exactly what I needed, was yesterday looking for a good tool to wireframe more easily..

thanx, lena

Reply

Etienne April 14, 2010 at 3:59 pm

Insightful post, and surely useful for many! However i´d like to add Justinmind Prototyper, an easy to create wireframes and change them into functional (& dynamic) website prototypes without coding.
http://www.justinmind.com

Reply

skyje April 14, 2010 at 3:03 pm

amazing design tools especially free tools

Reply

Victor Conesa April 14, 2010 at 2:57 pm

Hi Tom,

Great list, I’m sure it must have been a big effort just to choose 15 tools. I presume the criteria has been the price and the ease of use over the features. I just want to mention that there are other tools that make a step forward and not only draw wireframes (what in fact I think the best tool is omnigraffle) but also allow to transform that wireframe into an interactive prototype. Justinmind Prototyper is IMHO the best one, you can see a review here http://www.uxmatters.com/mt/archives/2010/01/product-review-justinmind-prototyper.php

Reply

Marissa October 18, 2012 at 4:50 am

And its free! (just found that out) : )

Reply

Sachin @ Web Design Bureau of Mauritius April 14, 2010 at 1:55 pm

I’ve been testing a lot of free wireframing tools lately and I settled down for Pencil. It is quite a good and useful app and has great tools for work, especially the possibility of exporting a whole scenario with pages included. Really worth the try.

Reply

odaddy April 14, 2010 at 9:28 am

really cool thanks :). To add to your list check http://lumzy.com/app/
free app and its awesome.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 10 trackbacks }

Previous post:

Next post:


Web Analytics