DEV Community

Cover image for Create Convincing UX mockups using PowerPoint!
Chandrashekar SK
Chandrashekar SK

Posted on

Create Convincing UX mockups using PowerPoint!

Ever wondered if there was just a tool for everything. Indeed, there is one, Microsoft PowerPoint. One tool for all your needs.

Imagine you are a product manager or team lead who wants to showcase a new idea or a UX wireframe to the team. Of course, if you have had completed a course in Figma or Adobe XD, it would be walk in the park. Otherwise, it would be plain old tools like draw.io, Visio etc. And they look like this.

Image description

What if you could just leverage your existing skills and spend one time effort to create a common set of UX Components in PowerPoint and use them for your UX wireframe and prototyping and make your UX look way better to present and add some extra wow factor? And transform the same wireframe to this.

Image description

I understand that Figma/Adobe XD have their advantages and use cases which are beyond the scope of this article. What we are trying to do is just use existing PPT skills to create quick UX mockups without even talking to your UX team. For example, you are a small team and don't want to spend on expensive license or your UX person is on leave, and you urgently need a mockup.

Let's get started:
Our first step is to create a PowerPoint slide with the commonly used components (like button, text, slider, toggle), and couple of other slides as templates. Subsequently we can copy paste them to modify into mockup screens.

Image description

By the way PowerPoint has tons of vector icons to use for free.

A sample UX created in PowerPoint

Image description

With those components ready and in place, next is just your idea and creativity to keep created UX mocks, wireframes and prototypes.

Image description

I have a sample PowerPoint slide created with some basic components available at this GitHub Location:

You can download and get an idea.

Convert to prototype
Now that we have the UX wireframes ready, why not make a working prototype. To achieve this, right click on button, navbar or links and add hyperlinks, finally select the destination slide you want the navigation to take you to.

Once all these steps are done, hit F5 to go to slideshow, present your working UX prototype with button clicks taking you to actual screens. How cool is that?

Top comments (0)