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

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…