An article I was reading about photoshop

href=”http://netdna.webdesignerdepot.com/uploads/2011/05/thumb1.png”> class=”image-border alignleft” title=”thumb” src=”http://netdna.webdesignerdepot.com/uploads/2011/05/thumb1.png” alt=”" width=”200″ height=”160″ />Some people collect stamps, others spot trains; I have become obsessed with wireframing software.

I have tried and fallen in love with countless applications, from href=”http://balsamiq.com/”>Balsamiq to href=”https://gomockingbird.com/”>Mockingbird to href=”http://www.flairbuilder.com/”>FlairBuilder. Although each has felt like true love, over time my gaze has wandered, and I find myself flirting with another tool.

They all look so alluring, but over time I see their shortcomings. Perhaps I am just too fussy. Perhaps my needs are too unusual. What I really want is a tool that fits the way I do things, rather than me having to fit the tool.

Do you have a favorite wireframing tool of your own? Do you even see the need for one? If so, do you go for all the bells and whistles or just a quick and dirty solution?

id=”more-23739″>

href=”http://www.flairbuilder.com/”> src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/1-flairbuilder.jpeg” alt=”FlairBuilder” /> /> Applications like href=”http://www.flairbuilder.com/”>FlairBuilder are increasingly powerful, but sometimes just too complex.

class=”spacer_” />

Why collaborate on wireframing with clients?

For me, wireframing is a collaborative experience. It is not something I do alone in a darkened room. Rather, I share the process with my clients.

I believe in sitting around a table with the client and thrashing out key pages in wireframe format. This has four benefits:

1. Engages the client /> By wireframing with the client, they feel a part of the process, and this helps to build a solid working relationship.
2. Ensures momentum /> By wireframing together, you avoid endless revisions. Establishing a solid direction for key pages happens in a matter of hours.
3. Commits the client /> If the client is involved in creating the wireframes, they feel a sense of ownership over them and the website. The solution become as much their idea as yours. Consequently, they are less likely to reject the design later.
4. Serves as a common reference /> Creating wireframes collaboratively ensures that everyone understands them. The wireframes serve as a common frame of reference for everyone throughout the project.

src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/2-wireframe-client.jpeg” alt=”wireframing with the client” /> /> Wireframing with the client has numerous advantages.

However, the process is not without its challenges.

class=”spacer_” />

Looking for a quick and dirty solution

In many ways, wireframing by yourself is much easier. You have time to think, tweak and refine. This is hard to do with a client in the room. Collaborative wireframing is about quickly mocking up ideas and discussing them. So, you need a tool that facilitates that goal.

Your wireframing tool needs to be:

• Quick to use /> Nothing’s worse than a client sitting around as you desperately battle with a wireframing tool to demonstrate an idea.
• Easy to revise /> In a collaborative process, the discussion will lead you to try out loads of subtly different approaches. You will have to be able to alter the wireframe quickly.
• Easy to understand /> Wireframes have to be clear and descriptive. Clients don’t have the benefit of our experience in working with wireframes and so can be easily confused.
• Professional-looking /> An idea can be cheapened by the presentation. It helps if the tool can produce a wireframe that looks like a well-considered, high-quality solution.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/3-professional-flexible.jpeg” alt=”Example Keynote Wireframe” /> /> The wireframing tool should look professional and yet be flexible enough to allow for quick iteration.

Traditionally, collaborative wireframing sessions have been done with pen and paper, but this is not always the best solution.

class=”spacer_” />

Why not pen and paper?

Don’t get me wrong. Pen and paper offers a number of advantages for collaborative wireframing, and it will always have a place. In fact, I would go so far as to say that most collaborative wireframing sessions should start with pen and paper.

The great thing about pen and paper is that it’s inclusive and quick. Anyone can pick up a pen and start scribbling; it requires no special skill. And the whole room can start sketching at the same time; there is no single person with their hand on the mouse.

Pen and paper also feels disposable. Screwing up on a piece of paper and throwing it in the bin feels easy and carries no great sense of loss. This is crucial in the early stages of the wireframing process.

However, wireframing on pen and paper does have some drawbacks:

• Not easy to revise /> When ideas are flying around and you’re scribbling one element after another, pen and paper wireframes can get messy quickly. You are often forced to redraw a page from scratch, which slows down the process.
• Not always clear /> With so many revisions and scribbles, wireframes often become confusing. They also tend to lack the detail of software-generated wireframes, leaving a lot of questions unanswered.
• Doesn’t look professional /> Unless you are a great artist, most of your wireframes will look like the ravings of a deranged psychopath (or is that just me?). This can cheapen the value of the underlying ideas.

