Page 1


All Articles

2,0 4 3






Follow on Twit t er

Subscribe: RSS Feed


Ultimate Guide to Website Wireframing Nov 1 2010 by C ame ro n C hap man |




Advertise Here

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 visualiz e 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.

Search Search

Topics AJAX CSS Design Sho wcase / Inspiratio n Flash Freebies Graphic Design JavaScript Pho to sho p Pro ject Management Reso urces To o ls Tuto rials Usability / Accessibility User Interface Web Applicatio ns Web Design Web Develo pment

By taking the time to create at least a simple wireframe, you can make sure that your designs

Web Standards

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 highfidelity comp. Wireframes can easily be revised or discarded.

Wo rdPress

Recent CSS Typo graphy: The Basics

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

Giveaway: 5 Avactis E-co mmerce So ftware

Wireframe vs. Mockup vs. Prototype Wireframes, mockups, and prototypes are sometimes used interchangeably, but they are three

Spo nso r Lo ve: Co mpanies That Suppo rt Six Revisio ns (Feb 20 11)

different things (though there is sometimes some overlap between them). Each one has a

6 Po pular Co ntent Presentatio n Design Patterns

slightly different purpose that it gives to the design process.

The Impo rtance o f Histo rio graphy o n the Web

Wiref rames 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. Prot ot ypes 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

Addictive Fo nts

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 finaliz ed design elements.

AddTo Design App Sheriff

Blo g.Spo o nGraphics BrushLo vers Burbia Chris Wallace CSS Glo be Design Bump DesignOra Designmess Desizn Tech fudgegraphics Functio n InstantShift Lapto pLo m Marco fo lio .net MyInkBlo g Rough 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.

Naldz Graphics NETTUTS N.Design Studio No upe Onextrapixel

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

Pro ductiveDreams m PSDVIBE


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.

Queness [Re]Enco m Smashing Apps Smashing Magazine

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.

Stylegala Speckybo y Design Magazine Stylized Web Techno lo m Vandelay Design Walyo u

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.

Web Designer Help Webdesigner Depo t Web Design Ledger WPBeginner

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 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 visualiz ing what a website will look like based on a low- fi wireframe.

Wireframing Techniques There are doz ens 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

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

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.

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.

A 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 finaliz e 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.

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 browserbased wireframing tools.


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 resiz ing: If you change the siz e of a button or similar element, Mockingbird changes the text siz e to match. It also lets you create multi- page wireframes with links. Lovely Charts

Lovely Charts can be used for wireframes or a variety of other charts. It has an intuitive, dragand- 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 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. Lumz y

Lumz y 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 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 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 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 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 is a diagramming app that includes a library of objects and shapes and a drag- anddrop 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 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 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 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 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.

HT ML 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

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 doz en templates and stencil kits, all free to use. 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

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! 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

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

Here’s a printable stencil for hand- drawing wireframes that includes six browser windows, plus space for notes. 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

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

This sketching paper template includes a basic grid with browser chrome and an area on the side for your notes. 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

Here’s a very basic wireframe template, with space for sketching, and title, and notes. 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 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

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.

Wireframe 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 formaliz ed as possible. The other viewpoint argues that offering the client a polished wireframe makes them less likely to request changes because things feel more "finaliz ed." 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 visualiz e 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 finaliz ed already.

Example 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 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 ♼ 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

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

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

Wireframes Magaz ine covers all things wireframe- related, including tons of stencils and wireframing templates, as well as examples and inspiration. 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 Information Architecture 101: Techniques and Best Practices The Essential Guide to @font- face 10 Usability Tips Based on Research Studies Related categories : Web Design and User Interface

About the Author

Cam e ro n Chapm an is a pro fessio nal web and graphic designer with o ver 6 years o f experience in the industry. She’s also written fo r numero us blo gs such as Smashing Magazine and Mashable. Yo u can find her perso nal web presence at Cam e ro n Chapm an On Writ ing. If yo u’d like to co nnect with her, che ck he r o ut o n Twit t e r .

