Ultimate Guide to Website Wireframing

Nov 1 2010 by Cameron Chapman | 95 Comments

Ultimate Guide to Website Wireframing

Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects.

Wireframes can come in handy when you’re communicating with clients, as it allows them to visualize your ideas more easily than when you just describe them verbally.

This guide covers what you need to know about website wireframes to get started.

Why You Should Wireframe Your Web Designs

Wireframing is really the first step in the design process. Unless the site you’re designing is incredibly minimal and simple, wireframing helps clarify exactly what needs to be on the different page types of your website.

Why You Should Wireframe Your Web Designs

By taking the time to create at least a simple wireframe, you can make sure that your designs will take into account all the different page elements that need to go into the design, and that they’re positioned in the best possible way.

Wireframes are also cost-effective by saving you potential time lost due to revising a high-fidelity comp. Wireframes can easily be revised or discarded.

Wireframes give your page layouts a great starting point and a solid foundation.

Wireframe vs. Mockup vs. Prototype

Wireframes, mockups, and prototypes are sometimes used interchangeably, but they are three different things (though there is sometimes some overlap between them). Each one has a slightly different purpose that it gives to the design process.

Wireframes are basic illustrations of the structure and components of a web page. This is generally the first step in the design process.

Mockups generally focus on the visual design elements of the site. These are often very close or identical to the actual final site design and include all the graphics, typography, and other page elements. Mockups are generally just image files.

Prototypes are semi-functional webpage layouts of a mockup/comp that serves to give a higher-fidelity preview of the actual site being built. Prototypes will have the user interface and is usually constructed using HTML/CSS (and even JavaScript for showcasing how the front-end interface works). This stage precedes programming the business logic of the site. While they might not have full functionality, they generally give clients the ability to click around and simulate the way the site will eventually work. Prototypes may or may not also include finalized design elements.

Wireframe vs. Mock Up vs. PrototypeRough sketch of user interface flow on a mobile app. Image by Fernando Guillen.

Wireframes come first. What follows — either prototypes or mock up models — is largely going to be dependent on the type of site you are building. If it’s a web app rather than a simple static website, it’s likely going to benefit from prototyping.

How to Create a Wireframe

Creating a wireframe can be as simple or as complicated as you want. In its most basic form, your wireframe might be nothing more than a sketch on some graph paper. Other "wireframes" are created digitally and are really more like prototypes, with clickable objects and limited functionality.

The type of wireframe you create will depend on what the individual project requires, as well as what your own workflow is like. More complicated projects will likely have more complicated wireframes, while simple sites might have simpler wireframes.

What to Include in a Wireframe

Your wireframes should include enough information to reflect what needs to appear on each page of your website. Think about the general elements of most web pages: headers, footers, sidebars, and content areas.

Then think of additional elements your specific project will have: dynamic widgets, basic site features such as search bars and navigation, graphics, and so forth.

Once you have an idea of what your site will include, start creating your wireframes based on those elements.

How detailed you want to get will again depend on the project and the purpose of the wireframe. If your wireframe is just going to serve as a guiding document for your own reference, then you don’t want to get too involved in the wireframing process. On the other hand, if it’s going to be used by more than one designer or developer, or presented to your client, then it needs to be more formal.

Low-Fidelity vs. High-Fidelity Wireframes

You have a couple of options when it comes to the style of your wireframes. Some designers opt for low-fidelity (low-fi) wireframes that are basically just lines on a plain background with some labels. These include both hand-drawn and digital wireframes, and they’re usually very simple.

An example of a low-fi wireframe for a web appAn example of a low-fi wireframe for a web app. Image by Paul Downey.

High-fidelity (hi-fi) wireframes go one step further, using certain design elements within the wireframe. This might include the logo or some other basic graphics, as well as the color scheme and other visual design elements.

Wireframes like this start approaching the level of mockups, but they can be invaluable in conveying a sense of what the website will look like, especially to clients who might have a hard time visualizing what a website will look like based on a low-fi wireframe.

Wireframing Techniques

There are dozens of different ways to create wireframes, ranging from simple, pen-and-paper sketches to more complex diagrams that look almost as polished as production websites.

There are also different approaches to the purpose and reasoning behind creating wireframes, depending on the needs of individual designers and projects. Here are some resources about different procedures for creating website wireframes.

Wireframing with InDesign and Illustrator

Wireframing with InDesign and Illustrator

UXmatters has a great article on how to wireframe using Adobe InDesign and Illustrator. They talk about what led the to the decision to use InDesign and Illustrator over other products, as well as how they go about using these two applications to create their wireframes.

Grey Box Method

Grey Box Method

Jason Santa Maria has a fantastic post about the "Grey Box Method" of creating wireframes. He outlines his entire process for creating wireframes, from sketching on paper to creating a grayscale wireframe in Illustrator. He includes examples from a couple of different sites to illustrate his points.