src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/4-pen-paper.jpeg” alt=”Pen and paper wireframe” /> /> Pen and paper wireframes can look messy and confusing to the uneducated client.

In my experience, a good collaborative wireframing session contains a mixture of both paper and software-based wireframes.

So, with many software solutions being too slow, and paper failing in other respects, what’s the solution?

class=”spacer_” />

Keynote to the rescue

After much experimentation, I have settled on Keynote as my preferred tool. I suspect that PowerPoint is just as good, but as a Mac user my choice is Keynote.

Keynote is easy to use, and many people are already familiar with it. Best of all, the vast majority of us already own it, which saves some cash.

I love it because it makes it easy to throw wireframes together and then quickly revise them as the direction of thinking changes.

Best of all, Keynote wireframes can look very professional and provide a huge amount of clarity.

To achieve this, you need a great master template, one that contains all of the elements that normally appear on a website (text, images, search box, etc.). It is then simply a matter of copying and pasting these onto your pages.

Some href=”http://keynotopia.com/video-tutorial-keynote-prototyping-essentials/”>great videos out there show you how to create your own custom elements. If you’re lazy like me, though, a number of people have done the hard work for you. For a nominal fee, you can buy Keynote and PowerPoint templates that contain all of the web elements you are ever likely to include in a wireframe.

href=”http://keynotopia.com/”>Keynotopia /> href=”http://keynotopia.com/”> class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/5-keynotopia.jpeg” alt=”keynotopia” />

class=”spacer_” />

href=”http://keynoteux.com/”>Keynote UX /> href=”http://keynoteux.com/”> src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/6-keynote-ux.jpeg” alt=”Keynote UX” />

class=”spacer_” />

href=”http://keynotekungfu.com/”>Keynote Kung-Fu /> href=”http://keynotekungfu.com/”> src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/7-keynote-kungfu.jpeg” alt=”Keynote Kung-Fu” />

But the benefits don’t stop there.

class=”spacer_” />

A bonus

The way you present wireframes is crucial. Even if you are working collaboratively, chances are that not every stakeholder will be in the room.

Many wireframing applications require users to download a program or install a plug-in before they can view the file. Not so with Keynote.

Keynote is already a common application, but it also has some great exporting options. You can save wireframes in both HTML and PDF. Both options maintain the links between pages, so the user can click around the “website.”

Even better, Keynote lets you record a voiceover and save the wireframe as a QuickTime video. This enables you to talk stakeholders through the wireframe and explain your approach, ensuring that they understand the thinking that went into the final wireframe.

src=”http://netdna.webdesignerdepot.com/uploads4/keynote-wireframing/8-export-options.jpeg” alt=”Keynote export options” /> /> Keynote allows you to export the wireframe in PDF and HTML and even as a movie with voice narration.

Of course, no solution is perfect. Keynote is not the silver bullet of wireframing.

class=”spacer_” />

Limitations

In my experience, Keynote suffers from two problems as a wireframing tool.

The first is page size. Whereas other wireframing tools allow you to change page size on the fly, Keynote does not (at least not without distorting the elements). Also, the dimensions have to be the same across all pages. This can be frustrating if you don’t plan ahead. I get around this problem by making all of the pages huge; but this workaround is far from perfect and creates problems when exporting.

The second issue is that Keynote does not allow for complex interaction, despite the linking between pages. It cannot show JavaScript-driven functionality, so common on websites today. Of course, neither does pen and paper. And in a collaborative wireframing session, you would not normally need to demonstrate this level of interactive detail. If you do, then you’d probably be better off with a more complex prototyping tool.

class=”spacer_” />

Written exclusively for Webdesigner Depot by Paul Boag. He is the founder of the UK Web design agency rel=”nofollow” href=”http://headscape.co.uk/”>Headscape, author of the rel=”nofollow” href=”http://boagworld.com/websiteownersmanual/”>Website Owners Manual and host of award-winning Web design podcast rel=”nofollow” href=”http://boagworld.com/”>Boagworld.com. He is also addicted to rel=”nofollow” href=”http://twitter.com/boagworld/”>Twitter.

Now I am interested. Do you use Keynote or PowerPoint as a wireframing tool? What has your experience been? Also, do you wireframe collaboratively with clients? If so, what tool do you use? Let us know in the comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://mightydeals.com/deal/creative-essentials-bundle.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>Get The Creative Essentials Bundle (worth 00) for just width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2011/07/keynote-as-a-collaborative-wireframing-tool/”>Source

Webdesigner Depot