80 Comments paul

November 1st, 2010

co o l guide! I use balsamiq fo r the mo ckups. o ne app yo u didn’t mentio n is ho tglo o , I’m using it with a client o n a current prject.


November 1st, 2010

These are great, always nice to see ho w o ther peo ple do their wireframes. Thanks!


November 1st, 2010

Amazing! I perso nally stick to pen and paper, cuz I like to try a bunch o f design ideas and see ho w it’d interact with co ntent. But why didn’t I think o f using po st-its befo re?? Gah! Fo r electro nic wireframing, ho wever, the vecto r kit is aweso me. I’ll play with it o n my next pro ject fo r sure.

Coworker Quot es November 1st, 2010

Great article! The do wnside o f using Balsamiq; clients end up liking Co mic Sans so much that they want to use it

in their live site!


November 1st, 2010

I perso nnally lo ve Inkscape, to create wireframes in svg, helped by stencils files released by yaho o : http://develo per.yaho o .co m/ypatterns/abo ut/stencils/

Crist ian Pascu November 1st, 2010

Hey, an wireframeing to o l that yo u sho uld also checko ut is m Has lo ts o f builtin co ntro ls and nice interactivity suppo rt. Thanks the great article, Cristian

Andrea at Prot oShare November 1st, 2010

Camero n, Excellent article o n wireframing and pro to typing. The stages o f develo pment and fidelity o f wireframes and pro to types co mpletely depend o n o ne’s needs and co mfo rt level. And o ne’s needs can change with different pro jects in ho w far they need to take their wireframes. I’d like to add ano ther applicatio n to yo ur list o f web-based to o ls: Pro to Share. Peo ple can start by creating basic gray-bo x wireframes, anno tate and discuss their wo rk, and even evo lve the wireframes to high-fidelity pro to types. They can also uplo ad design co mps to o verlay links, o r simply share with o thers fo r feedback. Finally, all wo rk can be expo rted to HTML fo r user testing, o r to a specificatio n do cument. Thanks again fo r sharing such valuable info rmatio n fo r design teams. Andrea @Pro to Share


November 1st, 2010

Great article! there are so me applicatio ns I didn’t kno w. Go o d jo b :D.


November 1st, 2010

Altho ugh it’s expensive, Axure’s quite go o d.


November 1st, 2010

Thanks fo r the mentio n in the article. Over the weekend I mo ved the Free Keyno te Wireframe Stencils to http://keyno m . The o ld link will co ntinue to wo rk bu that’s the new ho me. C


November 1st, 2010

Yo u’re missing the *excellent* (best?) wireframing to o l Axure RP Pro . I tried and ado pted it two years ago . A must have.

Mat t Mazur

November 1st, 2010

One mo re additio n yo u all might like is jMo ckups. It’s a brand new HTML5-based web app (less than a week since it launched) fo r designing high fidelity website mo ckups. In a few weeks I’m also go ing to add the ability to create wireframes and a feature that lets yo u switch between lo w and high fidelity, so yo u can design yo ur site as a wireframe co nvert it to high fidelity whenever yo u’re ready.

If yo u’re interested please check it o ut and let me kno w what yo u think; I’m very o pen to ideas and am usually pretty quick to implement feature requests. Cheers, Matt


November 1st, 2010

Great o verview o f wireframing to o ls!

Tommy Day

November 1st, 2010

I’ve always had a hard time getting my clients to see the value o f wireframing, so I always do it fo r my o wn perso nal use and then deliver a mo ckup fo r them to preview.

Enor Anidi

November 1st, 2010

Interesting article Camero n…ano ther wireframing to o l to add to the list is iMo ckups: http://www.endlo o ckups/ Altho ugh it is aimed fo r iPad users, I still think it’s wo rth a mentio n.

Prof essor Burke November 1st, 2010