The Future of Wireframes

While this post isn’t dedicated entirely to the process or method of creating wireframes, it does include some valuable information on both, especially in terms of how to make the wireframing process better for designers, developers, and site owners.

20 Steps to Better Wireframing

This post from Think Vitamin lays out in 20 steps exactly what you should be doing to create awesome wireframes. It’s a fantastic post to check out whether you’re completely new to wireframing or just unhappy with your current process.

The Wireframing Process

While it varies for everyone, there are a handful of fundamental steps to creating a wireframe.

You’ll likely start out with a list of things the site needs to include or a formal design specification document. Some designers might dive right in from there, ticking things off their list as they add them to the wireframe, either in an app or on paper.

Others like to start out with a "big picture" look at the overall design, adding details in once they’ve got the basic layout foundations pinned down.

Whether you decide to sketch things out on paper or work with software initially, don’t rule out either method. Some designers make rough sketches on paper and then move over to software to create more polished wireframes. Others go straight for the software. Still others stick purely to paper wireframes.

Just remember that if you get stuck, changing formats can work wonders for your creativity.

You’ll probably want to try a few different ideas in your wireframes before you settle on one design. Wireframing is the best stage to do this, as you have the least amount of time and energy invested and can more easily make changes and try new/experimental things.

Once a basic wireframe is created, you may send it around to other team members for feedback or put it away for a day or two to review again.

Once you’re happy with it, it’s time to either share it with the client for feedback or to start working on mockups based on the wireframe.

The Wireframing Process

Tools for Wireframing

There are many great tools for wireframing available at your disposal. Some are specifically made for wireframing, while others are more general-purposed but work particularly well for the task.

The tools you decide to use will depend on personal preference and project requirements. There is no "best" tool for wireframing; it’s whatever you’re comfortable using and whatever works for you.

Pen and Paper

Pen (or pencil) and paper are the most basic tools you can use to create a wireframe. Graph paper works particularly well, as it allows you to create relatively clean wireframes without having to break out a ruler. It’s also useful to have grid lines to create elements in proportion.

Pen and PaperA sketch on gridded notebook. Image by John Manoogian III.

You might want to use a pencil for your initial sketches, so you can erase things without having to start over. Then, as you finalize different parts, you can trace over them with a pen to prevent erasing the wrong elements.

You may even consider using colored pens and pencils to differentiate between elements or to add more meaning to your wireframes by color-coding things; for example, one color for a group of elements can be helpful, as it helps instantly identify items within your wireframe as they’re moved around on different page layouts.

Wireframe using Post-it notes.Using Post-it notes for quick prototyping. Image by Richard Dallaway.

Using Post-it notes/sticky notes in your paper wireframing process makes it easy to rearrange different design elements without having to re-sketch the whole thing.

Web-Based Tools

Web-based wireframing tools almost always include the ability to share wireframes with other team members or clients. They also have the added advantages of being accessible from anywhere and being cross-platform compatible. Following are a few examples of browser-based wireframing tools.

Mockingbird

Mockingbird wireframing tool

Mockingbird works in Safari, Firefox and Chrome and has a number of unique features. One of the better time-saving features is that it has automatic text resizing: If you change the size of a button or similar element, Mockingbird changes the text size to match. It also lets you create multi-page wireframes with links.

Lovely Charts

Lovely Charts wireframing

Lovely Charts can be used for wireframes or a variety of other charts. It has an intuitive, drag-and-drop drawing interface, which makes it incredibly easy to use. It also makes assumptions based on the type of chart you’re creating, to help you create charts faster.

Cacoo

Cacoo wireframing

Cacoo is another free online wireframing tool that uses drag-and-drop elements to speed up the wireframing process. It includes publishing options for your wireframes that lets you share them publicly with anyone who knows the URL, though editing and managing of wireframes is all handled through an SSL connection for privacy.

Lumzy

Lumzy wireframing

Lumzy can go beyond just wireframing and into a fully-featured prototyping tool that lets you add events to controls, put controls inside other containers and emulate the finished project with triggers caused by user actions. It also includes live chat, real-time collaboration and an image editor.

Jumpchart

Jumpchart wireframing

Jumpchart works for both wireframing and prototyping, with plenty of tools for showing page hierarchy and relationships between pages. There’s a free plan that allows for up to two projects and two collaborators. Jumpchart also lets you export your finished prototype to WordPress (with the paid version).

Balsamiq Mockups

Balsamiq Mockups wireframing

Balsamiq Mockups aims to reproduce the experience of sketching wireframes, and because the end results look more like sketches than formal designs, it maintains the metaphor of sketching out a wireframe on paper. Balsamiq Mockups has plenty of collaboration and sharing tools as well.

Google Drawings

