How to Create Mockups, Wireframes, and UI Prototypes Using Microsoft PowerPoint

Why you should use PowerPoint

PowerPoint is an excellent prototyping tool disguised as a presentation software. It comes with lots of basic vector shapes, solid/gradient fills, strong layout engine, and the ability to create hyperlinks between slides, making it a great tool for laying out UI screens quickly, and then linking them together so that you can interact with them same way you would do with a real app.

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 use PowerPoint to create a prototype for an Android app in less than 30 minutes, using the Android Prototyping UI Kit. The app 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 states as interface screens, and links between states corresponding to user interaction. Here’s how I plan the dinner reservation Android app that I want 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 Bundle slides side by side with a new presentation, then create a slide for each interface screen, and copy elements from the bundle slides onto your app slides.

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.

Here is what the final prototype screens look like.

Step 4: Hyperlink it

Now the best part: To make your wireframe clickable, simply select an element on your slide, click the hyperlink icon from the insert tab, 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.

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

– Grouping shapes and elements together with CTRL+G makes it easy to move them around.

– Use slide masters to share basic screens and navigation items across multiple slides. That way, you won’t have to do lots 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.