New Gen App: Colors & Design

Article Topics:

Colors
Logo & Background
Design
Custom Icons

 

Colors

All the colors for the new app are configured from Content > Branding (NEW) > Color Scheme (NEW).

colors1.png

 

If a business already has an app, the old color scheme can be migrated automatically to the new gen app by clicking Copy Old App Colors. The colors are migrated as follows:

 

Old Color Scheme

New Gen App Color Scheme

Background Overlay

Background

-

Navigation Bar Background

Text

Icon

Text

Text Only

Page Header Text

Header Text

Page Header Background

Header Background

Button Text

Button Text

Strokes and Buttons

Button Background

Side Menu

Side Menu Background

-

Widget Background

 

Some Important Tips:

  • You can even customize the color of your icons using the Icon
  • The registration form colors are taken from here if the colors are configured, even if the registration form appears in the old app versions and other places. Keep this in mind before you publish any color changes for your new gen app (even if this app isn’t yet available).
  • The following colors must be different:
    • Text ≠ Background, Side Menu, Navigation Bar or Widget
    • Background ≠ Text or Button Background
    • Button Background ≠ Button Text or Background

See Graphic Guidelines for tips on how to choose the right colors for your app.

 

Logo & Background

From Content > Branding > Logo & Background, add the logo for the app icon only.


From Content > Branding (NEW) > Custom Icons (NEW), add the logo for the app header:

colors2.png 

From Content > Branding (NEW) > Design (NEW), you can add a background image URL (including an animation). The image will be stretched to full screen. If no image is added, the background color will appear instead. If you add an animation (.gif), make sure to run it on loop (configured in the file itself).

Note: Web views (except registration form) display the old app background image if there is one (if not, then the new gen app background color; and if there isn’t one, then the old app background color).

 

Design

From Content > Branding > Design, only the icon set, font type, and navigation type (side menu vs. regular), will apply to the new gen app. From Content > Branding (NEW) > Design (NEW), you can configure settings that are only relevant for the new app.

Note: If you want to use a custom font, it must be selected before submission.

 

Custom Icons

The icon set is still selected from Content > Branding > Design. However, you can replace icons for the new app from Content > Branding (NEW) > Custom Icons (NEW).

 

The icon names indicate where they are used in the app and what the icon represents. If the icon name contains (custom), this means the icon is not used by default anywhere in the app. So if you choose another image for this icon, it will only be used for the button you choose this icon for.

 

The following icons are only available for the new gen app:

  • Stamp for redeemed punch cards
  • Stamp for expired punch cards
  • Placeholder for punches in a punch card
  • Logo for the app header


colors3.png

When migrating existing businesses to the new gen app, note the following:

  • The default icon set is the same for both the old app version and new gen app. You can replace the default icons for the old app from the Custom Icons and for the new gen app from Custom Icons (NEW).
  • If you replaced a default icon in the old app version, you need to also replace it for the new gen app (otherwise, the default will be shown there). From Content > Branding (NEW) > Custom Icons (NEW), click Copy Old Custom Icons to migrate all the custom icons added for the old app. Once all the icons are copied, you can either save specific icons individually or click Save All Copied Items to save them all.

    custom_icons.png custom_icons2.png

  • If you use the same layout block for both the old and new apps or if they share button (such as from the Gift screen), then you can choose either the icons of the old app or the icons of the new app—however, the same icon will appear in both.
Updated
Was this article helpful?
0 out of 0 found this helpful