Google Drawings wireframing

Google Drawings is just starting to gain some traction as a viable wireframing app. It’s part of the Google Docs suite of software, and is completely free to use. It works similarly to other online drawing apps, with predefined shapes and the ability to add text. What really makes it useful, though, is that there’s a set of templates (from Danish UX designer, Morten Just) specifically for Google Drawings that you can use to create website wireframes. Drawings also lets you work collaboratively with multiple people, and even allows sharing your drawings publicly online.

JustProto

JustProto wireframing

JustProto is designed for prototyping of web and desktop apps, though it can also be used for wireframing websites. It includes over 200 icons and banners you can use in your wireframes and you can create master pages to use as a framework to avoid repetitious work. There’s a free plan available that lets you manage one project, while paid plans start at $19/month.

Creately

Creately wireframing

Creately is a diagramming app that includes a library of objects and shapes and a drag-and-drop drawing interface. It includes a variety of collaboration tools, including versioning and short URL publishing.

Desktop and Hybrid Apps

Most desktop wireframing apps have some way of sharing wireframes between team members, although it sometimes requires others to download special software, or wireframes are just shared as flat images, which makes team editing much more difficult.

Hybrid apps, on the other hand, generally have both online and offline modes, offering the best of both worlds.

MockFlow

MockFlow wireframing

MockFlow is an online/offline hybrid app that lets you create and collaborate on wireframes. It includes a large library of mockup components ready for you to use, as well as a variety of publishing options (including PDF and PowerPoint export). The free plan allows for one mockup with up to four pages and two collaborators.

iPlotz

iPlotz wireframing

iPlotz is another online/offline hybrid that has a downloadable desktop client. It has both collaboration and project management features, making it a great choice for teams. The online version includes a free plan as well as paid plans; the desktop app is $75.

Pencil

Pencil wireframing

Pencil is a Firefox plugin for creating wireframes and prototypes. It includes an on-screen text editor (with rich text format support), export to HTML, PNG and other file formats, built-in stencils, and more. Because it’s a Firefox plugin, it’s operating-system-independent. There are also standalone builds of Pencil for Linux and Windows.

Prototype Composer

Prototype Composer wireframing

Prototype Composer is a web app prototyping program. It lets you build usable applications that closely mimic the experience your end-users will have, all with a graphical UI that doesn’t require coding knowledge. There are Professional and Community (free) editions available.

HTML Wireframes

The big advantage to using HTML and CSS for your wireframes is that you’re giving yourself a head-start on coding your actual pages. The downside is that it’s easy to get sucked into actually designing and coding the site, rather than just creating a quick wireframe. Your wireframe can very quickly become a mockup or full-fledged prototype much earlier than it should.

But again, wireframing with HTML does give you a head start on the design and coding process. If you can resist the urge to do too much, it’s a fantastic option. To learn more about HTML-based wireframing, check out the following article:

HTML Wireframes and Prototypes: All Gain and No Pain

HTML Wireframes and Prototypes: All Gain and No Pain

This article on Boxes and Arrows, a leading site on the subject of design, discusses the benefits of wireframing and prototyping using HTML.

Wireframing Templates

Using templates and stencils for your wireframes can greatly speed up the process, especially if you opt to use pen and paper for wireframing, or programs that weren’t specifically created for wireframing (like Adobe Illustrator). Below are more than a dozen templates and stencil kits, all free to use.

OmniGraffle Wireframe Stencils

OmniGraffle Wireframe Stencils

This OmniGraffle stencil set from Konigi includes pretty much any UI element you might need, including browser chrome (borders around a web browser window), controls, basic shapes, tabs, video players, and more.

Free Web UI Wireframe Kit

Free Web UI Wireframe Kit

Fuel Your Interface offers this free wireframe kit that includes a variety of UI elements, including buttons, breadcrumbs, dialog boxes, and more.

Yahoo! Developer Network Design Stencils

Yahoo! Developer Network Design Stencils

Yahoo! offers these free UI stencils for a variety of applications, including OmniGraffle, Visio, Adobe Illustrator and Adobe Photoshop. The stencils include everything from grids to ad units to menus and buttons.

Wireframe Symbols

Wireframe Symbols

This wireframe kit from Johnny Nines includes a variety of shapes and elements, like buttons, headings, lists, and tables, for creating wireframes in Adobe Illustrator.

6 Pages Template

6 Pages Template

Here’s a printable stencil for hand-drawing wireframes that includes six browser windows, plus space for notes.

Free Sketching & Wireframing Kit

Free Sketching & Wireframing Kit

Janko at Warp Speed offers up this set of sketched wireframing stencils, available in a number of file formats: Adobe Illustrator, SVG, PDF and EPS.

Grids for Sketching

Grids for Sketching