Lo o ks Go o d Camero n, Thanks fo r the article. I just might link to it fo r scho o l.


November 1st, 2010

Thanks so much. I use pen + paper befo re mo ving to HTML + CSS. I also lo ve static PNGs. Since the co re co ntent o f the webapp I wireframe fo r are images and the co ntext is mo bile. Wo uld lo ve to hear abo ut wireframe to o ls fo cusing o n specific types o f co ntent and co ntext. Cheers.

Marcell Purham November 1st, 2010

Wire framing is great but clients never see the website. So no w i just do quick sketch wireframe then end up creating a cleaner versio n in pho to sho p.

Pat rice Girard November 1st, 2010

Yo u fo rget o ne o f the best pro to typer m Full pro to typer fro m wireframe to co mplete pro to type with data simulatio n, ajax and dynamic animatio n.


November 1st, 2010

Amazing review, thanks fo r sharing such an excellent piece o f research.

Moris Kim

November 1st, 2010

I’m no t web designer. but it’s pretty go o d. thx

Federico Hert el Gherardi November 1st, 2010

Such a great and inspired article! Thanks fo r talking abo ut this to pic so impo rtant and unfo rtunatly so understimated.


November 1st, 2010

I recently put to gether so me iPho ne wireframe templates fo r sketching o ut ideas aro und the bo ardro o m table. They are available fo r do wnlo ad here


November 1st, 2010

Lo vely and co mprehensive piece o n wireframing‌ Yo u’ve co vered a lo t o f gro und and it’s definitely so mething I will share with my team.

Adit ya Doshi

November 2nd, 2010

This is a very useful reso urce to learn abo ut wireframes.. I perso nally use Axure a lo t as it is very simple.. But really wo uld like to try o ut so me o f the o ther to o ls mentio ned here..

Hannah @moobilef rames November 2nd, 2010

Nice Article! I really like to start designing user interface thro ugh wireframes and ro ugh sketches. Try to visit also http://mo o m. Ultimate co llectio ns o f mo bile wireframes curated by me:) Thanks again! Hannah


November 2nd, 2010


Pet er Severin

November 2nd, 2010

WireframeSketcher is a wireframing plugin fo r Eclipse, Aptana, Zend Studio and the like. Find mo re here: m

Crist ian Dorobant escu November 2nd, 2010

It’s no t exactly a wireframing to o l but yo u can have a lo o k as well at Flexi CSS Layo uts – a Dreamweaver Extensio n that help yo u create Css layo uts in Dreamweaver witho ut co ding.

David Prahl

November 2nd, 2010

Ano ther discussio n to add is the value o f ho rizo ntal vs. vertical pro to types o r wireframes. With a ho rizo ntal pro to type, yo u design mo st o r all o f the high level items but no t in any great depth o r detail. With a vertical pro to type yo u wo rk o ut a single functio n o r task in full. Each metho d has its advantages and disadvantages depending o n the pro ject. Lastly, I was also surprised that Axure was no t o n the list. In additio n to creating great wireframes, it can generate a clickable pro to type and basic design specificatio n do cuments.

Jay Moret t i

November 2nd, 2010

Yo u co uld also do the wireframe+pro to type stage in Ado be’s Flash Catalyst. It’s wireframes will already be fully functio nal, and develo per-ready. It’s designer friendly and a real time-saver.


November 2nd, 2010

Go o d po st, thanks a lo t. I’m using a deskto p so ftware fo r wireframing called Fo reUI m/


November 2nd, 2010

Nice article, thanks fo r mentio ning Wireframe Sho wcase!


November 2nd, 2010

It’s wo rth lo o king at m I have been using it fo r 1 year no w and its simple but very po werful

Dan Moser

November 3rd, 2010

