So, you’ve decided to create your first microapp. We love to hear that: Tiled was created with designers in mind to make interactive content more accessible than ever. If this is your first microapp, though, you might have some questions. To learn how to assemble your microapp and add interaction in Tiled, visit our help center to watch some quick tutorials. Here we’ll walk through some tips for designing your assets to create a cohesive microapp.
First things first, it’s important to remember that you’ll need to design your pages in a content creation tool before transforming them into a microapp in Tiled. We use Sketch to design microapps, but you can also use Illustrator, XD, or whatever tool you’re most comfortable with (you can even use a presentation tool like Powerpoint).
Think about designing microapps just like you would design an app. If you’re an experienced UX or UI designer, you have all the tools you need. If you’re not, that’s okay too — we’ll help you get started.
Before you even start on the visuals, it’s important to create an outline for your microapp to guide your design. Plan out what content will go on each page, and then determine what your navigation should include, which sections should flow where, and what kind of media will communicate most effectively. Then it can be helpful to make a quick sketch on pen and paper to start visualizing.
From there, use your design tool to create a wireframe to plan your layout. By thinking this all through before you start designing, you’ll have a structure in place to inform your decisions, and the heavy lifting will be done before you start your visual design. Note: When setting up your document, be sure to give unique names to each artboard. Then when you import updates into Tiled later, they’ll auto-replace so you won’t need to rebuild your microapp.
When designing your interface, think about how your layout can facilitate pathways through your content. Remember, microapps are more like apps or websites than documents or presentations. Users can explore the document in non-linear ways with whatever navigation you choose to give them. When creating your outline, plan how your pages will connect to each other to guide your users through the content you want them to learn and give them opportunities to explore. Think about how your microapp will be used. Will you co-browse with your viewers in a screenshare? Will it be shared on social media for users to explore on their own? Put yourself in your users’ shoes and try to make their experience as easy as possible.
When thinking about your journey, create visual hierarchies in your content to emphasize the things most important to your viewers. By creating a “first read” of your page with prioritized content for your users, you can establish suggested journeys and lead their attention to what matters. The easiest way to establish this hierarchy is by adding contrast to the elements you’ve prioritized. Size, color, spacing, and motion can all be utilized to make these items stand out on your page.
One of the advantages of microapps is their ability to include gifs, videos, motion graphics, and other types of media. Think about designing your pages in layers to incorporate these dynamic elements and other tiles like galleries, scrolls, and quizzes into the fiber of your content. Create artboards for your scrolls and galleries to plan how they’ll fit on your page before you assemble in Tiled.
A few tips for integrating interactive media in Tiled with the pages you design:
To see how we set up our artboards to design microapps in Sketch, feel free to download our Sketch file and take a look.
Unlike fully-coded apps, microapps are easy to update, so you can continuously test, learn from, and improve your content. It’s easy to replace pages, add new links and features, and make edits in Tiled, and all these changes will update automatically to your users. This allows you to learn from your users with pathway and microapp analytics, and then iterate accordingly. Maybe you learn most users are visiting on mobile, or important pages are getting skipped over. Microapps give you the opportunity to easily make changes, so you can add an adaptive version or redesign your navigation and keep testing your content.
The best way to learn is to jump in and get started. Design your pages in your design tool, and then start experimenting in Tiled to see what you can achieve. Once you design your first microapp, let us know! We’re always excited to see what can be created with Tiled.
Don’t use microapps yet? You should try it. Visit tiled.co or get in touch to experience it for yourself.