Ben Martineau has released this set of grids for sketching wireframes. Included are 16-column, 12-column, 10-column, 5-column, 4-column and 3-column grid structures.

A4 Sketching Paper

Prolonging the Magic...A4 Sketching Paper

This sketching paper template includes a basic grid with browser chrome and an area on the side for your notes.

Sqetch

Sqetch

Sqetch is an Adobe Illustrator toolkit that includes a number of templates and elements, including iPad and browser chrome, GUI elements, and form elements.

Wireframe Template

Wireframe Template

Here’s a very basic wireframe template, with space for sketching, and title, and notes.

Konigi Graph Paper

Konigi Graph Paper

Konigi offers a few different printable graph paper templates, including a storyboard (with and without notes), portrait and landscape wireframes, and a wireframe with notes.

Dragnet Website Wireframes Kit for Adobe Fireworks

Dragnet Website Wireframes Kit for Adobe Fireworks

Dragnet offers this free wireframe stencil kit for Adobe Fireworks that includes a variety of UI elements like buttons, drop-downs, and tabs.

Free Wireframe Stencils for Keynote

Free Wireframe Stencils for Keynote

Here’s a great set of wireframe stencils for Apple’s Keynote program. It includes all the basic UI elements you’d expect to find: buttons, modal windows, tabs, headings, dialog boxes, and more.

Using Wireframes to Think Through a Design

Sketching out wireframes can be a great way to think through the design of your website without spending hours working on mock-ups in Photoshop or coding preliminary designs. Wireframing can let you work through a number of design and layout ideas quickly and at little cost but your time.

Using Wireframes to Think Through a DesignWireframe sketched with pen on grid paper. Image by John Manoogian III.

Take a look at the design specification documents you have that tell you exactly what elements you need on the site. Then just dive in and start arranging them on the wireframe. Don’t be afraid to try non-traditional things at this stage. Remember, it’s just a wireframe. A mistake or a failed attempt at this point isn’t going to set you back drastically. Crumple up the piece of paper, chuck it in the recycling bin, and then start over. Release your creative inhibitions at this stage.

Wireframes as a Project Deliverable

Presenting wireframes to your clients can be a valuable way to make sure everyone is on the same page prior to creating the actual design mockups. It’s much easier to change around the position of elements on the page when you’re working with wireframes than it is with Photoshop designs or coded pages.

Wireframes as a deliverable also displays the craftsmanship you put in your work. Be sure to, however, bill appropriately for the additional time that wireframes tack onto your design process.

Of course, if you’re going to be using your wireframes as deliverables, you’ll want to make sure they’re professionally devised and not just scribbled on some plain paper or the back of an invoice (unless your client expects it to be that way).

The tools we already mentioned above can all work to create more professional-looking wireframes for showing your clients.

Polished vs. Sketchy

One of the biggest considerations when creating deliverable wireframes is how polished they should look. There are generally two schools of thought on this.

One viewpoint of the "polished vs. sketchy" debate asserts that anything going to a client should be as polished and formalized as possible.

The other viewpoint argues that offering the client a polished wireframe makes them less likely to request changes because things feel more "finalized." In other words, sketch-style wireframes feel less formal and are more likely to get honest feedback.

There are pros and cons to either approach. Polished wireframes can often help a client better visualize what the site’s layout will eventually look like. Adding in things like color or minimal graphics can go even further toward this end. However, you run the risk that your client won’t offer honest feedback because they feel the project is too finalized already.

Polished vs. SketchyExample of a polished wireframe. Image by Rodrigo Teixeira.

On the other hand, sketchy wireframes come across as more like "rough ideas" and seem more inviting to client feedback. The downside here is that clients who aren’t particularly visually oriented or creative, or who lack familiarity with what website wireframes are, may have a hard time imagining what their site is going to look like or might be confused as to why their site looks like it was hand-sketched.

A sketchy-style wireframeA sketchy-style wireframe that is good as a project deliverable. Image by Aaron T. Travis.

Combining both polished and sketchy wireframing styles may work best for some. You could also use sketchy wireframes combined with a mood board that gives an idea of how the color scheme, textures, typography, and other visual elements will look.

Wireframing Resources

To conclude this guide, here are a handful of web resources dedicated to design wireframing for you to peruse.

I ♥ Wireframes Flickr Group

I Heart Wireframes Flickr Group

I ♥ Wireframes is a Flickr group that showcases a wide variety of wireframes from designers around the world. They currently include more than 780 wireframes and have over 1,800 members.

I ♥ Wireframes Tumblr

I Heart Wireframes Tumblr

This Tumblr blog showcases outstanding wireframes from all over, and is also associated with the I ♥ Wireframes Flickr group above.

Wireframe Showcase

Wireframe Showcase

Wireframe Showcase is a gallery site that features wireframes alongside the completed designs they represent.

Wireframes Magazine