Hi there, As so meo ne co mmented, ano ther to o l yo u might want to check is Justinmind Pro to typer. One o f the co o l things it brings is the capability o f adapting exactly to yo ur needs. Yo u can create yo ur wireframes and then wo rk in successive iteratio ns to evo lve it to fully functio nalso ftware pro to type. High-fidelity is a ragbag co ncept where many to o ls fit, but yo u sho uld definitely check what Justinmind do es. Simulatio n with real data, fo rms, animatio ns ‌ yo u can get to do anything. Cheers, Dan @Justinmind

Rodrigo Teixeira November 3rd, 2010

Nice article Camero n! I want to thank yo u fo r the mentio n here.


November 3rd, 2010

November 3rd, 2010

Great blo g po st. I lo ve wireframes!


November 4th, 2010

Wo w!!! I do wireframes o n a daily basis and find this blo g po st to be o ne o f the mo st useful/reso urceful I have EVER seen o n the net. I’ve used a co uple in the past but the Jumpchart system lo o ks pro mising. Thanks a to n fo r this po st, I will be subscribing to yo ur RSS and fo llo w yo u.


November 4th, 2010

go o d read! I always try to create wireframe befo re mo ck ups, but client do esn’t understand this at all so I end up creating it in pho to sho p o r html..Btw, it’s nice to see this kind o f apps–thanks!


November 4th, 2010

It’s funny. Ado be FireWo rks is my pro gram o f cho ice fo r mo st o f the thing I do , and yet I’ve never used it fo r wire-framing to the extent that is sho wn here! Great article!

Ben Giordano

November 4th, 2010

Serio usly sick article. What a great list o f pro grams and reso urces. This is the weakest part o f my web design co mpany right no w and this is go ing to help me a to n! Thanks fo r the great article.

mahimot o

November 4th, 2010

wo w, this is definitely an ultimate guide. There were so many apps I didn’t kno w abo ut. I’m very intrigued by that Go o gle app.


November 5th, 2010

Great guide. Mo stly i´m using wireframes o n paper in my design wo rkflo w but will try so me o f the here listed pro grams fo r sure. Thank yo u!


November 5th, 2010

Great po st. We use illustrato r fo r o ur wireframes. I like the idea o f a web based versio n but I’m no t sure I have time to try a bunch o ut so that we can pick o ne. It’s easy eno ugh fo r us to pass aro und an ai file anyway.


November 5th, 2010

One o f the mo st useful po st I’ve read o ver the last weeks, thx! Co mes in handy fo r the big pro ject I’m currently wo rking o n! Ho wever, still using bo th metho ds, depending o n the mo o d I’m in…


November 7th, 2010

If o nly I fo und this article just befo re the pro ject started. I’ll do ne that wo rk faster as there are so many go o d to o ls/assets that will fit my wo rk. Anyway, bo o kmarked this page.


November 7th, 2010

Wireframing is so mething that I’m new to , I’ve been using iMo ckups o n the iPad which really helps give clients an idea o f designs. Great po st btw.

Ant hony Burt on November 8th, 2010

Ho ly hell, there are so many cho ices no w. The last time I did wireframes was aro und 19 9 9 (I wo nder if yo u co uld even find the paper fro m IBM that we used?), and there were NO to o ls. At the time we wo uld just do straight HTML fo r co ntent, and plug in CSS later fo r design, trying hard to separate the two . Of co urse at the time CSS (in the midst o f the bro wser wars) was pretty terrible. I’m mo ving back into design mo re and mo re, and this is a handy ro undup o f available o ptio ns. Thanks!

Gaurav M

November 9th, 2010

Hello Camero n, Yo ur po sts always amazes me. With lo ts o f info rmatio n and reso urces bundled into a ro cking po st!

Aaron Nichols

November 9th, 2010

Interesting article here. I haven’t really used wireframing as yo ur described it in my designs, but fo und that I have always been wireframing. Even having flashes o f designs go ing thro ugh yo ur mind wo uld be a versio n o f wireframing. I have had a little bit o f tro uble with designs go ing in my head but falling right back o ut, so I am go ing to try and carry aro und even a small no tebo o k to jo t things do wn.

Kris Combs

