Library Mobile Branding Guidelines

This guide outlines the individual Branding Assets required for use on the Library Mobile Platform. All configuration in this document is added and maintained within the Library Mobile App Manager.

Each Library Mobile app is branded based on your institution ’s branding guidelines and colors.

Our app visual templates include a few branding options from which you may choose. Based on the information provided in the configuration form, your Ex Libris Library Mobile team will create the customized branding of the app and apply it to the Library Mobile environment.

The Library Mobile Branding Guidelines is intended for graphic designers, App Manager users, and project managers. It outlines the individual Branding Assets which compound the branding process. If you choose to create the branding in-house, you will find all the needed information in this guide.

This guide will also be helpful if you wish to make changes after go live.

Platform Independent Assets

The assets discussed in this section span the different application platforms. These assets and branding will be applied across iOS, Android and the Responsive Web.

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 blue 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:

iOS

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 blue 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 an example of blue iOS color configurations.

Android

Homepage Header

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

Responsive Web

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.

Summary of Required Branding Items

Here is a summary list of all the items above which are required for the branding process.