Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Library Mobile Branding Guidelines

    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.

    All dimensions are in pixels unless specified otherwise. The recommended image format is png.

    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.

    library-mobile-01b.png        library-mobile-03b.png        Homepage-Alumni.jpg

    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:

    Height/Width (Tile Units)

    1

    2

    3

    4

    1

    180x180

    180x375

    180x570

    180x765

    2

    375x180

    375x375

    375x570

    375x765

    3

    570x180

    570x375

    570x570

    570x765

    4

    765x180

    765x375

    765x570

    765x765

    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:

    NoHover  HoverOver.png

    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.

    Item

    Requirements/Restrictions

    Icon on tile

    120x120

    Max: 50k

    Tile color

    Hex Value

    Hover color

    Hex Value

    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:

    library-mobile-01b.png        library-mobile-01bb.png

     

    Item

    Requirements/Restrictions

    Background color

    Hex value

    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:

    recents_ios.png        android_recents.png

     

    Item

    Requirements/Restrictions

    Recents Images (One per Menu Option)

    120x120

    Max: 50k

    iOS 

    Splash Screen

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

    Item

    Requirements/Restrictions

    iPhone Splash Screen

    640x940

    iPad Splash Screen (Portrait)

    768x1024

    iPad Splash Screen (Landscape)

    1024x768

     

    Splash-1.jpg​​​​​​

    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.

    ios_header_01.png      ios_header_02.png        

     

    Item

    Requirements/Restrictions

    iPhone Graphic Header

    Transparent 640x88

    Max: 100k

    iPad Graphic Header

    Portrait: Transparent 1536x88

    Landscape: Transparent 2048x88

    Max:100k

    iOS Header Text

    32 characters

    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_header_01.png        ios_chevron.png

     

    Item

    Requirements/Restrictions

    Chevron Indicator Image

    71x19

    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.

    ios_color_03.png        ios_color_01.png        ios_color_02.png

     

    Item

    Requirements/Restrictions

    iOS color

    Hex Value

    Android

    Homepage Header

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

    Android header background color cannot be customized and will always be the OTB gray as seen in below example. (Android restriction)

    android_header.png

    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.

    web_header.png

     

    Item

    Requirements/Restrictions

    Responsive Web Homepage Banner

    339x73

    Max: 15k

     

    Summary of Required Branding Items

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

     

    Item

    Requirements/Restrictions

    Icon on tile
    120x120
    Max: 50k
    Tile Color
    Hex value
    Hover Colour
    Hex value
    Background color
    Hex value
    Recents Images (One per Menu Option) 120x120
    Max: 50k
    Homepage Banners 570x180
    Max: 50k
    iPhone Splash Screen 640x940
    iPad Splash Screen (Portrait) 768x1024
    iPad Splash Screen (Landscape) 1024x768
    iPhone Graphic Header Transparent 640x88
    Max: 100k
    iPad Graphic Header Portrait: Transparent 1536x88
    Max:100k
    Landscape: Transparent 2048x88
    Max:100k
    iOS Header Text 32 characters
    Recents Indicator Image 71x19
    iOS color Hex value
    Responsive Web Homepage Banner 339x73
    Max: 15k
    • Was this article helpful?