Wireframes Magazine

Wireframes Magazine covers all things wireframe-related, including tons of stencils and wireframing templates, as well as examples and inspiration.

Web.Without.Words

Web.Without.Words

Web.without.words takes a sort of antipodal approach to wireframing, showing a different popular site each week and reverse-engineering a wireframe for it by blocking out the actual content.

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

95 Comments

paul

November 1st, 2010

cool guide! I use balsamiq for the mockups.
one app you didn’t mention is hotgloo, I’m using it with a client on a current prject.

Ryan

November 1st, 2010

These are great, always nice to see how other people do their wireframes. Thanks!

Young

November 1st, 2010

Amazing! I personally stick to pen and paper, cuz I like to try a bunch of design ideas and see how it’d interact with content. But why didn’t I think of using post-its before?? Gah!

For electronic wireframing, however, the vector kit is awesome. I’ll play with it on my next project for sure.

Coworker Quotes

November 1st, 2010

Great article!

The downside of using Balsamiq; clients end up liking Comic Sans so much that they want to use it in their live site!

Immobilier

November 1st, 2010

I personnally love Inkscape, to create wireframes in svg, helped by stencils files released by yahoo : http://developer.yahoo.com/ypatterns/about/stencils/

Cristian Pascu

November 1st, 2010

Hey, an wireframeing tool that you should also checkout is http://flairbuilder.com

Has lots of builtin controls and nice interactivity support.

Thanks the great article,
Cristian

Andrea at ProtoShare

November 1st, 2010

Cameron,
Excellent article on wireframing and prototyping. The stages of development and fidelity of wireframes and prototypes completely depend on one’s needs and comfort level. And one’s needs can change with different projects in how far they need to take their wireframes.

I’d like to add another application to your list of web-based tools: ProtoShare. People can start by creating basic gray-box wireframes, annotate and discuss their work, and even evolve the wireframes to high-fidelity prototypes. They can also upload design comps to overlay links, or simply share with others for feedback. Finally, all work can be exported to HTML for user testing, or to a specification document.

Thanks again for sharing such valuable information for design teams.

Andrea
@ProtoShare

iQuarK

November 1st, 2010

Great article! there are some applications I didn’t know.

Good job :D.

Adam

November 1st, 2010

Although it’s expensive, Axure’s quite good.

Colin

November 1st, 2010

Thanks for the mention in the article. Over the weekend I moved the Free Keynote Wireframe Stencils to http://keynoteux.com . The old link will continue to work bu that’s the new home.

C

Guillaume

November 1st, 2010

You’re missing the *excellent* (best?) wireframing tool Axure RP Pro. I tried and adopted it two years ago. A must have.

Matt Mazur

November 1st, 2010

One more addition you all might like is jMockups. It’s a brand new HTML5-based web app (less than a week since it launched) for designing high fidelity website mockups.

In a few weeks I’m also going to add the ability to create wireframes and a feature that lets you switch between low and high fidelity, so you can design your site as a wireframe convert it to high fidelity whenever you’re ready.

If you’re interested please check it out and let me know what you think; I’m very open to ideas and am usually pretty quick to implement feature requests.

Cheers, Matt

Theo

November 1st, 2010

Great overview of wireframing tools!

Tommy Day

November 1st, 2010

I’ve always had a hard time getting my clients to see the value of wireframing, so I always do it for my own personal use and then deliver a mockup for them to preview.

Enor Anidi

November 1st, 2010

Interesting article Cameron…another wireframing tool to add to the list is iMockups: http://www.endloop.ca/imockups/ Although it is aimed for iPad users, I still think it’s worth a mention.

Professor Burke

November 1st, 2010

Looks Good Cameron, Thanks for the article. I just might link to it for school.

Djela

November 1st, 2010

Thanks so much. I use pen + paper before moving to HTML + CSS. I also love static PNGs. Since the core content of the webapp I wireframe for are images and the context is mobile. Would love to hear about wireframe tools focusing on specific types of content and context. Cheers.

Marcell Purham

November 1st, 2010

Wire framing is great but clients never see the website. So now i just do quick sketch wireframe then end up creating a cleaner version in photoshop.

Patrice Girard

November 1st, 2010

You forget one of the best prototyper http://justinmind.com
Full prototyper from wireframe to complete prototype with data simulation, ajax and dynamic animation.

Willie

November 1st, 2010

Amazing review, thanks for sharing such an excellent piece of research.

Moris Kim

November 1st, 2010

I’m not web designer. but it’s pretty good. thx

Federico Hertel Gherardi

November 1st, 2010

Such a great and inspired article! Thanks for talking about this topic so important and unfortunatly so understimated.

Ryan

November 1st, 2010

I recently put together some iPhone wireframe templates for sketching out ideas around the boardroom table. They are available for download here

Charanjit

