Prototype Apps With PowerPoint
Why would you do such a thing?!?!
If you are a designer, and are already familiar with any of the afore-mentioned products, you might not want to use PowerPoint. All of those products have greater flexibility, and can achieve a higher level of polish if you know what you’re doing.
But if you’re not a designer, if you’re a Product Manager, an IT manager, or just an entrepreneur with an idea, PowerPoint was made for you.
- Nearly everyone has used it before.
- It has a ton of features that are dead-easy to use.
- Chances are, it’s already on your computer.
Wait, PowerPoint was made for making slideshows, not app prototypes!
Yes, but it has all of the necessary features for building very realistic mockups.
- You can add all kinds of shapes, images, and embedded media.
- You can turn any of the above into clickable links, allowing users to navigate through your presentation like a website or mobile app.
- You can add all kinds of sweet transitions and animations with no sweat.
Let’s Get Down To Business
Step 1: Know your aspect ratio.
Whether you’re going to be developing a mobile app or website, you need to know what the aspect ratio the device you’re presenting on is.
The aspect ratio is the ratio of the width to the height of your screen. Most laptop and monitor screens are 16:9 or 16:10. The same generally goes for phones, but it’s inverted (9:16, and 10:16) because they’re usually viewed in portrait mode.
Of course your app will need to be responsive in the wild, but this is a prototype in a vacuum, not a live app in the wild.
In order to make your prototype look as responsive as possible, you have to manually make it the right shape to fit your screen exactly. You can look your device’s aspect ratio on Google like so.
Alternatively, you can look up the screen resolution and calculate the ratio yourself.
On the design tab, you’ll find the Slide Size dropdown. Select “Page Setup.”
Punch in dimensions in inches, based on your target aspect ratio. For example, if your device is 16:9 aspect ratio, you could put in 8in x 4.5in. All that really matters here is the aspect ratio. Make sure the size in inches is bigger than your target screen size, if possible.
Step 2: Build your master slide
On the view tab, click “Slide Master.” You’ll get access to the master slides for your presentation. These are the various templates you’ll get to re-use from screen to screen.
You want to put any reusable elements here, such as an app’s navigation bar, or a website’s header. Then you will get those elements for free on all relevant screens.
Step 3: Build your interface!
At this step, you need to start dragging elements onto the screen. Several of them are really easy. A rectangle in PowerPoint already looks like a button. Just make sure the text size is appropriate. Images and even videos are also pretty simple.
Although it will be tempting to try to one-up Steve Jobs and Jony Ive and design your own user interface controls, I recommend using a kit of pre-built elements that already adhere to platform conventions (like Material Design for Android).
You also want to follow conventions defined at these sites if you’re designing for mobile apps. Google and Apple have spent millions of dollars paying PHD psychologists and designers to research and design these standards. It’s great we can take advantage of all that for free by just reading up on a few webpages.
Pre-built UI kits for PowerPoint vary in features and prices. I find Keynotopia’s paid version really nice. They provide iOS and Android controls for PowerPoint and Keynote.
In my opinion, the level of polish kits like Keynotopia’s bring is well worth the $50. However, if you want to experiment with free ones, there are a bunch of other options out there. Here are a couple:
You can download icons as a font. This makes styling and sizing them a no-brainer, because they behave the same way as text.
You don’t ever have to worry about an icon font becoming pixelated or distorted, no matter how big or small your icons are.
If you want to download icons as a font, I find icomoon.io an amazing resource. They have nearly every icon pack on earth already in their system, and you can upload your own if you want. Then you can bundle all of the icons you want to use into a single icon font for download.
I would recommend sticking to one icon pack though, for the sake of consistency.
Step 3: Navigate
Now that your interface is mocked up, you can add some interactions. If you right-click on an element, then click “Hyperlink…,” you can turn anything into a hyperlink to another slide, or web URL.
It will be tempting to link slides together using the “next slide” and “previous slide” settings, but use these judiciously, because they won’t adjust for re-ordering slides, or inserting new slides.
I do find however, that transitions work much better when using previous and next, so you might have to get creative with your slide positioning in some cases.
This turns out to be one of PowerPoint’s most powerful features when prototyping apps, since on mobile devices, apps take over web URLs. That means that when you link to a YouTube video, if you click that button on an iPhone or Android device, it will open the YouTube app instead.
If you spend some time linking your prototype with other apps, things can get pretty realistic, pretty quick, since you’re interacting with real apps and web pages at this point.
If you’re linking to your own site, you can even provide motivation codes to the URL so that you can track use of your prototype from Google Analytics. Who said PowerPoint was useless?
Step 4: Animate!
Once you’ve prototyped out your app’s screens, you can quickly add transitions to all of them. This is pretty straightforward, but one transition that I find extremely powerful is PowerPoint’s “morph” transition.
The morph transition automatically moves elements on one slide to match the next slide. This closely emulates native animation practices on Android, iOS, and the web. Simply duplicate your slide, move things around, resize a few things, apply the morph transition to your second slide, and PowerPoint takes care of the rest.
You can also use PowerPoint’s animation functionality to create artificial spinners and loaders, by selecting a “spin” animation, and telling the animation to repeat multiple times, or until the slide closes, depending on what you want.
Step 5: View it
PowerPoint is extremely useful for giving presentations, but here we can take it a step further. You can actually view PowerPoint presentations from mobile devices, which means you can test your prototype out on a mobile device.
Better yet, you can get your app in the hands of a few beta testers and get some valuable feedback.
Unfortunately, at the time of writing, Microsoft’s PowerPoint app for Android only displays presentations in landscape view. Even setting your device to portrait only won’t necessarily work. If your app is landscape only, that’s great, but that could be a big problem if you want to preview a normal, portrait app.
Luckily, there is an app that locks your phone’s orientation at a deeper level than most rotation lock settings that come with your phone. This app worked for me. Just remember to disable it when you’re done.
Step 6: Share your prototype
Since it’s just a PowerPoint presentation, this is the easy part. Here are a few ideas:
- Send it as an email attachment
- Upload it to Dropbox or Google Drive
- Put it on a company shared drive
- Add a download link on your website
Here are a few things you should be aware of
- Opening your prototype with a different version of PowerPoint may produce undesired effects, this includes Mac and PC versions.
- Opening your prototype with other slideshow applications, such as Google Slides is likely to mutilate your app. These other tools are also great for making prototypes, but you want to stick with the same tool you used from the beginning.
When presenting, you can demo from an actual device by using Chromecast. Just use the Google Home app to share your phone’s screen to the projector, then open your slideshow.
What kind of apps are you building?
I would love to see what you all can do with PowerPoint. If you’ve prototyped an app with PowerPoint, and want some feedback, or just to show off, please post a link to it in the comments.
You can find some downloadable examples, and get in touch with me on my website, robbyemmert.com.
Robby Emmert is a software consultant who specializes in aligning tech teams with business strategy, and launching custom software platforms. When he’s not researching new technologies or attending a meetup, he’s exploring Hong Kong or eating with his family at the closest 茶餐廳 (Cantonese Restaurant). You can connect with Robby at robbyemmert.com, LinkedIn, Instagram, or Twitter.