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.


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

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…