Designing a new Navigation Bar

June 2018


This document is a guide for designers who are designing a new app navigation bar plugin or a new screen based plugin that includes a navigation bar.

App navbar Screen plugin navbar

Design of a new Navigation Bar

  1. Create the 3 states of a navigation bar for both platforms on all devices:
    1. Home Screen
    2. Inner Screen
    3. New screen that comes on top of a previous screen. (for iOS only)
  2. Define the distance between the elements on your navigation bar.
  3. Configuration can define:
    1. The interchangeability of the logo with the screen title.
    2. Alignment
    3. Other parameters.

Design of a screen based plugin including a Navigation Bar

When designing a new screen based plugin that includes a contextual navigation bar, for example 'article' screen, the screen will open on top of the previous screen. For a good UX, please keep the same distances on both navbars, to avoid jumps when a user is moving from one screen to your new screen. Follow the sizes of the default navigation bar in your app. Currently zapp offers one navigation bar only, with the following design spec:

  1. Buttons ratio: 1:1
  2. No space between the buttons.
  3. Logo or title takes the available width of the navbar, subtracting the navigation buttons size.


  1. Plugin Thumbnail of your new navigation bar. It will appear in the navigation modal.
    1. Front end size: W 268px x H 150px
  2. Canvas Preview of your navigation bar plugin. It will appear on the canvas.
    1. Front end size: W 640px x H 976px
    2. You can choose to show a few previews that will demonstrate several configuration states.
  3. Menu items thumbnails. Consult with the product person that has planned this navigation bar plugin. If there are additional menu items that are possible to be added for this menu, create a thumbnail for each one of them.
    1. Front end:
      1. W 268px x H 150px
      2. Icons size: approx 80px x 80px
    2. Client size: If you use icons for the navigation bar items, the ratio must be 1:1.
  4. Plugin cover image of your new navigation bar. It will appear in the plugin gallery.
    1. Front end size: W 278px x H 146px
  5. Initial Values - Provide the default configuration for each key of your design, so when a user opens the app with your plugin, it shows up in the ideal way you would like it to be demonstrated. Include:
    1. Styles: colors, fonts type and size, etc.
    2. Assets: provide 3x assets of the base design in the colors that match your default colors design.
  6. Right-to-Left - We encourage providing mirrored design for RTL apps.


  1. Fonts: Use System fonts
    1. iOS: SF Pro
    2. Android: Roboto
  2. Icons
    1. For both Client app and Front End Preview: Use the same icons, see Initial Values & Canvas Preview.
    2. Try using the material design icons for the Menu Item Thumbnails.
  3. Colors Use the following color code in your preview files:

results matching ""

    No results matching ""