How to use PowerPoint as a UI Prototyping tool

This post originally appeared on Keynotopia.com

Believe it or not, PowerPoint isn’t just a great presentation tool, it’s also an awesome app prototyping tool for Windows and Mac.

It comes with lots of basic vector shapes that , strong layout engine, and the ability to create hyperlinks between slides, and creating animations and transitions, making it a great tool for wireframing and prototyping user interfaces.

Each slide in PowerPoint represents a screen in your app, and each link between an element on a slide and another slide represents a transition from one screen to another in your app.

Here’s how I used PowerPoint to create a prototype for an Android app in less than 30 minutes, using the Android Prototyping UI Kit. The prototype is for an app that lets you select a group of friends to invite to lunch or dinner, find out where those friends are on the map, and the places that are close enough to all of them.

Step1: Plan it

One of the simplest ways to plan an interface is to visualize it as a user flow diagram with each state representing an interface screen, and links between states corresponding to user interaction. Here’s how I planned the dinner reservation Android app that I wanted to prototype.

Step 2: Sketch It

The next step is to create rough sketches for each screen. These sketches provide the high level direction for creating the prototype in PowerPoint, so don’t worry about putting too much detail there.

Step 3: Design It

Open the PowerPoint Prototyping UI Kit side by side with a new presentation, and create a new slide for each interface screen.

Copy elements from the UI Kit onto your app slides to design each screen individually, matching the sketches that you’ve created in the previous step.

To edit the labels on each element, simply double click the element and type the new label. You can also resize elements and change their colors if needed, using the Format tab on the Office Ribbon, since all vector shapes in the UI kit were created from scratch in PowerPoint, so you don’t need any external tools to edit them and customize them.

Here is what the final prototype screens look like.

Step 4: Link It

Now the best part: To make your prototype interactive, simply select an element on your slide, click the hyperlink icon from the insert tab (or press CMD+K or CTRL+K), and select the next slide in the user flow. That way, you’re creating a non-linear flow that simulates user interaction with interface objects to navigate to other screens, hence creating the illusion of a working app.

Step 5: Animate it

Next, you can animate the user interface you’ve just created by using a simple trick in PowerPoint that makes it feel like magic. To animate an interface between two different screens, duplicate the first screen, move, scale and modify shapes to their new locations and sizes, and then click on Morph Transition in the Transitions ribbon tab, which will animate each shape from the first slide to the second.

The animation below uses that technique to transition between two screens when the use clicks the select and close buttons.

Step 6: Test it on your mobile device

Save your presentation to a cloud drive, such as OneDrive or DropBox, and open it in the PowerPoint app on your Android or iOS device. You can tap on hyperlinked UI elements to navigate between different screens, and see the interface animate to transition from one screen to another.

Some productivity Tips

• Group shapes and elements together with CTRL+G makes it easy to move them around.
• Use slide masters to share common screens and navigation items across multiple slides. That way, you won’t have to do a lot of copy/paste, and you can update multiple slides with a single change.
• Copy formatting (style) of a shape or text by using CTRL+SHIFT+C and paste it onto a new shape using CTRL+SHIFT+V. That way, you can restyle multiple shapes at once using a common fill, stroke, shadow, etc… This works for text formatting as well.
• Keep your prototype simple, and focus on the main features that you’d like to visualize and test. Everything else is a distraction.
• Grab your PowerPoint Prototyping UI kit here, and create your next app prototypes in 30 minutes or less, using your favorite presentation tool