Page tree
Skip to end of metadata
Go to start of metadata

 

Apperian can customize certain user interface (UI) components of your web and native App Catalogs to incorporate corporate branding and enhance your users' experience. To brand an App Catalog, you must provide Apperian with custom images and other branding information as detailed on this page. The actual customization is performed by Apperian Support.

To brand an App Catalog, you must have the "Custom Branded App Catalog” premium product option. For more information on this product option, contact Apperian Customer Support.

To send custom branding assets to Apperian
  1. Create custom PNG files that meet the specifications described on this page.
  2. Add the files to a ZIP file. If you are providing assets for multiple platforms, organize the assets into subfolders for each platform. For example, create common (for the assets shared across platforms), iosandroidwin8, and winphone subfolders.
  3. Send an email to support@apperian.com
    1. Use the subject line: "EASE App Catalog Branding for Your EASE Account Name"
    2. Attach the ZIP file created in step 2.
    3. Include instructions to change any of the optional components.

Apperian then builds your custom App Catalogs and adds the App Catalog app files to your EASE account.

At this point, the Windows 8 App Catalog is ready to distribute to your users. With the iOS, Android, and Windows Phone App Catalogs, there are additional steps to complete (including signing the apps with your organization's credentials) before you can distribute the catalogs to your users.  For instructions, see Next Steps in Add the App Catalog App to EASE

Apperian manages the branding assets with your enterprise account. When there is a new release of the EASE App Catalog, Apperian rebuilds your custom App Catalog, uploads it to your EASE account, and notifies you of the change. You need to re-sign the iOS App Catalog app whenever a new version is uploaded.

 

 

On This Page

General Specifications

Adhere to these general specifications when creating custom image assets:

  • All App Catalog branding image assets must be provided in PNG (Portable Network Graphics) format with a resolution of at least 72 dpi.
  • Images should be non-indexed, RGB images.
  • Image file names are case sensitive; follow file naming specifications exactly.

Common Image Assets

The following table lists specifications for image assets that are shared by the iOS, Android, Windows 8, and Windows Phone App Catalogs. You can provide one version of each of these images and Apperian will use it when building all three catalogs. See iOS Image AssetsWindows 8 Image Assets, and Windows Phone Image Assets for specifications for image assets unique to each platform.

Size is listed as width x height in pixels. To support resolution independence, provide both standard-resolution and high-resolution (Retina display) versions of the images. File names ending with @2x are used for high-resolution displays. Where separate images are needed for iPhones and iPads, the iPad image file names end with _ipad.

All of the examples on this page are taken from generic, Apperian-branded App Catalogs. Common image assets are demonstrated using the iOS App Catalog.

Description

File Names

Size

Logo for Login page

Appears above the fields on the login screen.

login_logo.png

login_logo_tablet.png

392x190

666x322

Logo for content pages

Logo that appears at the top of all content pages (Popular, Categories, Updates, and All).

logo.png

logo_tablet.png
 

154x75

247x119

Header background for content pages

Image that appears at the top of each content page, behind the logo and tabs. On the Popular page, the image can be seen behind the Featured Apps section of the page.

featured_apps.png

featured_apps_tablet.png

640x460

2048x735

Footer background for content pages

Background image that appears in the bottom portion of all content pages (Popular, Categories, Updates, and All). How much of the image is seen depends on how much of the page is filled with the app list.

footer.png

footer_tablet.png

640x666

2048x796

Back to Top

iOS Image Assets

The following table lists specifications for image assets used in the iOS App Catalog specifically.

Description

File Name

Size

Small app icon

Appears in Spotlight search results.

AppIcon-29px.png

AppIcon-40px.png

AppIcon-58px.png

AppIcon-80px.png

29x29

40x40

58x58

80x80

Standard app icon

Appears on the home screen. The same images are used for both iPhones and iPads.

In addition to customizing the app icon image, you can also customize the name of the App Catalog that appears below the icon whenever it appears on the user's device (Home screen, Apps list). The name can be a text string up to 12 characters or 11 em dashes, including spaces.

AppIcon-57px.png

AppIcon-72px.png

AppIcon-76px.png

AppIcon-114px.png

AppIcon-120px.png

AppIcon-144px.png

AppIcon-152px.png

57x57

72x72

76x76

114x114

120x120

144x144

152x152

Launch image
 
Image that appears when the App Catalog is loading. Provide images for both portrait and landscape mode.

Default.png

Default@2x.png

Default-568.png

Default-568@2x.png


Default-Landscape~ipad.png


Default-Landscape@2x~ipad.png

 

Default-Portrait~ipad.png


Default-Portrait@2x~ipad.png

320x480

640x960

320x568

640x1136

 

1024x768

 

 

2048x1536

 

 

768x1024

 

1536x2048

Background for Login page

Background image for the login screen. The same images are used for iPhones and iPads.

loginbackground-568.png

loginbackground-568@2x.png

loginbackground.png

loginbackground@2x.png

320x568

640x1136

320x480

640x960

Back to Top

Android Image Assets

The following table lists specifications for image assets used in the Android App Catalog specifically.

To support different screen sizes and densities, you should provide versions in multiple densities, as listed in the the following table. The file name indicates the density. For general information on screen support, see Supporting Multiple Screens in the Android developer documentation.

Description

File Name

Size

App icon

In addition to customizing the app icon image, you can also customize the name of the App Catalog that appears below the icon whenever it appears on the user's device (Home screen, Apps list). Depending on the device, the string is truncated or shows ellipses after a certain number of characters unless you include a space to break and wrap the string. As a general guideline, if the string is more than the width of 6 em-dashes, use spaces to break and wrap the string. 

icon-hdpi.png
icon-mdpi.png
icon-tvdpi.png
icon-xhdpi.png
icon-xxhdpi.png 

72x72

48x48

144x144

96x96

144x144

Launch image
 
Image that appears when the App Catalog is loading.


To ensure that the launch image extends to the edges of the screen, use a Nine-patch image for the launch image assets. A Nine-patch is a resizable bitmap with stretchable areas that you define. Because Android devices are not all the same width and height, Nine-Patch images are needed in order to display certain types of graphics (such as background images) properly on all devices.

The stretched launch image will look like this:

splash-hdpi.9.png
splash-mdpi.9.png
splash-sw600dp-hdpi.9.png
splash-sw600dp-mdpi.9.png
splash-sw600dp-xhdpi.9.png
splash-tvdpi.9.png
splash-xhdpi.9.png
splash-xxhdpi.9.png

600x323

165x90

500x269

500x269

1000x538

490x264

800x430

1000x538

Android Nine-Patch Images

A Nine-patch is a stretchable bitmap image that Android automatically resizes to accommodate the contents of the View in which you have placed the image. You can use a Nine-patch image for graphics, such as the App Catalog launch page, where the image needs to extend to the edge of the screen. 
  

 Click here for more information on Nine-patch images...

To create a Nine-patch image, you take a regular PNG image and use a tool to define the stretchable patches and the content area (the area that cannot be stretched). Be sure to save the file with the .9.png extension.

You can use one of the following tools to generate a Nine-patch image:

You can also use a graphics editing program to create a Nine-patch image; for information on creating a Nine-patch image using Adobe Photoshop, see these guidelines. For additional instructions, see this simple guide.

The following figure shows how an image is stretched with and without the use of Nine-patch.

Not all images work well as a Nine-patch. The following example shows how a photograph image is distorted when it is saved as a Nine-patch image and resized:

Back to Top

Windows 8 Image Assets

The following table lists specifications for image assets used in the Windows 8 App Catalog specifically.

Description

File Names

Size

Application icon displayed on the application tile (both small and medium sizes), the Apps view page, and the desktop Title bar and Taskbar.


In the example above, the icon in the Apps list is organized under a category name "Apperian," but the category name will be customized for your organization during the branding process.
ApplicationIcon.ico100x100

Launch image

Image that appears when the App Catalog is loading.

EASE_background.png2048x1536

Back to Top

Windows Phone Image Assets

The following table lists specifications for image assets used in the Windows Phone App Catalog specifically.

Description

File Names

Size

Application icon that appears on the Apps list page.


ApplicationIcon.png190x190

Launch image

Image that appears when the App Catalog is loading.

SplashScreenImage.jpg768x1280

Tile image (small, medium, and wide)

Tile image that appears for the application tile on the Windows Phone Start screen. Provide the image in small, medium, and wide sizes.

FlipCycleTileSmall.png

FlipCycleTileMedium.png

FlipCycleTileLarge.png
(provide this image for the wide tile)

 

159x159

336x336

691x336

Back to Top

Optional Customizable Elements

In addition to branding the images in the App Catalog, you can also request that Apperian customize: 

Side Menu Items

Apperian can add custom items to the side menu of your organization's App Catalog. By default, the side menu contains:

  • The name of the organization to which the user is logged in 
  • The version of the App Catalog (this is useful when troubleshooting a problem a user is having with the App Catalog)
  • The user's first name and last name
  • The user ID
  • The Logout option 

In addition to these default items, you can add other menu items. To add menu items, you must provide Apperian with the name of each additional menu item and the desired text for the corresponding HTML file. If you would like specific styling (certain font types and sizes, images, background color, etc.) implemented in the HTML file, you should create and provide Apperian with your own HTML file.

Initial Tab Display

Apperian can customize which tab appears when a user logs in to your organization's App Catalog. The options for tabs are as follows: Popular, Categories, Search, Updates, or All. The Popular tab appears initially by default. 

Popup Message on Login Page 

For organizations using SSO authentication, Apperian can add a custom popup box that displays on the login page when a user launches the App Catalog for the first time. The popup box covers the login fields, and provides an acknowledgment button that the user must click in order to log in. Once the user has clicked the acknowledgment button, the popup will not display again unless the App Catalog is updated.

This feature is useful for displaying information you want your users to read before using the catalog. For example, you can display your company's terms and conditions along with an Accept button that users must click to acknowledge that they understand and agree to the terms and conditions.

UI Elements

Apperian can make some CSS modifications to certain UI elements in your organization's App Catalog to further enhance the unified branding. For example, a custom color for the background of the app cards that appear in the Featured Apps section of the Popular tab. For more information about the specific UI elements that can be modified, contact Apperian Support.

Back to Top

  • No labels