Branding Guidelines

App Name

The app name is the title that appears under the icon on the device’s homepage. This is the name that comes from the branding exercise.

Homepage Tiles/Icons

Below are examples of two apps. The app on the left uses full images as tiles while the one on the right uses icons on top of black colored tiles. The shape of the tile image can be selected in App Manager.

Tile width and height can also be set. Tiles are measured in Tile Units. In these examples, the timetable has a width of 2 Tile Units. Homepage Banners are 3x1 Tile Units. Tile dimensions are in this table:

Be aware that some devices do not support four columns. For these devices, the table is resized to 2 or 3 columns instead.

You can also set the hover color to change the tile color behind the icon when tapped or when the mouse hovers over the icon:

Note that when displaying icons on a tile, the Menu Option Text comes from App Manager. If you use a full image, ensure that you have the text as part of the image.

App Background Color

This is the color of the background, behind the tiles or images on the app.  
For example, below are two screenshots of the same app. One with white background and one with black background:

Overrides

Overrides enable you to customize all the above configurations depending on pre-defined conditions. These conditions include, for example, platform and screen size, allowing you to deliver completely different experiences depending on the end user’s device. These conditions are set in App Manager. The conditions and properties are visible in the following screenshots:

Recents Images

These images are used to show the Recent tiles used (to get to this screen in iOS, click on the header image. In Android, swipe right from the left edge of the screen). Due to the flexible nature of the homepage tiles, separate images are needed for the Recents screen. If you are using icons on tiles rather than images (See Homepage Tiles/Icons) these can be used as the Recents Images. 

The Recents screen for iOS and Android appears as follows:

App Icon

This is the image displayed above the app name on the home screen of the iOS device.  This icon is also used in iTunes to represent the app.  Different dimensions are required for different sized screens (e.g. iPhone and iPad) as well as iTunes requirements. Please also note that iOS automatically rounds the corners of all app icons, so you should avoid rounding the corners yourself in case it conflicts with Apple’s rounding algorithm.

Please see here Apple's app icon general and transparency guidelines:
https://developer.apple.com/design/h...ages/app-icon/

Splash Screen

The Splash Screen is displayed when the app is first opened.

​​​​​​

Homepage Header

The iOS homepage header can either be a graphic image or text.  If using an image, this can be transparent to allow the iOS translucent effect to work consistently in the header. We recommend that customers use header images that have transparent backgrounds. This will ensure that the header image has the same look and feel across all iOS devices.

Chevron Indicator

This image is placed right underneath the homepage header.  If this isn’t set, the app will use a default image.  
On the below examples, the left app has the default black chevron and the right app has a custom red chevron.

iOS color

This color is used throughout the iOS apps including the homepage toolbar (bottom of the homepage), the top of the positions screens, the text color and arrow for the back button and the cursor in the search function.  
In the below examples, you can see examples of orange, blue and green iOS colors configurations.

App Icon

This image is displayed above the app name on the home screen of the Android device.  This icon is also used on Google Play to represent the app.  Different dimensions are required for different sized screens (e.g. tablets and handhelds).

This link displays the standard Android icon requirements for creating app icons.

https://developer.android.com/guide/practices/ui_guidelines/icon_design?authuser=3 

The following link describes further the transparency required for Android app icons and the reasons for this i.e. notification icons

https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar?authuser=3

Android Feature Graphic

The feature graphic is displayed on top of the Google Play Store listing. This link provides additional information on the purpose of a feature graphic, and further links to Google provided design guidelines.

Homepage Header

The Android homepage header uses the app name and the app icon:

Header Image

This is the image that is used in the colored header bar on the Responsive Web Page for your app.  This image should be transparent otherwise the background color may clash with the header bar color.