UI Design & Rapid Prototyping in PowerPoint

Published in

unQut

9 min readMay 27, 2016

At unQut we provide & deliver industry-level native mobile application development, web services, product/corporate branding, consultation and a dedicated department for digital strategy engagement.

We find solutions to problems everyday, be it with our own products or from our clients.

Every client is unique, and every client has a unique problem requiring a unique solution. This is a great mindset to achieve unique and conversational results.

Every application task that comes in goes through 6 key initial process, these are:

Prototyping as an essential

The prototyping stage is a key process most often overlooked by startups and agencies. You need to validate your ideas and solutions by prototyping and testing them with colleagues, team mates or a sampled target group. You can actually gather real-use feedback during this stage so make sure it’s an integral part of your product development process.

Find the right tool you can live with

Pixate, Atomic, Flinto, Framer and Invision are just a few tools out there that can be use to create these interactions. Your options are met with the somewhat steep learning curves of these tools, their platform dependency or the initial financial investment required to plunge into them.

Say you want to create something as simple as this interactive scroll with a simple tab switcher…

…or something a bit more tasking such as a calendar app with a date picker and a schedule view.

The truth is you have to have a strong handle on some of these prototyping tools to accomplish this. One side of the narrative is you already possess tools capable of getting these interactions done.

To be blunt, a prototyping tool should simply allow you to get from screen A to screen B. That simple. All that is required is the ability to link sections of your screen (Screen A) to another screen (Screen B) [Think website with various navigation links]

Capabilities

Picking the right tool depends on what you want to achieve. For example, Framer gives you the power of code combined with the ease of visual editing. This is a great asset to have during the design hand-off stage to engineers.

I’m going to introduce you to a very familiar tool for UI design and prototyping.

You can dabble your feet in prototyping using PowerPoint. I’ll also set you on a good enough path to help you put your initial ideas into design using PowerPoint. Designs you can show off to friends, partners, the design team or investors when getting your ideas across.

Let’s begin by building our app UI

Let’s begin by mimicking Beep, an android app I was privileged to be a part of. Beep allows you to meet new people through mutual friends. it’s a fairly simple app with the basic profile picture, profile name with details, cover photo and a notification list.

I uploaded the assets I used here

Creating the artboard in PowerPoint

Let’s create our slide dimensions, aka our design artboard. We can do this by taking a screen shot of the Gmail Android app, dragging the screen shot into our PowerPoint slide, checking the dimension properties of the screenshot and copying those over to your slide Page Setup properties like so:

Pasting the Gmail screenshot dimensions into your Page Setup should get you started on the correct slide size to work in. Good luck getting those dimension in pixels 😩. Power point doesn’t play like that.

Don’t scale if you receive a dialogue pop up to do so after you click ‘OK’ on the Page Setup

Following the Android design guidelines

Our Gmail screenshot already follows the Android design guidelines so we don’t have to go reinventing the wheel here. This is why it’s best to use an app that has similar UI elements to the design you want to create.

First thing we want to do is get our app status bar.

First duplicate your screenshot and crop to the app status bar. You should have two items now in your slide. The imported screenshot and the duplicated one cropped to the status bar.

Crop to the status bar using the Crop tool highlighted on the left.

Getting the right font size and app bar icon in place

Grab your font tool and type in Inbox (you’ll see why in a few moments) now play with that font size till it perfectly fits the original’s screenshot. Make sure you are using Androids default font; Roboto. Now change the font colour to white and rename the text to Profile -see why?. We did this to get the right font size for our app title bar. Now drag over the option icon (three vertical dots) into your slide and position over the search icon.

Getting the app bar

Insert a •rectangle shape from your insert tab. Drag the inserted rectangle to match the height and width of the screenshot’s app bar. Using the colour picker, pick the Gmail app’s red colour. Send the rectangle shape we created behind using the Arrange tool so the text and option icon we dragged over are in front.

The rectangle shape tool: A great tool for creating buttons and other UI elements. Don’t let your imagination stop you.

Creating your three tab icons (Profile, Contacts, Messages)

