The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes
“Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.”
Garr Reynolds
Designing wireframes the right way the first time, cost no more than doing it the wrong way. Creating a paper prototype adds no cost, either- simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site's business objectives.
Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and test a prototype ensures that the redesigned site won't introduce any new causes for user frustration or further erosion of brand equity.
A designer doesn’t have to reinvent the wheel with each new wire frame diagram, of course. Every page in a site will share some elements, even when the pages don’t follow the same template.
These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organization achieve its business goals, nor will it save money. For example, every page needs clearly labeled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page.
The Wireframe
Understanding how to work with wireframes is key to creating a success site prototype.
A wireframe diagram illustrates the layout of a web page, using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements and show their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on.
Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labeled), free of any potentially distracting design treatments.
Using simple shapes lets you focus on the information design first, to make sure it meets users needs, before moving on to the pretty pictures. For an existing site, wireframes are abstracted from screen shots, with new content, functional, and navigational elements sketched in.
Wireframe vs. Visual Design
Usually, decision-makers in the site-owning organization will want to see visual designs by this time. I encourage you to be brave and delay – stall if necessary, but in any event resist temptation to yield to this request.
Why?
One very important reason is to save money. Why spend on graphics before the underlying information design is complete?
Equally important, colors, fonts and stylistic treatments of logos and other graphical elements can invoke emotional responses (“I hate this pink”; “I love that blue”; “That version of the logo makes me ill”) that distract from the task of determining the best information design for the page.
A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea. The sketch may be rendered in the computer using an illustration application or hand-drawn on paper. Either method is fine, as long as it clearly communicates your ideas.
The information design will evolve as wireframe diagrams change, incorporating results from the usability test at the end of this step, to reflect placement of page elements in ways that better meet user needs. Keeping the information design flexible at this stage will help you create a more positive brand experience over the long term, so you don’t want anyone to develop partisan attachments to a particular look this early in the game.
Note for Visual Designers
At this point in the process, visual designers should conduct exploratory meetings to understand the client’s visual preferences and the visual elements of the client’s brand. Wait until wireframes are set before showing visual-design treatments of the pages to the client.
Note for Clients
For clients who insist on seeing visuals earlier rather than later, you can ask visual designers to design page mock-ups representing possible colors, imagery, and look and feel – possible styles of what is being considered – at this stage. However, you should do this only if absolutely necessary – that is, if they won’t take no for an answer – and be sure to emphasize that these mock-ups in no way reflect the final designs (repeat this warning early and often).
Uwe Thimel's version of a wireframe
Caution the people in the site-owning organization against developing any attachments to these mock-ups, because such attachments will make it difficult it change the visual design later on. Chances are these people will not be happy when they see the final design with text, links and information added to it. Focusing only on wireframes at this stage helps you avoid building unrealistic expectations about the site’s final look and feel, guarding maximum flexibility to evolve the site’s information design as necessary.
9 Application Tools To Create Wireframes Digitally
Traditionally, interactive web designers use pencil and paper or Photoshop to do a mockup. However, in recent years, there has been a handful of websites that allow designers to create prototypes, wireframes or sitemaps digitally. Here are 9 tools that you can consider using.
1. Balsamiq
Using BALSAMIQ mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.
2. iPlotz
With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.
3. Pencil Project
The PENCIL PROJECT's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
4. templatr
templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML and no special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.
5. Flair Builder
FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.
6. GUI Design Studio
GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.
7. Proto Share
PROTOSHARE makes it easy to create and then reuse templates giving you full creative control and efficiency.
8. Serena
PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.
9. DUB
DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, & unifies the levels through zooming.
Wireframing diagrams use simple shapes to represent the content functions, and navigation on a page. Use them to design the best relationships among page elements for efficient information design that will meet user needs and achieve the site's business goals. I hope this post gives you a better understanding on the importance of wireframing, please stay tune for part 2!
Nice article. I would also like to mention WireframeSketcher. It's a wireframing plugin for Eclipse that can be used with most of the Eclipse-based web-development tools like Aptana Studio, MyEclipse and Zend Studio. More details here:
http://wireframesketcher.com
Surprised to see that Omni Group's Omnigraffle was left off this list. I swear by Omnigraffle for wireframes -- the editing tools are top notch for conceptualizing and moving around pieces of wireframe UI.
I assume Omnigraffle only works on Macintosh computers.
+1 for Graffle, I Have only recently switched to it from Illustrator, makes wireframing a breeze!
OmniGraffle is a brilliant tool. Highly recommended.
I've used Balsamiq, Protoshare and Serena to create wireframes - and my favourite by a million miles is Balsamiq!
It feels less stuffy and corporate than the other two I've used, and seems to provide a good starting point for discussions with both creatives and clients.
Am a long time Illustrator user, and it used to be my weapon of choice, but over the last couple years I've taken to using Indesign for wireframing needs.
My reasoning? Basically, it had everything I required. Drawing tools, type styles, object styles, reusable objects, master pages, multiple pages, easy export to PDF... plus I already knew how to use it. Depending on how detailed we get, the wireframes file can even be a good start for the visual design, utilizing existing styles, grids etc.
Typically our method of presenting wireframes is in the form of working sessions with the client. A simple process of walking through the concepts of annotated wireframes, soliciting feedback along the way. In most cases that's sufficient to get at what we need.
So I never really had cause to use any interactivity features in Indesign, but it does have the potential to turn a PDF into a prototype if need be. Likely would be a pretty manual process however, a shortfall for some in using Indesign over other more specialized tools.
@jeffswartz
Oh no! You forgot OmniGraffle. Nice article, but OmniGraffle should be at the top of the list. Amazing software.
Omnigraffle is the best !
A lot of great points where made here and will prove to be a valuable resource for developing your next project.
i created a short tour/demo of how I do this using omni graffle hope it helps...
http://www.nopun.com/team/webprocess_01_schemtaic_or_ScketchPad/webprocess_%200Sm_700x800001.swf
Noel,
Thanks so much for that demo--I was just thinking, "wouldn't it be great if someone would do a video of the process..." and voila, there it was!
@Noel - that is super helpful. I'm with @Calla, this is exactly what I was looking for. I've tinkered with OmniGraffle before, but didn't understand its use.
Thanks for the link!
Can't you people get it that OmniGraffle is a MAC only software?
There's a world outside Apple you know..even for designers.
just relax... it's gonna be alright
@Duncan Thanks, I actually Lol'd at that :)
You're not serious, are you? Designers who don't use Mac?
I don't believe it.
Of course not.
I just wanted to amuse Duncan and provide a Lol opportunity for Lynne.
Mission accomplished.
I love to do wire framing in web design using Adobe Illustrator, even on designing a logo.
It's great to see all these input and valuable comments from everyone. I've seen many designers still using Photoshop or Illustrator to create their wireframes or mockups. Some still use pencil and paper because their thoughts follow better using traditional mediums.
At the end of the day, it really depends which medium suits you best and allows you to produce the most creative idea for your client.
I have used lovelycharts.com for both wireframing and flowcharting.
Great article. I think Balsamiq is a great tool. I have also recently discovered Creately - a browser based tool for wireframing and just about any other type of diagrams that you can collaborate on.
http://creately.com
IMHO there is a need to show interaction. It's online, it's interactive! Exporting the prototype as HTML is key. Neither Illustrator nor Omni Graffle are really appropriate. They might illustrate one webpage, but the clients need to experience the whole site with lots of pages, states, rights. Therefore: OverSite or Axure.
OmniGraffle allows you to create links to other pages within the document. You can then export the wireframe as a PDF that people can click around as if it were a web site.
You can also share layers across canvases, so you can make site-wide and secondary navigation systems. You can then simply email a PDF to clients and team members.
Oh! Sorry about that. Obviously I'm an Omni-Beginner. Sounds good!
I use OmniGraffle for wireframing. I have not found how to export pdfs that can be clicked to function as a prototype using the Action Inspector. What am I missing?
here's a nice walk-through for Clickable PDFs in OmniGraffle
http://urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle
Google is also your friend:
http://www.google.com/search?rls=en&q=omnigraffle+clickable+pdf
We use to work with http://www.axure.com .
Part of the colleagues from creative use Xara and Indesign .
I'm using ForeUI (www.foreui.com). It can create skinnable and interactive wireframes, then run them in web browser.
I tried ForeUI two days ago, it's really awesome!
Here are some interactive wireframe samples from their site:
http://www.foreui.com/demos/demo4/
http://www.foreui.com/demos/demo3/
http://www.foreui.com/demos/demo2/
http://www.foreui.com/demos/demo7/
I tried this tool two days ago, it's really awesome :-)
What a Great article! You guys commented of using Photoshop or Illustrator and other online tools to create wireframes or mockups, what about Fireworks? I have used Fireworks since it's first version back in 1997, 98... For me it's the best of all, now I am using CS4 with is the easiest version in my opinion.
How about AXURE!?
http://www.axure.com
This is the best prototyping tool available!
Have use Balsamiq, IPlotz, Pencil and Omnigraffle Pro
All are good product...
I favor Balsamiq for use of use and for their "excellent" customer service,,,
+1 to ForeUI, very good prototyping tool.
Am I crazy to still be using HTML as a wireframing tool?
How do you do that? CSS?
Yes, with Plain Jane HTML. It can be interactive (to show to clients) and then reused right away by the UI developer(s). Does anyone else do this? Or if you used to do it and moved onto one of the tools here, please speak up. Thanks.
Chuck
no, you are not the only one using HTML as a wireframing tool. I find it more flexible and efficient than any other tool.
kudos!
Am I the only person using Visio?
Hi Charlotte,
Thanks for including ProtoShare on your list! We created the product from working with our own clients and collaborating with them on wireframes in the early stages of developing new websites. To help them better understand the process of how the final website would work, we then made the wireframes clickable. This resulted in better websites that fit their needs in less time. As you mentioned, they don't even have to be that detailed. A couple extra days on planning/wireframing can save several days in the latter part of the process.
For clients who try to skip ahead to design: I think one can use your words to explain the reason for this step:
"A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea."
Great post,
Andrea
Will everyone laugh if I say PowerPoint can be used to make good wireframes?
No laughing here Bob! I have a friend doing UI for touch screen kiosks and I was shocked when he told me the gorgeous wireframes he was showing me were made using PPT for Office 2007. They looked great. Honestly it's all about the skill and vision of the person creating the wireframes. I've seen some pretty sexy ones that were made using graph paper and a Sharpie :)
I also use PowerPoint, but rarely (only when it needs to fancy). Otherwise, paper & markers :)
ForeUI ++, it can create wireframe with any fidelity.
i think iplotz is the best
This looks GREAT! http://iplotz.com/whatisiPlotz.php
Yes, I've also used Iplotz and it is great tool.
What about Axure? Has anyone used this and how does it compare to the others?
Nice post, great insight about the usage of wire frames,
i some times do a balancing act. Do it manually with a pencil or just go for illustrator.
Here's a comprehensive list of desktop and AIR apps for wireframing that might help complete the picture for those comparing their options: http://konigi.com/wiki/wireframes
Thanks Michael, you've got a pretty broad list there!
Here is another list of wireframing tools, which has summary description for each tool:
http://c2.com/cgi/wiki?GuiPrototypingTools
Our company has bought Balsamiq, Axure and ForeUI, here is how we think about them:
* Balsamiq is very good for creating low fidelity and static wireframes, since it has so many predefined templates.
* Axure is good at creating hi fi and interactive wireframes, and generate document as well. But it is a little complex to use, people need to be trianed before really working on it.
* ForeUI can create skinnable wireframes. We can switch the fidelity of wireframe by changing its UI theme. It also supports interactive wireframing, so it becomes our favorite tool.
Wireframes are the basic of efficient web designing. Thank for this article.
The best app is the one you like.
OmniGraffle ohhhh, totals awesome tool.
Great Post. !!
Constantine
I'm currently working in Axure, as it allows both MS Word specs and wireframe prototype demos to be output from the same effort. In my experience, thumbs down on PDFs; simply can't do very much in a clear way. Need to convey concepts clearly to:
Internal Business Team
Internal Tech Resources
Designers
External Clients
Clicking is believing...
Hi,
We use Axure, it's a good tools.
I honestly think it's should be on that list.
[]'s
very nice!
hi,
You missed the granddaddy http://www.irise.com. Large learning curve and $$$ but cool.
Another tool I like very much is http://www.simulify.com which is also pretty good in sharing.
Simulify has a very bad interface. Protoshare looks better.
+1 for InDesign - *Especially* if your documentation has detailed annotations, or additional text (as it's formatting is obviously it's strength) - and it can integrate nicely with other deliverables done in InDesign (user flows, stories, interaction models, or even personas or competitive analyses).
And like another post said, it can do all the vector stuff you could want, with libraries, templates and components.
If I just needed a simple wireframe tool, then I really like Balsamiq. But I like InDesign for an 'integrated' solution for a variety of deliverables I produce - user flows, interaction modeling and even personas and competitive analyses.
Chris
@livebysatellite
+1 for Graffle, this one's perfect for our needs.
Oh, well, I feel already like drowning. Very creative websites, beautiful colors.
We just completed an exhaustive analysis of wireframes and prototype solutions. We learned a lot:
1) Simple mockups are only one piece of the pie. These tools are valuable, but are hard to integrate into formal requirements specs at large company IT shops.
2) Axure (http://www.axure.com) is a really good solution for prototyping, at a low cost.
3) Blueprint (http://www.blueprintsys.com) offers the best solution, by far, for integrating prototypes with complete requirements.
This article should talk about integration of prototypes with requirements...
Thank you for mentioning Garr Reynolds in your post. I work for Peachpit Press and thought you and your readers might be interested in knowing that he just released his first online streaming video, Presentation Zen: The Video, where he expands on the ideas presented in his book and blog.
Just in beta but the interface looks nice http://hello.hotgloo.com
Glad you mentioned hotgloo.com. I found that it was an excelent product, really pro.
Do any of these apps "remember" data a user has entered? I.e. I'm working a user sign-up process, and I want the prototype to "remember" the Name that the user has entered on page 1. That way, when they're done signing up, and they reach their profile page, they'll see their Name filled in the appropriate places. Anyone know of any app that can do this?
Axure RP does that with its persistent variables. It's probably the best tool for high interactive fidelity prototyping amongst all those mentioned here.
On another note, how can an article on wireframing omit iRise, Omnigraffle and Axure?
Indeed Axure does incorporate global variables, however there is a finite number that it can handle.
I found this to be a big problem when creating a prototype for a large e-commerce site.
Short of coding a bespoke prototype, I haven't yet found an app which has sufficient support for variables.
Actually, the 25 variables limit was removed in the latest 5.6 update. They now only "recommend" you use 25 or less and only for IE's sake:
http://www.axure.com/releaseHistory.aspx
hi,
try http://simulify.com. It has full support for variables, which you can add in the clipboard and can be used from one page to another.
Very advanced and complete article about Wireframes. I agree that those frames are the most important when it comes to projecting own website. It is just like in a newspaper where we have some space that need to be filled with something that will match there. Without frames there would be complete chaos and no specific design would be possible (that is my opinion).I like projecting the frames first because there is always time to fill them with specific content and the whole site design is something earlier. I understand this process like building concrete under high building.
Nice list, Thanks for sharing.
GREAT overview! Very clear post!
I would have to add that paper prototyping is being replaced by http://www.MagneticPrototyping.com very fast.
Balsamiq is my fav software tool for wireframes!
-E
Great post and some really fantastic links here -- special thanks: @onextrapixel @wendy @Efraim, etc.
Another tool for digital wireframes is WireframeSketcher: http://wireframesketcher.com . It's a plugin for Eclipse but it also works in Aptana, Zend Studio and even FlexBuilder.
Apart from wireframes, WireframeSketcher also lets you create storyboards to model user interface interactivity. Some other interesting features include master components and widget styling with a wiki-like syntax.
Being an Eclipse plugin, this tool works equally well on Mac OS X, Linux and Windows. And you get for free source version control and projects.
Omnigraffle is one of the best tools to do this work on the Mac. There's an amazing list of stencils (from Mac to Yahoo to iPhone) that you can plug in here. I can't believe it didn't make your list.
I'm amazed Axure wasn't mentioned in the article.
very interesting and very usefull. thanks
Excellent article, people!
I would like add something: Adobe FireWorks does a great job of wireframing and you can even export a working prototype with rollovers.
http://adobe.com/products/fireworks/
And it's been around since Macromedia days. Its CSS Export also got a lot better with the CS4 upgrade.
-Tommi
Balsamiq and Fireworks work for me....
nice post.
As soon as I stumbled upon this article I felt I must mention Microsoft Expression Blend. It comes with a new storyboarding feature called SketchFlow where you can create interactive wireframes. The user interface controls (textboxes, buttons) in this mode even come in "wireframe flavor" where they look exactly like what's in that picture in this article under the heading "The Wireframe", except that these controls are fully-functional. There was a great demonstration of this at MIX 09 at http://videos.visitmix.com/MIX09/C01F
I was looking at MS Expression Blend. One of other interesting features is it supports WCF(?) that appears to feed into .net based desktop applications.
Have seen Axure, too. Definitely the high-end professional standard for some.
definitely a good read.
great tips for beginner web designer.
I just did a wireframe with InDesign, but need to make drop down menus... Do any of the suggested programs do that? I avoided Fireworks because you can't make pdfs of the wireframe... and I thought that'd be useful. Thoughts?
@Todd Dawson
Actually, Fireworks has been able to export directly to PDF since version CS2 I believe. CS3 and CS4 can certainly do it in any case.
Also, if you have any of the Adobe Suites that has Acrobat Pro in it, you can print directly to the PDF printer driver from any app that can print including the one I use which is Axure.
Both Fireworks and Axure can create drop down menus easily as can many of the other apps discussed here. Even in InDesign you could probably fake it with buttons that show and hide different elements. Google "InDesign interactive PDF" and you will probably find articles and tutorials about it. The process will certainly be far more tedious than with any dedicated prototyping applications which have menu widgets or functionality built-in. The upside is that the interactivity will work natively in Adobe Reader. By printing from the other apps that don't export to PDF directly, you'll be lucky if even basic links work in the "printed" PDF.
Hi guys!
We offer a similar an completely web based tool for creating wireframes and screen mockups: http://www.pidoco.com - by the way, it's real-time collaborative!
One question: On what basis did you select your 9 suggestions? There are bigger (and more) players on the field. Did you test them anyhow?
Thanks, Michael
Fanctastic post, we will be directing our students to this post as well as featuring it in our Web Site Design Course material. THanks!
I too started a discussion for "Which is the best tool to create Prototype/Mockups in Mac", I got some feedback & recommendation for the following tools.
1. Omnigrafelle (Mac)
2. Balsamiq (Mac & Windows)
3. WFP (Windows)
4. Axure (Windows)
I see here lot of people have voted for Balsamiq & Omnigrafelle, now am really confused to pick up the best one :)
Anyways thanks for helping me out.
Thanks and thumbs up from me!
i use wix. easy to use, no need to reinvent the wheel. just drag and drop, copy and paste, then publish. flash, multi-media and mini-pages, don't need to know code or lose sleep over how to link. wix dot com definitely recommended.