Use Keynote or PowerPoint to Make App Mockups and Wireframes

by Ted Curran

If you’ve ever wanted to create an app for mobile, desktop, or the web, you might not know where to start. Creating interactive app mockups can help you explain your idea more clearly to collaborators, designers, developers, and investors. You could spend time and money mastering a specialized tool for wireframing, or you could use your trusty Keynote or PowerPoint skills to create a great interactive mockup. Throughout this article I’m going to refer to Apple Keynote mostly, since it’s my favorite presentation app and generally an easier tool to work with to achieve better results. However, much of this advice also applies to other presentation tools like PowerPoint, Google Slides, and even LibreOffice Impress. Any of these presentation tools can be put to good use to help you communicate your ideas, and to help you develop your own design sensibilities.

Mockups and Presentations aren’t so different

Presentation tools are great for mockups for a few reasons:

They let you easily stack and arrange shapes, images, and text boxes.

That’s really all you need to make a convincing facsimile of an app– just a bunch of squares with text in ’em, and maybe a few icons and images thrown in where they belong. You can experiment with making boxes with squared or rounded edges, borders, shadows, different color combinations, gradients, and different fonts. Try building icons out of common shapes (like a green circle with a checkbox inside, or a “NO” symbol from a red circle and a diagonal line). You might want to pick a favorite website or app to see if you can recreate it in Keynote. Try experimenting with the fonts that they use on your target device– you can use web-safe fonts, the Google Fonts that are so popular now, or device specific fonts for iOS and Android.

Each slide can be a “page”, each image a “button”

The same way your app might transition between “pages”, your presentation can easily link between slides. You can make certain hotspots in your design trigger a slide transition, which makes any part of your app mockup serve as a “button”. Once you learn how to link your elements and slides you can create a clickable mockup that performs just like an app.

They let you animate transitions.

All those cute transitions you use to make your presentations more lively can also help you focus on the interaction design in your app. Experiment with the types of transitions you can do between screens and when elements build in and out– these are the basics that give your app an appealing look and feel. You can play with the timing, order, and directionality of each animation with simple tools so you get them just right. (Hint: Less is more!)

You can use snazzy icon fonts, just like on the web

Web designers are in love with icon fonts like FontAwesome — take a look and you’ll probably recognize these icons from your favorite webapp, smartphone app, or mobile device UI. They’re really everywhere, and for good reason. They make it easy for designers to add great looking icons to their designs without heavy image files to slow your downloads. This guide shows you how to install FontAwesome on your computer and use it from within Keynote. These icons add a modern look and feel to your designs using glyphs that many people already know and understand.

There are nice UI kits designed to mimic popular devices

If you know you’re designing for, say… the iPhone, you can download a UI Kit with images of common iPhone design elements that you can modify. Many of these kits come in formats for pro-level designer apps like Photoshop, Illustrator, Sketch, and Omnigraffle, but Keynotopia and Keynote Kung Fu are two great packages designed expressly for use in Keynote and PowerPoint. They’re just made up of simple shapes and images that you can drag, drop, and resize in your presentation the way you’re used to. See Creating Interactive Prototypes With Keynote.

Presentation Tools have some nice image editing features

Even if you’ve never touched Photoshop, you can do some basic image retouching using just the tools in your presentation app. You can change the color settings, shape, and

Show and Tell

I’ve been doing a lot of prototyping recently in my new position at Pearson Learning, and my proudest design mockups are still top secret, so I can’t share them publicly (yet!) However, you can see the design mockup that helped us win the UC Hackathon for our app Picture Yourself in College. I created all of the buttons, graphics, and other elements for this app using only Keynote ’09, and then copy/pasted them into Tumult Hype to produce an HTML5-powered clickable website. This whole mockup took less than eight hours to create and won us the competition. Having this mockup gave the team a reference point to discuss how to move forward from a design, functionality, and content perspective. Take the time to develop a great mockup and it’ll save you time when it’s time to bring your vision to life!

What’s possible?

Take a look at this video from the creator of Keynotopia to see his workflow:

Keynote Prototyping Essentials from Amir Khella on Vimeo.

Tips for getting started

You may want to find out the pixel dimensions of the screen you’re designing for first. Then you can just set your presentation slide size to match (in Keynote & PowerPoint), and your mockup will be just the right size, adding to the realism of your mockup. You can start by downloading the “free with a tweet” Keynotopia bundle, open it up in Keynote or PowerPoint and start rearranging the elements to see what you can do. Alternately, you can just start playing with boxes and text to see how realistic you can make your app look. This may result in a mockup that doesn’t follow the official design guidelines for your target platform, but may also lead to interesting design ideas that you wouldn’t have stumbled upon otherwise. There is lots of help out there, so Google “mockups in Keynote” for a whole host of great tips. I hope this has at least opened your eyes to what you can do with these familiar tools.