Building Mockups in Keynote

I recently discovered an awesome secret for quickly creating high fidelity product mockups. The secret is Keynote.


Apple’s Keynote is an amazingly powerful tool for quickly creating mockups that look really good. How did I discover this secret?

In the work that I’ve been doing with FamilySearch partners, I received a design completely built in Powerpoint. I was shocked when I clicked on one of the elements and found that the design was completely editable! All of the form elements, the graphics, the marketing copy, everything was native Powerpoint! That’s crazy! Why would you ever want to design products inside of Powerpoint when it is so inferior to all the other design tools out there? Adobe Illustrator is the tool that real professionals use, so why would anyone ever use Powerpoint? Ick!

Well, it turns out that almost everyone that works in an office knows how to use Powerpoint. This includes product managers, engineers, architects, designers, marketers, etc. Almost everyone in the office has Powerpoint installed on their computer—Mac or PC. Documents become very sharable, and if wording or another element on the page should be changed, anyone can change it. This is really powerful. The ability to step through a sequence of screens is also really powerful.

But wait! didn’t you start this post talking about Keynote? Why are you talking about Powerpoint? Well, most of what I’ve stated above is also true about Keynote. It is true that because Keynote is a Mac only product, it isn’t as globally available in the office place, but Keynote allows you to export your presentation into various other formats—including Powerpoint. Keynote is a much better product for laying out page design than Powerpoint.

If you would like to get started building mockups in Keynote (or Powerpoint), here are a few resources to help you get started.

Watch this Presentation! This is what finally convinced me to try this out. There are some really good tips and tricks for speeding up your workflow.

Another article talking about the power of Keynote.

Keynotopia provides standard UI elements for building mobile, desktop, and web applications. You can get the Bootstrap elements kit for free by paying with a tweet. I highly recommend getting the Bootstrap kit if you need to build web user experiences.

Keynote Kung-Fu is similar to Keynotopia in that it provides a bunch of templates for building your mockups.

Watch the Keynotopia Tutorials. Although the tutorial videos are from an older version of Keynote, the videos show how some good strategies for putting together your mockups.

Vision Documents

I just learned about the concept of a Vision Document. This seems to be a great concept for beginning any new project. The person describing it to me said that it is helpful to write a faux “Press Release” of how this feature or product would be described to the customer. This helps to keep a customer focus on what you are developing/delivering. I’ll have to keep that in mind for my next project.