Designing Your First Microapp

In this lesson
  1. Intro
  2. Elements of a microapp
  3. When to use your design tool or the builder

Intro

Microapps are interactive documents created in Tiled. Think of them as a hybrid between a presentation or PDF and an app or website. To design your first microapp, you’ll first need to go to your preferred design tool, where you can either start from scratch or open a microapp template downloaded from tiled.co/templates.

For your first microapp, we suggest starting from one of our customizable templates so you can understand how we like to lay out design files and save some time getting started.


Elements of a microapp

All microapps have a few essential elements:

  • Pages, which are the main building blocks of your microapp. Pages should contain most of your text and design elements and will be placed as backgrounds in the builder.
  • Navigation, which is how you’ll get from one page to another. When you’re designing your pages, be sure to add a design elements that can act as a button to the next page, whether that’s a top bar, a side bar, or next/last arrows. Then, to make your navigation functional, you’ll add hotspots in Tiled to link from page to page.
  • Assets, which are contents for the tiles you’ll layer on top of your pages in the builder to add interactivity. These can be videos, gifs, images for galleries, scrolling sections, embeds, and more.

All of these elements will be designed in your tool of choice and brought to life by adding tiles in the builder.

When to use your design tool or the builder

One of the great things about creating microapps is that you’re able to design them in whatever tool you typically use to create documents — this can be a UX design tool like Adobe XD or Sketch, a print design tool like Indesign or Canva, or even a presentation tool like Powerpoint or Google Slides. As long as you’re able to export your pages as JPEGs, PNGs, SVGs, or PDFs, that tool will work fine.

To create pages for your microapp, we recommend adding all your static elements to your pages in your design tool — this means design navigation, text, buttons, flat images, and anything that doesn’t require a tile to “move.” This will let you import your entire page in one piece and layer tiles on top.

You’ll also need to create the assets you’ll place in your tiles inside your design tool. Create these as separate pages or artboards, and be sure to leave space where you plan to place them in your microapp.

Once you’re finished designing, you’ll be able to easily create and replace pages and add tiles to create interactive hotspots and elements using your assets.