November 1st, 2010

Lovely and comprehensive piece on wireframing… You’ve covered a lot of ground and it’s definitely something I will share with my team.

Aditya Doshi

November 2nd, 2010

This is a very useful resource to learn about wireframes.. I personally use Axure a lot as it is very simple.. But really would like to try out some of the other tools mentioned here..

Hannah @moobileframes

November 2nd, 2010

Nice Article! I really like to start designing user interface through wireframes and rough sketches.

Try to visit also http://moobileframes.tumblr.com.
Ultimate collections of mobile wireframes curated by me:)

Thanks again!
Hannah

cronous

November 2nd, 2010

Exellent

Peter Severin

November 2nd, 2010

WireframeSketcher is a wireframing plugin for Eclipse, Aptana, Zend Studio and the like. Find more here: http://wireframesketcher.com

Cristian Dorobantescu

November 2nd, 2010

It’s not exactly a wireframing tool but you can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.

David Prahl

November 2nd, 2010

Another discussion to add is the value of horizontal vs. vertical prototypes or wireframes. With a horizontal prototype, you design most or all of the high level items but not in any great depth or detail. With a vertical prototype you work out a single function or task in full. Each method has its advantages and disadvantages depending on the project.

Lastly, I was also surprised that Axure was not on the list. In addition to creating great wireframes, it can generate a clickable prototype and basic design specification documents.

Jay Moretti

November 2nd, 2010

You could also do the wireframe+prototype stage in Adobe’s Flash Catalyst. It’s wireframes will already be fully functional, and developer-ready. It’s designer friendly and a real time-saver.

kolboid

November 2nd, 2010

Good post, thanks a lot.
I’m using a desktop software for wireframing called ForeUI
http://www.foreui.com/

Mike

November 2nd, 2010

Nice article, thanks for mentioning Wireframe Showcase!

Richard

November 2nd, 2010

It’s worth looking at Flairbuilder.com I have been using it for 1 year now and its simple but very powerful

Dan Moser

November 3rd, 2010

Hi there,

As someone commented, another tool you might want to check is Justinmind Prototyper. One of the cool things it brings is the capability of adapting exactly to your needs. You can create your wireframes and then work in successive iterations to evolve it to fully functionalsoftware prototype. High-fidelity is a ragbag concept where many tools fit, but you should definitely check what Justinmind does. Simulation with real data, forms, animations … you can get to do anything.

Cheers,
Dan
@Justinmind

Rodrigo Teixeira

November 3rd, 2010

Nice article Cameron!
I want to thank you for the mention here.

Karen

November 3rd, 2010

Great blog post. I love wireframes!

Hiram

November 4th, 2010

Wow!!! I do wireframes on a daily basis and find this blog post to be one of the most useful/resourceful I have EVER seen on the net. I’ve used a couple in the past but the Jumpchart system looks promising. Thanks a ton for this post, I will be subscribing to your RSS and follow you.

sanji

November 4th, 2010

good read! I always try to create wireframe before mock ups, but client doesn’t understand this at all so I end up creating it in photoshop or html..Btw, it’s nice to see this kind of apps–thanks!

Kohum

November 4th, 2010

It’s funny. Adobe FireWorks is my program of choice for most of the thing I do, and yet I’ve never used it for wire-framing to the extent that is shown here!

Great article!

Ben Giordano

November 4th, 2010

Seriously sick article. What a great list of programs and resources. This is the weakest part of my web design company right now and this is going to help me a ton! Thanks for the great article.

mahimoto

November 4th, 2010

wow, this is definitely an ultimate guide. There were so many apps I didn’t know about. I’m very intrigued by that Google app.

Kai

November 5th, 2010

Great guide. Mostly i´m using wireframes on paper in my design workflow but will try some of the here listed programs for sure.

Thank you!

bob

November 5th, 2010

Great post. We use illustrator for our wireframes. I like the idea of a web based version but I’m not sure I have time to try a bunch out so that we can pick one. It’s easy enough for us to pass around an ai file anyway.

Erik

November 5th, 2010

One of the most useful post I’ve read over the last weeks, thx! Comes in handy for the big project I’m currently working on! However, still using both methods, depending on the mood I’m in…

LSaridina

November 7th, 2010

If only I found this article just before the project started. I’ll done that work faster as there are so many good tools/assets that will fit my work. Anyway, bookmarked this page.

Kevin

November 7th, 2010

Wireframing is something that I’m new to, I’ve been using iMockups on the iPad which really helps give clients an idea of designs. Great post btw.

Anthony Burton

November 8th, 2010

Holy hell, there are so many choices now. The last time I did wireframes was around 1999 (I wonder if you could even find the paper from IBM that we used?), and there were NO tools.

At the time we would just do straight HTML for content, and plug in CSS later for design, trying hard to separate the two. Of course at the time CSS (in the midst of the browser wars) was pretty terrible.

