Navigation

Keynote as a collaborative wireframing tool

Business, Resources, Web Design | Jul 5, 2011

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 Balsamiq to Mockingbird to 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?

FlairBuilder
Applications like FlairBuilder are increasingly powerful, but sometimes just too complex.

 

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.

wireframing with the client
Wireframing with the client has numerous advantages.

However, the process is not without its challenges.

 

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.

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.

 

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.

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?

 

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

Keynotopia
keynotopia


Keynote UX
Keynote UX


Keynote Kung-Fu
Keynote Kung-Fu

But the benefits don’t stop there.

 

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.

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.

 

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.


Written exclusively for Webdesigner Depot by Paul Boag. He is the founder of the UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com. He is also addicted to 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.

Share this post
Comments (no login required)
  • http://www.mynameisjay.com/ DesinaCoda

    Great article. I never really thought of using Keynote, but it makes perfect sense. Still it is going to be hard to kick the pencil/paper technique.

  • http://www.fullforcewebdesign.com Fro

    It’s nice to know about these tools, I have never used one before. After reading this post I think I will give it a try.

  • http://twitter.com/EdeeSims Eddy Sims

    John: I just took a look at LucidChart and it looks like the most useful tool I have seen for Wireframing. I imagine by signing up you can share wireframes with others?

    • http://pulse.yahoo.com/_SWPRYMQQ5GRPSD2NDHIU2VCLBQ John

      Yeah, you can invite others to view or edit wireframes with you. It supports real-time collaboration so you can even get team members or clients on there with you and be making changes simultaneously.

  • http://www.facebook.com/krishankuma Krishan Chauhan

    It is good tool, Lot of person like it and try to use in their business.. 

  • Andreas Wulf

    For Windows users, I recommend taking a look at our software PowerMockup, a wireframing plugin for PowerPoint. We just released version 2.0 today, which adds some great new features like “Instant Search” and the ability to add or import custom stencils.

  • http://twitter.com/mockuptiger Mockup Tiger

    Please checkout MockupTiger

    Fully webbased and lot of widgets

  • http://twitter.com/Roger_White Roger White

    I’ve found keynote the best suited for my projects. A really good tool that allows cross-platform interaction.