November 9th, 2010

AI is my to o l o f cho ice fo r high fidelity WF’s altho ugh jumpchart lo o ks pretty handy fo r multipage

setups. Thanks fo r the great article.

Jim Babbage

November 9th, 2010

My preference fo r wireframing and pro to typing is Firewo rks. Lo ts o f o ther great reso urces in this article to o !


November 10th, 2010

Excellent article. highly reco mmend axure rp fo r wireframing and creating interactive pro to types.

Edgar Cat alán

November 11th, 2010

Co o l article, I didn’t kno w there were so many reso urces o ut there, fo r sketching purpo ses.

Adnan Zulkarnain November 18th, 2010

Great article, i like go o gle drawing.. its co o l


November 21st, 2010

aweso me! …co uldn’t find a mo re extensive article. ho pe to read mo re.


November 21st, 2010

Extremely well explained. It helps to get o ne’s decisio n right


November 22nd, 2010

Great article – co vers the bases and has so me great reso urces. Thanks!


November 24th, 2010

Great article. But it is in no way “ultimate”, if it do es no t mentio n Axure (like mentio ned by many o ther co mmenters here). Axure is THE premier wireframing to o l fo r mo cking up and do cumenting interactive wireframes. I use it fo r do cumenting critical designs, after having tried many o f the o ther to o ls. It is a must have fo r pro fessio nal wireframers.

albacet e

November 26th, 2010

ufff, what an article! Thanks, very interesting. maybe, yo u sho uld mentio n that yo u can simply build a wireframe using co ulo red cells in Excel. cheerio

Scot t

November 26th, 2010

Great co nversatio n! I use Balsamiq mo ckups and I lo ve it. I wo uld really be interested in a co nversatio n abo ut go ing fro m lo w to high fidelity mo ckups. When I start with a high fidelity mo ckup, I get a mo re visually appealing result. Lo w fidelity makes sure that the marketing is in the right place and wo rks really well with helping clients co mmit – but still I struggle go ing fro m lo w to high fidelity.

Do es that make since?

Scot t

November 26th, 2010

I sho uld also mentio n that Balsamiq mo ckup is co mpatible with iMo ckups (fo r the ipad). It’s great to be in a meeting and rapidly turn o ver a wireframe with the client’s input.


December 1st, 2010

go o d o ne


December 1st, 2010

Fantastic article, with a huge amo unt o f depth – very insightful!


December 2nd, 2010

Great article – I am a big fan o f wireframes so this is aweso me!

Nadiah Abd Manaf December 2nd, 2010

Hey, great po st. I’ve been ‘studying’ wireframes (and ux) fo r weeks no w, yo ur po st so rt o f co mpletes it fo r me :) (no t that i sho uld sto p learning tho ). Thanks!

Dhruv pat el

December 3rd, 2010

why do es everyo ne fo rget abo ut Axure RP Pro ? it’s by far the best to o l o ut there fo r Rapid wireframe develo pment!

ant hony

December 4th, 2010

No t a bad guide fo r beginners. Ho wever, if yo u’re lo o king fo r so mething a little mo re advanced check o ut my article that sho ws yo u ho w to wireframe using a grid: http://uxmo m/wireframes/wireframing-effectively-o n-the-9 70 -grid-system

Jarmo Valmari December 5th, 2010

A very nice article, tho ugh I think yo u may have co nfused peo ple a bit with sketching and wireframing. They’re no t the same thing and bo th have an impo rtant place in the design pro cess. Acco rding to many ux gurus, the design pro cess starts with sketching, no t wireframing. To clarify, sketching is a phase where yo u try o ut many ideas. A Sketch is suppo sed to be so quick to make yo u can dispo se o f it witho ut feeling like lo sing yo ur wo rk. A whitebo ard is the best to o l I’ve used fo r sketching. When yo u’ve really explo red different o ptio ns, yo u go ahead and pick o ne o r few and turn them into wireframes (o r even straight to pro to types if yo u can). By embracing sketching yo u make sure yo u just do n’t pick the first idea witho ut first thinking if there are o thers that might be even better o nes. Bill Buxto n’s Sketching User Experiences is a go o d read abo ut the subject.