I’m moving back into design more and more, and this is a handy roundup of available options. Thanks!

Gaurav M

November 9th, 2010

Hello Cameron,

Your posts always amazes me. With lots of information and resources bundled into a rocking post!

Aaron Nichols

November 9th, 2010

Interesting article here. I haven’t really used wireframing as your described it in my designs, but found that I have always been wireframing. Even having flashes of designs going through your mind would be a version of wireframing.

I have had a little bit of trouble with designs going in my head but falling right back out, so I am going to try and carry around even a small notebook to jot things down.

Kris Combs

November 9th, 2010

AI is my tool of choice for high fidelity WF’s although jumpchart looks pretty handy for multipage setups.

Thanks for the great article.

Jim Babbage

November 9th, 2010

My preference for wireframing and prototyping is Fireworks. Lots of other great resources in this article too!

mspownall

November 10th, 2010

Excellent article. highly recommend axure rp for wireframing and creating interactive prototypes.

Edgar Catalán

November 11th, 2010

Cool article, I didn’t know there were so many resources out there, for sketching purposes.

Adnan Zulkarnain

November 18th, 2010

Great article, i like google drawing.. its cool

Bogs

November 21st, 2010

awesome! …couldn’t find a more extensive article. hope to read more.

Heiko

November 21st, 2010

Extremely well explained. It helps to get one’s decision right

ChandraQ

November 22nd, 2010

Great article – covers the bases and has some great resources. Thanks!

Thomas

November 24th, 2010

Great article. But it is in no way “ultimate”, if it does not mention Axure (like mentioned by many other commenters here). Axure is THE premier wireframing tool for mocking up and documenting interactive wireframes.

I use it for documenting critical designs, after having tried many of the other tools. It is a must have for professional wireframers.

albacete

November 26th, 2010

ufff, what an article! Thanks, very interesting.

maybe, you should mention that you can simply build a wireframe using coulored cells in Excel.

cheerio

Scott

November 26th, 2010

Great conversation! I use Balsamiq mockups and I love it. I would really be interested in a conversation about going from low to high fidelity mockups. When I start with a high fidelity mockup, I get a more visually appealing result. Low fidelity makes sure that the marketing is in the right place and works really well with helping clients commit – but still I struggle going from low to high fidelity. Does that make since?

Scott

November 26th, 2010

I should also mention that Balsamiq mockup is compatible with iMockups (for the ipad). It’s great to be in a meeting and rapidly turn over a wireframe with the client’s input.

venkat

December 1st, 2010

good one

Powelly

December 1st, 2010

Fantastic article, with a huge amount of depth – very insightful!

Mark

December 2nd, 2010

Great article – I am a big fan of wireframes so this is awesome!

Nadiah Abd Manaf

December 2nd, 2010

Hey, great post. I’ve been ‘studying’ wireframes (and ux) for weeks now, your post sort of completes it for me :) (not that i should stop learning tho). Thanks!

Dhruv patel

December 3rd, 2010

why does everyone forget about Axure RP Pro? it’s by far the best tool out there for Rapid wireframe development!

anthony

December 4th, 2010

Not a bad guide for beginners. However, if you’re looking for something a little more advanced check out my article that shows you how to wireframe using a grid: http://uxmovement.com/wireframes/wireframing-effectively-on-the-970-grid-system

Jarmo Valmari

December 5th, 2010

A very nice article, though I think you may have confused people a bit with sketching and wireframing. They’re not the same thing and both have an important place in the design process.

According to many ux gurus, the design process starts with sketching, not wireframing. To clarify, sketching is a phase where you try out many ideas. A Sketch is supposed to be so quick to make you can dispose of it without feeling like losing your work. A whiteboard is the best tool I’ve used for sketching. When you’ve really explored different options, you go ahead and pick one or few and turn them into wireframes (or even straight to prototypes if you can).

By embracing sketching you make sure you just don’t pick the first idea without first thinking if there are others that might be even better ones. Bill Buxton’s Sketching User Experiences is a good read about the subject.

Steve Mathew

December 8th, 2010

A wireframing article without mentioning Axure is like pasta without parmesan – you can eat it, but it just doesn’t taste as good!

Come on guys, Axure is probably the Rolls Royce of tools. So either you don’t know about it (and hence don’t use it) or your consciously left it out. If it’s the latter, please tell us why?

Otherwise, it was a nice pasta.

Etienne Delagrave

December 8th, 2010

