How to design a microapp from Powerpoint

You don’t need a BFA or designer software to make impressive interfaces in Tiled.

While many microapps are created by design teams, you don’t need to be a professional designer to create interfaces like a pro. One of the great thing about microapps is that you can use any tool you’re comfortable with to design them, so whether you’re using tools like Sketch, Adobe XD/Illustrator/Indesign, or a presentation tool, you can create at any skill level. With some creativity, an experience-oriented mindset, and a hack or two, anyone with a computer can easily design microapps using Powerpoint, Keynote, Google Slides, or whatever other presentation tool you like best.

Unlike presentations that move in linear order from one slide to the next, microapps facilitate conversations because they contain multiple pathways through content like a web page or mobile app. This means adjusting your mindset when you set out to design a microapp. Every page you create in Powerpoint doesn’t have to be a page of your microapp. You can use pages as artboards to create elements like states, overlays, and scrolls to go into your microapp without making them pages themselves.

We’ll design one of our microapps in Powerpoint and walk you through some tips we use to turn static presentations into interactive experiences. Before you get started, you might want to check out our article about building from Powerpoint in our help center to make sure you’ve got the basics.

Note the consistent menu bar at the bottom of each page (and the highlight to indicate which page we’re viewing).

Tip 1: Provide pathways with consistent navigation.

Since your users will be moving between pages in a non-linear fashion, it helps to include some form of navigation system to make this more intuitive. Think of the menu on your favorite app or website — it might be a header, button, or sidebar. Decide what layout will make the most sense for your content, and then create consistent navigation on every page of your microapp so users can skip around at their own pace.

To do this, it can be helpful to plan out an outline of your microapp before you start designing. You might want to make a list of the content you need to cover, then make a basic sketch on paper to establish a visual outline for your ideas. From this outline, you can decide what tabs you’ll need in your menu, and what information can be placed in which sections.

Here’s how to do it: Design your menu on one slide of your document and group all your elements (text boxes, lines, shapes, etc). Then duplicate this slide to create the rest of the pages in your outline. This way, your navigation will be constant on each page and you can add unique elements to the rest of your canvas. Be sure to add something on each slide to indicate what page is selected, like an underline or highlight on the title of the page.

Powerpoint’s icon library makes creating buttons simple.

Tip 2: Use icons to simplify.

Icons speak visual shorthand that is crucial to quick communication — think of all the icons we rely on daily, like road signs, logos, and dashboard symbols. By using visual cues in headers, labels, and buttons, you can reduce the number of words you need to cram on a page and create quick pathways for users to take through your microapp.

Here’s how to do it: Designers spend a lot of time creating simple forms that get the point across, and the good news is you don’t have to. Try out the shapes already loaded in your presentation tool (Keynote and Powerpoint both have wide libraries of simple icons you can utilize) to create buttons and visual elements. For instance, in our microapp we used icons to signal videos and create day and night buttons using basic symbols.

We adjusted the transparency on the background of our cover page so we can put a video behind it in Tiled.

Tip 3: Use tiles to create interactive layers.

By layering assets in Tiled, you can bring depth and richness to your microapps that you could not achieve in Powerpoint or Keynote. For instance, videos or motion graphics can be placed behind titles to create a dynamic cover page, scrolls can be placed in modules to make text more organized, and galleries can be added to provide step by step instructions or examples. To do this, you’ll often want your assets to have transparent backgrounds so they play nicely in your layout.

Here’s how to do it: Unlock these possibilities by exporting a page as a PNG* (make sure your background opacity is adjusted to your desired level). Then you can layer PNG images with other files in Tiled to create engaging overlays, video backgrounds, or text scrolls. You’ll see we used this trick to create a transparent layer for our home page to place a video behind in Tiled for more visual interest.

Create assets to go inside your microapp by creating a new file and editing size in the page setup panel.

Tip 4: Change your page size to create custom scrolls.

When you’re designing a microapp, you aren’t confined by a slide to slide format like you are with a traditional presentation deck. This means you can get creative with page sizes to create scrolling sections within pages of your microapp. That will make it easier for users to navigate and process information by having less large blocks of text demanding their attention on a page. In our microapp, we’ve added a scroll for a long field of text.

Here’s how to do it: Create a new presentation separate from the one you’ve been using to design your microapp. Then choose file>page setup, where you’ll be able to change the size of your slide. (To figure out what size you need to make your asset, draw a shape on the page of your primary document where you’ll want to place your scroll and use that width, then estimate the length you think you’ll need). Then create the contents of your scroll on this page, export as a PNG*, and bring it into Tiled along with your other document.

These slides use buttons to access two states of the same page.

Tip 5: Break information into accessible states.

Because microapps aren’t confined to a linear format, viewers will use them at their own pace. To gain more insight into what interests your audience, give them more pathways to choose from by using states to split up information into portions that are easily understandable. Remember that every page doesn’t have to be entirely new information: make your pages less crowded and your microapp more interactive by only having specific sections of your page change in each state.

Here’s how to do it: Select elements you want to stay consistent from one page to the next to copy and paste in place on a new slide to create static sections that stay consistent from page to page. Then create buttons to transform other sections using states in Tiled. You’ll see in our microapp we created two versions of this page so we have dynamic sections for users to interact with.

*A note about exporting:

Sometimes you’ll want a transparent background for a specific page or asset, which will require exporting your slides as a PNG, like noted above. To do this, first ensure your background is at your desired opacity, then choose file>export, select PNG as your desired file format, and export only your current slide.

For the rest of your pages, we suggest you use a PDF when designing in a presentation tool like Powerpoint or Keynote. This will allow you to add all your pages into Tiled, where they will be automatically made into pages in the order you have them to save you some time. Then you can update pages with your PNG assets for overlays, videos, and more. To do this, choose PDF as your file format in the export menu when you’re ready to bring your pages into Tiled.

Make sure to give your pages unique names and export them consistently as those same names each time you make an update. This way, Tiled will automatically replace each page with the latest version as you upload them, and you won’t have to build your microapp again in order to update it.

With a few adjustments, we’ve transformed a static deck to an interactive microapp to provide a much more simple content experience. Want to get a feel for a microapp in action? Visit our showcase account to get some more inspiration.

Whether you’re a microapp design expert or just starting on your first, we want to hear from you! Tell us your best tips and show us your creations on LinkedIn or Twitter, and as always, please reach out if you have any questions at help@tiled.co.

Getting started with Tiled? Take a look at our help center to learn more about building and sharing microapps or visit tiled.co to learn more.