St eve Mat hew December 8th, 2010

A wireframing article witho ut mentio ning Axure is like pasta witho ut parmesan – yo u can eat it, but it just do esn’t taste as go o d! Co me o n guys, Axure is pro bably the Ro lls Ro yce o f to o ls. So either yo u do n’t kno w abo ut it (and hence do n’t use it) o r yo ur co nscio usly left it o ut. If it’s the latter, please tell us why? Otherwise, it was a nice pasta.

Et ienne Delagrave December 8th, 2010

Here at Adviso ( http://www.adviso .ca/en/), we are 4 UX guys using Visio and it’s wo rks great. We are do ing mo stly high-res mo ckups with it.

amarnat h

December 8th, 2010

Go o d Article. I use Balsamiq so do es my client. So it is easy fo r us getting things turn-aro und very faster and in sync.

AMRobert s

December 9th, 2010

Thanks fo r sharing. Great info rmatio n.

Michael W

December 10th, 2010

Thanks fo r sharing the info ! Very handy!


January 13th, 2011

Wo w, just came acro ss this article. Hugely helpful (just wish I saw this a week ago befo re I submitted my wireframe to my designer!). Thanks fo r all the great advice – I’m sure my wireframes will be to p-no tch in the future


January 13th, 2011

Fabulo us po st guys. I was in an adviso r meeting yesterday fo r a new website pro ject and I just kept thinking “they do n’t have a wireframe yet”. We have used creately and mo st recently tried go o gle drawing and I am excited abo ut trying so me o f these o ther to o ls mentio ned here. So many reso urces no w!


February 2nd, 2011

Fantastic po st ! Thank yo u very much. Very useful :]


February 3rd, 2011

Great info ! Just getting back into UI/UX designing and it’s interesting to see the vast number o f to o ls, but even better to have the depth yo u go into here. So lid piece.


February 5th, 2011

Excellent co mment, Jarmo . This is ho w we o perate @ my sho p, with regards to sketching vs. Wire framing. I’d also like to no te that high fidelity wire frames can co nfuse a client – causing them to view the WF as a descripto r o f creative, when they sho uld be fo cusing o n ia/ux at that stage.


February 21st, 2011

Nice list o f to o ls:) 0 do wn vo te Thanks fo r including JustPro to to yo ur list. Yo u sho uld check it o ut again, a lo t o f things changed since ;> JustPro to gives yo u hundreds o f elements yo u can use, no t o nly pro to typing websites but also apps (fo r iPho ne, iPad and Andro id as well). Yo u get co mpo nents (instead o f masters) so yo u can use them o n yo ur pages multiple times by grag&dro p- if yo u make change to a co mpo nent it’ll

auto maticly sho w changes o n all yo ur pages. Yo u also get SSL pro tectio n. JustPro to is web-based so yo u can co llabo rate with peo ple all aro und the wo rld which speeds up the who le pro to typing pro cess. Yo u can send link to yo ur client and he gets fully functio ning pro to type (gives the impressio n it’s like a real website). If yo u enable realtime preview yo u can apply changes o n yo ur pro to type and the client will see them right away. Stay up to date with new changes and features:) Ewa @JustPro to

Leave a Comment Name (re q uire d )

e mail (will no t b e p ub lis he d ) us e d fo r G ravatars (re q uire d )

We b s ite

Subscribe t o t he co m m e nt s o n t his art icle .

Submit Comment

Become a Facebook Fan of Six Revisions . Ad ve rt ise - Contact - RSS Feed Š2008- 2011 Six Revisions. Six Revisions mobile version by Mobify.


hjBFJK ewFB eskjfhkwefkwg ejkfew

Read more
Read more
Similar to
Popular now
Just for you