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

    Branding Guidelines

    Ex Libris can create branding assets for your app based on your institution's branding guidelines. If your institution does not have branding guidelines, provide the project team with as much information as possible regarding the branding you are interested in.

    In addition to the institution's branding guidelines, a list of static content tiles (with the tile names) is also needed for the designer.

    This guide 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, including a downloadable checklist of all the required assets.

    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.

    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.

    Item

    Requirements/Restrictions

    App Name

    12 Characters

    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.

    Homepage-1.jpg        Homepage-3.jpg        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:

    NoHoverHoverOver.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 black background:

    Homepage-bright.jpg        Homepage-dark.jpg

     

    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:

    IMG_0007.PNG        2017-09-03-10-50-54.png

     

    Item

    Requirements/Restrictions

    Recents Images (One per Menu Option)

    120x120

    Max: 50k

    iOS 

    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/

    IMG_0008.PNG        IMG_0009.PNG

    Item

    Requirements/Restrictions

    iOS App Icon

    Format: png

    29 x 29

    40 x 40

    50 x 50

    57 x 57

    58 x 58

    60 x 60

    72 x 72

    76 x 76

    80 x 80

    100 x 100

    114 x 114

    120 x 120

    144 x 144

    152 x 152

    512 x 512

    1024 x 1024 (*no alpha, iTunes Connect)

    please note that all icons should be opaque.

    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.

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

    transparent header.PNG      text header.PNG        IMG_0016.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 red chevron.

    text header.PNG        IMG_0018.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 examples of orange, blue and green iOS colors configurations.

    IMG_0019.PNG        IMG_0020.PNG        IMG_0021.PNG

     

    Item

    Requirements/Restrictions

    iOS color

    Hex Value

    Android

    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).

    2017-09-03-15-24-01.png        2017-09-03-15-26-40.png

    Item

    Requirements/Restrictions

    Android App Icon

    Format: png

    24 x 24

    48 x 48

    57 x 57

    64 x 64

    72 x 72

    96 x 96

    144 x 144

    192 x 192

    512 x 512 (with alpha, Google Play Store Listing)

     

    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.

    Item

    Requirements/Restrictions

    Android Feature Graphic

    1024 w x 500 h JPG or 24-bit PNG (no alpha)

     

     

    store header.PNG

    Homepage Header

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

    2017-09-03-15-41-14.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.

    header web.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. An Excel version checklist is also available for your convenience.

    branding checklist.PNG 

    Item

    Requirements/Restrictions

    App Name
    12 Characters
    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
    iOS App Icon Format: png
        29 x 29
        40 x 40
        50 x 50
        57 x 57
        58 x 58
        60 x 60
        72 x 72
        76 x 76
        80 x 80
        100 x 100
        114 x 114
        120 x 120
        144 x 144
        152 x 152
        512 x 512
        1024 x 1024 (*no alpha, iTunes Connect)
    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
    Android App Icon Format: png
    24 x 24
    48 x 48
    57 x 57
    64 x 64
    72 x 72
    96 x 96
    144 x 144
    192 x 192
    512 x 512 (with alpha, Google Play Store Listing)
    Android Feature Graphic 1024 w x 500 h JPG or 24-bit PNG (no alpha)
    Responsive Web Homepage Banner 339x73
    Max: 15k
    • Was this article helpful?