Here at Adviso (http://www.adviso.ca/en/), we are 4 UX guys using Visio and it’s works great. We are doing mostly high-res mockups with it.

amarnath

December 8th, 2010

Good Article. I use Balsamiq so does my client. So it is easy for us getting things turn-around very faster and in sync.

AMRoberts

December 9th, 2010

Thanks for sharing. Great information.

Michael W

December 10th, 2010

Thanks for sharing the info! Very handy!

Collin

January 13th, 2011

Wow, just came across this article. Hugely helpful (just wish I saw this a week ago before I submitted my wireframe to my designer!).
Thanks for all the great advice – I’m sure my wireframes will be top-notch in the future

Herb

January 13th, 2011

Fabulous post guys. I was in an advisor meeting yesterday for a new website project and I just kept thinking “they don’t have a wireframe yet”.
We have used creately and most recently tried google drawing and I am excited about trying some of these other tools mentioned here. So many resources now!

peko

February 2nd, 2011

Fantastic post ! Thank you very much.
Very useful :]

Deena

February 3rd, 2011

Great info! Just getting back into UI/UX designing and it’s interesting to see the vast number of tools, but even better to have the depth you go into here. Solid piece.

Bree

February 5th, 2011

Excellent comment, Jarmo. This is how we operate @ my shop, with regards to sketching vs. Wire framing. I’d also like to note that high fidelity wire frames can confuse a client – causing them to view the WF as a descriptor of creative, when they should be focusing on ia/ux at that stage.

Ewa

February 21st, 2011

Nice list of tools:)

0 down vote

Thanks for including JustProto to your list. You should check it out again, a lot of things changed since ;>
JustProto gives you hundreds of elements you can use, not only prototyping websites but also apps (for iPhone, iPad and Android as well). You get components (instead of masters) so you can use them on your pages multiple times by grag&drop- if you make change to a component it’ll automaticly show changes on all your pages. You also get SSL protection. JustProto is web-based so you can collaborate with people all around the world which speeds up the whole prototyping process. You can send link to your client and he gets fully functioning prototype (gives the impression it’s like a real website). If you enable realtime preview you can apply changes on your prototype and the client will see them right away.

Stay up to date with new changes and features:)

Ewa
@JustProto

Max

March 10th, 2011

Another HTML interactive tool you might want to check out is Tiggr – http://gotiggr.com. With Tiggr you can create, share and preview Web and mobile HTML prototypes. The key is that you can create interactive HTML prototypes with navigation which you can view and test in any browser.

@gotiggr

bernard schokman

March 19th, 2011

I’ve tried a few things with wireframing. At the outset nothing beats a big line of butcher paper that everyone can scrawl on. Once I;ve got direction its back the the laptop and Axure RP Pro for me.

DBucar

March 23rd, 2011

thanks a lot!
just beginning my career in the area, so this is really helpful!
regards,
D

carlosxruiz

March 26th, 2011

Thanks a lot. This article was very usefull for me in this moment.

Chris

March 27th, 2011

Impressive list of tools – there certainly is no shortage. The problem is finding the one that fits your needs. We needed collaboration since we have a pretty big team with a lot of projects going so we’re using LucidChart .

Alan

April 8th, 2011

Thanks for such a comprehensive guide. Here I’d like to suggest one more little tool for the community – my.origramy – a free service for wireframing/design, which uses a flash component as a backend. The component is also available for download and usage.

Sandro

April 16th, 2011

Amazing guide. Thank you! I’m totally new at this so please forgive my novice question. What about security with any of these free sites? What’s to say that they won’t have visibility into what one is creating and use it for their purposes? Some mentioned SSL connections but can’t the these host sites see what people are designing? Scary! Again, forgive my ignorance and paranoia! Perhaps someone can put me at ease. Thanks much.

Clark Valberg

April 28th, 2011

The most comfortable way to produce wireframe prototypes is to use a tool like Photoshop or Fireworks. Then you can use a InVision (http://www.invisionapp.com) to create a completely interactive wireframe experience they can share with your team and clients (example: http://bit.ly/textifylow)

Snrky

May 28th, 2011

Excellent! I’ve done paper prototyping for Scrummaster class, but never for a project or client. I’m looking forward to putting a few of these ideas to test.

Wildcard

July 8th, 2011

Thanks for such a nice and informative guide! I often use my.origramy not only for wireframing but also for mind-mapping before making a web-side prototype. yEd graph editor is also great for these purposes.

zd7ad

July 19th, 2011

Great overview. Thank you !

I just tried an other new tool: http://uireframe.com. It is in beta.
I liked the nice interface and how fast it is to load and easy to use !

baidu678

September 8th, 2011

world wide web. Such a good info website! I will be back for more.

Daniel McQuillen

October 9th, 2011

If you’re doing stupid simple mockups and UX flows, SimpleDiagrams (http://www.simplediagrams.com) might be helpful.

Antonio Hill

November 10th, 2011

Great article, this is a really good looking site!

Matthew

September 2nd, 2012

Fantastic Resource. Thank you.

Leave a Comment

Subscribe to the comments on this article.