Skip to main content

App design guidelines

Introduction

We want to deliver the best experience to our users, and we expect developers to share our passion for great UX.

We prepared detailed guidelines and a component library for you to use in your application. Ensure that you follow
these requirements, as we will be reviewing and approving your Marketplace publication based on them.

To provide a great experience for your users, it’s a good idea to use UI and app components consistent with the rest of the Miro product UI. We recommend using Mirotone CSS components: this is Miro's base library, which enables everyone to design and build their Miro apps.

The goal of this design system is to enable makers to quickly jump into a simple, yet consistent and efficient user experience while creating their functional solutions. When a Mirotone equivalent component exists, it should be used in the UI design of your app. To design mockups for your app, there is a Mirotone UI Library for Figma. Copy the file from the Figma community, and use it as a starting point for your designs.

Guidelines

Structure

Authentication and authorization

  • The App facilitates a seamless authentication process between Miro and the designated third-party tool.

Onboarding

  • The purpose and function of the app is clear; as a customer I understand the benefits it will bring.

Help and settings

  • There are links and/or resources available for contacting the developer and learning more about the app.

External linking

  • All links that lead off Miro successfully take the user to the desired page. They are formatted and displayed correctly in line with Mirotone.

Navigation

  • A user can logically navigate through the app’s provided flow; there are no “dead ends” where the previous page or homepage are not navigable to.

UI consistency

Icons

  • Icon design is in keeping with Miro’s style as per Mirotone, or stays consistent with the design style of the app itself.

Components

  • Component design is in keeping with Miro’s style as per Mirotone, or stays consistent with the design style of the app itself.

Typography

  • Font usage throughout the app follows the default options provided by Mirotone, or stays consistent with the design style of the app, as long as it does not clash with the fonts in the overall Miro UI.

Usability

  • The main flow of the app is easy to understand, and users can leverage advertised functionality without too much effort.

Messaging and content

  • Messaging is consistent in tone throughout the app’s menus and screens, and no explicit or inappropriate content is present.

  • Miro's and other company's brands are used in line with the respective trademark agreements.

App names

  • Names used should not suggest that the app was built by Miro. If the Miro brand is used within the App name, then the pattern should follow <Your app> for <Miro product>.

Examples of supported names:

  • Image generator for Miro
  • Image generator

Examples of unsupported names:

  • Miro Image Generator
  • Miromage Generator
  • Miro-Image Generator

Asset resolution

  • Images generated or provided by the app have a high enough resolution that they appear clearly when zoomed in.
  • SVGs are preferably used.

Performance

Loading times

  • Developers should strive for performant apps in general. If there are wait times for an app's menus and functionality, then a loading graphic should be included.

Miro performance impact

  • Core Miro board functionality loading times are not impacted by the presence of the app.

Accessibility

Screen reader compatibility

Keyboard navigation

  • All actionable elements of the app's UI are available by keyboard navigation, and users can tab through and activate all the actionable elements on the screen (for example: checkboxes, input fields, buttons.)