Duplicate your app bar to get our tab background. Change the colour to white and drag it below the app bar making sure the edges touch. That’s going to serve as a background base for our three tab icons. Now drag the three icons [ic_account_circle_black_24dp, ic_people_black_24dp, ic_chat_black_24dp] (too lazy to change the file names) into your slide and arrange them on the tab background.

You should have something like this:

The selected item is the app bar we created using the rectangle shape

Remember, you need not create your own icons at this stage. You are just testing out your ideas. Grab what you can from www.design.google.com/icons

Creating the cover photo

Drag the cover photo [Cover-pic-1.png] into your slide and position that below the tab background we just created. That simple. Any excess image you do not want to show you can crop out by using the Crop tool.

Creating the profile picture

Getting the rounded profile picture is easier than you think. Drag our profile image into your slide [user-1.png]. Go to Crop, but this time instead of selecting Crop, select Crop To Shape and select the Oval shape from the options provided. That easy. We want the profile picture to stand out so we add white outline.

You can use this trick to achieve the oval, rectangular or squarish shapes most profile pictures appear in.

The profile name and details

Work fast by duplicating the text we created for the app’s Title bar. Drag that on top of the cover photo and move into position as you see fit. Repeat this step for the other profile details.

You should have something close to this:

Notification bar

Duplicate (yes we’ll be doing a lot of duplicating) the red app bar we created earlier and drag that under the cover photo. Duplicate the app title (Profile) and rename that Notifications.

It’s very easy it is to build UI elements in PowerPoint with a bit of imagination.

Notifications

What we have for notifications are one user picture to the left, a notification heading with a subheading and an arrow pointing to the right (The arrow you can get from here as well.

By now I’m sure you’ve figured out how to get and create these elements (user’s profile picture, text and arrow icon) so I’m going to leave you to it.

Remember, we are still using the Gmail screenshot as our design guide. Make sure to match Gmail’s font size, paddings and positioning as best you can. This will help your designs stay true to material design proportions.

Just make sure you have something similar to this:

Quick tip: Get drop down shadows effects using the Shape Effect found here:

Contact screen

To create our contact screen we can create a new slide page and start recreating the contact screen UI elements one after the other.

The easier way: We already have most of what we need created in the profile screen slide, so duplicating that slide allows us to shave off a few repetitive processes.

Once duplicated we can rename the profile app title from Profile to Contacts. From here it’s a straight road to get the Contact’s User Picture, Name and Status Updates. These UI elements are similar to the notification details we just created. 1. Simply right click and Change Picture 2. Rename the notification heading to user’s name 3. Changing the notification subheading into the user’s Status Updates.

Repeat this process till you have this:

Quick tip: By right-clicking on a user’s picture you can change the image to a new one. The new image will embody all the properties of the old such as size, outline and oval crop. Do this to work faster.

Creating your hotspots

Think of these hotspot as links on websites. They will link parts of your screens to different slide pages.

You can create hotspots by right clicking on an element, selecting Hyperlink and selecting the This Document option. Next will be to select which slide you want your element to link to.

But, the right thing is to create touch points. This will allow you create a bigger hotspot touch area. Ideal for mobile and touch.

You can create touch points by inserting a rectangle shape over the area you want to link. At this point we want to be able to see through the rectangle shape so our three Profile, Contacts and Messages icons show. We can do this by reducing the opacity of the Rectangle shapes.

Getting a hotspot is a matter of selecting the touch point area you created, right clicking on that shape and selecting the hyperlink option. This should bring up a dialogue box. What we want to do is link the shape we selected to a slide page (using This Document). Next is to select the slide title to link to.

Creating Transitions

Transitions are a great way to simulate a native app feel when moving between screen in your prototype.

You can create transitions between screens by using the Transition tab. Test out the various transition options available. This will help you understand which options produce which effects. Also play with the animation time durations. It’s a great way to speed or slow your animations to get the right feel for your transitions.

Remember, keep it simple, keep it clean.

Go exploring

I’ve left enough room for you to make mistakes and find your own way back. By keeping an open mind, you can explore various tips and tricks that will get you comfortable enough when it comes to designing your UI and prototyping them in PowerPoint.

The point is to get your initial ideas down as quickly as possible. Visuals are powerful. Leave an impact by showing rather than describing, combine the two to make a greater impact.