How Microsoft PowerPoint Can Be Your Favorite Mockups Tool

 

 

 

 

If you are a front end developer, a product manager, or even an entrepreneur working on an app or a website — you probably spend a decent amount time working on/with mockups.

Sure, in a perfect world all designs should go through a professional designer, but the world is not perfect; budgets are cut, designers move to new projects or different teams.
Bottom line: even well established & designed products go through UI modifications and someone needs to define those modifications. 

While Photoshop, Sketch, Balsamiq (and others) are great — I actually prefer using Microsoft PowerPoint for designing minor UI changes.

 

I’ve been doing that for years (despite having a lot of experience with Photoshop), and after showing my method to colleagues and friends, and seeing how impressed they were with the speed of this method - I decided to write this short guide, hoping to help others who may face similar needs. 

Here’s how you can turn PowerPoint into a brilliant designing tool:

1. Start with some screenshots

The first thing to do is take a bulk of screenshots from your app.
Note: if you are designing a completely new product you can use other apps as your reference to size, fonts, and layout.

Make sure to capture screenshots with elements you can reuse in your new designs.

 

 

Missbeez search result design — card represents an offer from a service provider which the user can enlarge to see more details and read recommendations.

 

2. Paste your screenshots on blank slides

Paste the screenshots on a PPT blank slides with no white background.
If you are pasting mobile screenshots let them fit the slide height. This is the best way to keep one size to all mocks (and avoid ratio issues).

 

 

 

 

3. Cut & duplicate the elements you need

Your next task is to create a bank of UI elements. 

1. Duplicate your screenshots and crop them (with the copping tool) to create smaller elements of your UI
2. Create a bank of elements: titles, buttons, thumbnails - all based on your existing UI
3. You can also create new elements with icons, shapes, etc. 
4. Make sure you use the same font and the right size (this step might become a bit tricky at times)
5. You can also hide some of your original screenshot by placing a shape on top of it and coloring it with the original color (using the color picker option) 

 

 

Here are some of the elements copied or created on top of the original screenshot (Missbeez App)

 

 

4. Design your mockup!

 

Now it’s time to modify your screenshots and create your new mocks:

You use your screenshots as your base canvas, and move your trimmed UI elements (and other objects) on top of them. 

This is a game of objects, you don’t need to draw anything new, just move objects around. 

This method is extremely simple and very safe because you stay consistent with the original design. 

 

 

Here are some time saver tips & tricks:

• Reorder layers by using ‘Bring to front’ & ‘Move to back’
• Copy parts of your UI by using the ‘Crop’ tool (in the ‘Picture Format’ tab).
• Color your new elements with the original colors of your app by using the ‘Color Inspection Tool’.
• Align elements using the ‘Align’ options.
• Distribute elements with equal spaces using the ‘Align’ -> ‘Distribute’ tool
• Group few elements together to move or copy them as one bundle

Once you get familiar with those tools (experienced PowerPoint users have an advantage) - you can make modifications to your UI with no time. 

 

Just copy/paste/crop elements, move them around, align, move some more, change a text here and there, and you are set. 

5. Duplicate your slides

Every change you make to your mocks is a perfect excuse to duplicate the slide. This way you can compare different design directions without having to manually show and hide layers.

I usually place 2–3 mobile screenshots on each slide and end up with 10–15 slides.
Once I have enough options, I ask for initial feedback from users and colleagues.

If you are good in what you do, most of them will select your favorite option.

 

 

 

 

6. Optional: Hyperlinks

Using PowerPoint’s hyperlinks — you can create interactive mockups by linking buttons to other slides. This is a great capability for demonstrating a workflow.

---

7. Show off your work

Presenting your work using PowerPoint’s slideshow is trivial and useful when presenting to your team, but the interesting part is to take those mocks back to their original environment: tablets or smartphones (see next section).

---

8. Back to mobile

I never create or approve any new design without testing it on mobile first, even if I got it from our amazing designer. Things that look great on a big screen can easily look too small or crowded on smartphones.

With PowerPoint you can select multiple elements and group them. This group can be saved as a picture that you can easily send to your mobile device and see how your mocks look and feel like on a real environment .

This step is crucial in order to check font sizes and overall usability.

 

 

 

The screenshots in this post are taken from the work on the Missbeez App.