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.


appvn said…
Great to come to your site as the information shared is good and is explained in simple words. Good stuff you are created, thank you for sharing a nice article.
thq for sharing the short and simple steps easily

It​ ​is​ ​a​ ​great​ ​article.​ ​You​ ​will​ ​surely​ ​like​ ​this​ ​also​ ​because​ ​it​ ​is​ ​a​ ​great​ ​stuff,​ ​yeah
it’s​ ​give​ ​us​ ​lots​ ​of​ ​interest​ ​and​ ​pleasure.​ ​Their​ ​opportunities​ ​are​ ​so​ ​fantastic​ ​and
working​ ​style​ ​so​ ​speedy.​ ​Thank​ ​you​ ​for​ ​sharing​ ​the​ ​nice​ ​article.
Melony Fisher said…

What's up, after reading this remarkable paragraph i am also glad to share my know-how here with friends. fb login facebook
ajay ak said…
Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
SEO course in chennai
Anonymous said…
Love it. I use PowerPoint for a while and in most cases it's enough for my needs.