Keynote as a collaborative wireframing tool

Default avatar.
July 05, 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.

Paul Boag

Paul Boag is the author of Digital Adaptation. He is a leader in digital and user experience strategy with over 20 years experience. Through consultancy, speaking, writing, training and mentoring he passionately promotes digital best practice.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…