Wireframe tools: the top 10 solutions

Wireframe tools: the top 10 solutions

Create your next prototype the easy way with our guide to the best wireframing tools out there

Every website design has to kick off somewhere, and in most cases, this initial starting point comes with the creation of wireframes. Choosing the right wireframe software can be a complex business, depending on your needs. There are plenty of straightforward and user-friendly online wireframing tools that will sort you out with a quick prototype in no time at all, but if you want to create a more detailed site prototype, then you may be looking at shelling out a hefty wedge of cash to fulfil your needs. Whatever you desire from your wireframes, there is more than enough choice to provide you with what you're after. So, here are 10 of our current favourites for your delectation.

1. Omnigraffle ($99.95)

A longstanding favourite with the Mac community (it's not available for Windows), Omnigraffle makes it easy to create interactive wireframes using its intuitive WYSIWYG system. Although originally designed as a diagram creation tool, Omnigraffle's wide range of free stencils from the likes of Yahoo makes it an ideal solution for prototyping. A 14-day trial is available.

Download the Omnigraffle free trial

2. Axure RP ($589)

Boasting a client list that encompasses many of the most successful companies around, Axure RP is a one of the most comprehensive pieces of wireframe software around. Available for both Mac and PC, Axure makes use of widgets, custom libraries and master documents  to streamline the process of creating wireframes, while annotating tools enable you to insert descriptions wherever necessary.

Download the Axure RP free trial

 

3. Balsamiq Mockups ($79)

If Omnigraffle and Axure RP aim to be one-stop shops for your wireframes from start to finish, then Balsamiq Mockups is unabashedly for people who want a quick and dirty layout. Built on Adobe AIR, so you'll need to have this installed beforehand, Balsamiq Mockups places a variety of hand-drawn pre-built objects at your disposal, with which you can fashion the beginnings of a mighty web presence.

Check out the Balsamiq Mockups web demo

4. Mockingbird (Free)

What could be easier than dragging your intended page elements onto a blank page to generate your shiny new wireframe? How about doing it all online, without having to sign up first, and with the option to share your creations with a simple click? Mockingbird is still in Beta, so expect the odd glitch.

Check out the Mockingbird interface for yourself

5. Jumpchart (from Free)

Any tool with a website as gorgeous as this one has to be good, and Jumpchart thankfully delivers on its promises. It uses a different input method to any other wireframe software we've tried; instead of dragging and dropping on a WYSIWYG interface, you chose elements from a drop-down menu. In the editing view, things can get quite confusing, but when it comes to previewing your work, everything is as it should be.

Check out Jumpchart for yourself

6. ProtoShare (from $29/month)

ProtoShare is the professional option when it comes to wireframe software, with names like Sony and Motorola plastered all over their site. Collaboration is key, with discussion fields present in all wireframes, not to mention the lure of real-time collaboration. Throw in the usual drag-and-drop components, as well as the ability to use CSS and Javascript, and you have a monster of a wireframer. It'll cost ya, though.

Download the free ProtoShare trial

7. Lumzy (Free)

We know what you're thinking: what the world really needs is an online wireframing tool called Lumzy. Despite the baffling name, Lumzy actually delivers the goods, offering a totally free service that comes across as a much, much smaller Axure RP. It might not be one for the design purists, but the results speak for themselves.

Check out the Lumzy interface for yourself

8. HotGloo (from $7/month)

If online help, a straightforward interface and a nice, cosy atmosphere were the markers to perfect wireframe software, then HotGloo would romp home with every title. In fact, HotGloo delivers on every front, with object selection about as easy as you could imagine, as well as a host of other features which should make your wireframing life a whole lot easier.

Check out HotGloo

9. FlairBuilder ($24/month or $99/life)

The aims of FlairBuilder should be familiar to you now: give users the chance to quickly and easily build wireframes and prototypes. With a host of features and a very speedy interface, FlairBuilder does the job, and gains even more marks by allowing you to assign a vast array of interactions to any element on the page.

Download the FlairBuilder free trial

10. iPhone Mockup (Free)

No wireframe software round-up would be complete these days without a nod to the iPhone at some point. This dedicated online service allows you to create basic layouts for your iPhone apps or sites and, while it doesn't do much else, its iPhone wireframe tools are superb, with all of the standard interface elements at your disposal, as well as a choice between illustration or pencil effect.

Check out iPhone Mockup

21 comments

Comment: 1

I personally love Visio for wireframing. It's an extremely good product and with the addition of the GUUUI prototyping framework shapes & templates (a free download - http://www.guuui.com/issues/02_07.php), you can produce some really nice wireframes in there too. A nice feature is the ability to define a background containing all the elements common to multiple pages, allowing you to create multiple page mockups that follow a trend quickly & easily. Worth a look for the Windows users out there.

Comment: 2

+1 for Balsamiq.

I've tried a number of these products over the last few years (HotGloo, Mockingbird, OmniGraffle, Jumpchart), and I've finally landed on Balsamiq. I love it's simplicity and ease of use. It does one thing and it does that one thing well.

Their web-based product (myBalsamiq) also allows for online collaboration and easy communication for a team. It's a great tool.

Comment: 3

Heard great things about Balsamiq. Sometimes you can't beat a pen and paper. I know that's not practical for larger sites but it's more direct than any wireframe app.

Comment: 4

Mockflow is another good one - surprised it didn't make the list...

Comment: 5

If HTML export and reuse are of your concern, check out App Sketcher (http://www.appwork.com). It uses real html and jQuery UI components in design (no coding involved) so you can be sure that whatever elements and interactions in the prototype are web native and are realizable in downstream development.

disclaimer: I am the developer of this app.

Comment: 6

Thanks for including ProtoShare in your list of wireframing tools!

In building ProtoShare and continuing to update the application, flexibility has been important to us. Users can start with simple gray-box wireframes then evolve them into clickable prototypes, adding complex functionality to areas that are difficult to understand unless actually experienced.

But most importantly, the flexibility to work with your entire team (and other stakeholders) during the planning stages of website and web app development is what helps you gain the most benefit from the prototyping process. The feedback gained from others is stored in one place and pinpointed so you know exactly what they are referring to and can quickly move the project forward.

Great roundup,
Andrea
@ProtoShare

Comment: 7

My favorite is Cacoo and one of their options is a free account. The site is http://cacoo.com. There are lots of grpahics to use and even with the free account you can create your own and import or group them.

Comment: 8

WireframeSketcher is another rapid wireframing tool. You can create quick and dirty mockups, with that sketchy hand-drawn look. You can also link screens together to create interactive simulations. It's a commercial tool priced at $75:

http://wireframesketcher.com

Comment: 10

Useful round up Thomas,

All of these tools are really great for prototyping clickable experiences for people to get to grips with. However, during the really early stages of a project, where you're exploring your very initial ideas they all tend to feel a little clunky..

We've found that simple hand drawn sketches are a really great way to get started. Firstly, we find that it's great for exploring the initial narrative of a user experience, from a high level.

http://cl.ly/0l2T1a293e0Y270e390Z

It also allows you to explore multiple variations of a single idea, and compare them easily side-by-side to get a better understanding of how they work.

http://cl.ly/3I132x102F1f2g0S3x0s

We've also found that regardless of how approachable they may seem to us geeks, when working on review sessions with clients, trying to gather their comments, or getting them to suggest amendments there is still too much of a technical barrier for many people.

Using sketches makes collecting their comments and feedback really simple too. They don't have to understand how to use one of the wireframe tools, they need only pick up a pen or pencil and start doodling on top of our initial sketches.

http://cl.ly/1h3X2D432q2R1A3G0y1n

All of this is a really quick process, and allows us to explore our initial thoughts, determining which don't have legs and which do.

Once we have this initial concept sketched out, we can then progress to more elaborate prototypes, whether that's one of the tools you've discussed above or simple html based mocks.

Web developers are geeks, let's be honest. As a result we tend to focus our attention on the technology, when I think that sometimes, there are simpler and more elegant non-technical solutions to the problem.

Robert

Comment: 11

SirRawlins +1 (Where's the fecking Google-love button on this site?!)

Comment: 12

I'm glad you agree Dan.

I think a great number of people shy away from using hand drawn sketches, for a variety of reasons. Be it that they're worried about their artistic abilities, or just don't know where to start with that first pen stroke.

But what people need to remember is that you're only exploring very simple ideas, so artistic ability really isn't important. You're not creating a deliverable, the sketch itself isn't where the value lay, it's in the thought process you go through _while_ drawing which is the valuable part.

Robert

Comment: 13

There are many wireframing tool out there but if you look for something more sophisticated to not only wireframe but also simulate you should take a look at www.justinmind.com.

Comment: 14

Great wireframing tools! Another one is Keynotopia. Just released Free Twitter Bootstrap templates for use with Keynote, PowerPoint, and Open Office. http://keynotopia.com/bootstrap/

Great for rapid prototyping interactive wireframes that can be annotated, exported, and turned pixel-perfect with just a few clicks :)

Caroline
Keynotopia
http://keynotopia.com/

Comment: 16

Keynote and PowerPoint are excellent, no-code wireframing tools. Hooking up animations and slide transitions to objects in a slide can also make wireframes interactive prototypes.

I created http://www.windows8templates.com as a tool for wireframing and prototyping metro-themed Windows 8 web apps. If you are interested, drop me an email or reply to learn more or get a discount code from me.

Comment: 18

There are a ton of wireframing tools available these days and I think it is important to compare what features are most important to you and how much you are able to invest. This article http://www.greenhatwebs.com/mockflow-vs-axure-vs-balsamiq has a great side-by-side comparison of 3 of the top wireframing tools.

Comment: 19

This is an interesting list. Pidoco can be used to create interactive prototypes with collaboration and usability testing features. You can sign up for a free 31-day trial at http://www.pidoco.com Happy prototyping!

Comment: 21

Hey Thomas!

Wow, great lineup of tools above! I'm curious to know what you would think about InVision.

InVision allows you to test and gather feedback on design mockups in a whole new way.

With just a few clicks you can transform your static designs into fully interactive prototypes that you can use to gather feedback from your clients in real-time.

InVision is already used by some of the world's most favorite designers.

It's free, so why not try it out and let me know what you think.
-

P.S. People have been going crazy for the new t-shirt we designed, so we started giving it away for free.

Check it out: http://www.invisionapp.com/tshirt/

Thanks
Jeff
@InVisionApp
July issue on sale now!

The Week in Web Design

Sign up to our 'Week in Web Design' newsletter!

Hosting Directory
.net digital edition
Treat yourself to our geeky merchandise!
site stat collection