Express Multi Event App Graphics Guide

The PSD template folder has all of the customisation design elements in your app, including an application icon, splash pages, background images, header logos, colour palette and the event box icons. Download the templates.




Application Icon

This icon is used as the launch icon on the device’s home screen. Users select this icon when they wish to open the application. 

Any content within the cropping area cannot be transparent.

 
Asset PSD Template File Required Size Format
Application Icon Application Icon.psd

1024 Width x

1024 Height px

PNG


Favicon

Favicon is the icon that user will see in the browser tab. It’s usually the same iamge as the app icon. Please use online favicon generator to convert PNG to the proper .ico format. (eg. http://www.favicon.cc/).




Splash Pages

The splash page is the loading screen when an app is launched.

Landscape Splash Page The landscape splash page is displayed only on tablets when the app is opened in landscape orientation.
Portrait Splash Page The portrait splash page is displayed on different resolutions of iPhone, Android and tablets while in portrait orientation.


Safe Area (1468 Width X 2750 Height px) The portrait splash page PSD contains the safe zone area. Any content that sits outside of the safe area is cropped on all devices.

safe

Asset PSD Template File Required Size Format
Portrait Splash Page  Splash_Portrait_ME.psd

2304 Width x

3072 Height px

PNG
Landscape Splash Page Splash_Landscape_ME.psd

3072 Width x

2304 Height px

 PNG



Background Images

The background images are displayed on all pages in the app, shown behind the events list. We recommend not adding logos or text to the background images as they are supporting graphics and they are likely to interfere with the content of the app.

Portrait Landscape
The QuickMobile Platform will resize the portrait
background image to comply with various mobile device sizes in portrait orientation and web app platform.
This image is displayed on tablets in landscape orientation.

 

Asset PSD Template File Required Size Format
Portrait Background_Portrait.psd

2304 Width x

3288 Height px

PNG
Landscape Background_Landscape.psd

3072 Width x

2304 Height px

PNG



Header Logos

The header logo is the image used at the top of the app home screen to brand the container. Please do not add any pattern or gradient as Android platform uses 9 patch images. Please read detailed information available on Android studio website regarding 9 patch images, https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch.

Please provide us with the header logos in the dimensions listed below. We will create the necessary 9-patch images for the Android platform.

 
Asset PSD Template File Required Size Format
iPhone Header_logo_iPhone.psd

1242 Width x

291 Height px

PNG
Tablet (Landscape) Header_logo_landscape_tablet.psd

3072 Width x

200 Height px

PNG
Tablet (Portrait)* Header_logo_portrait_tablet.psd

2304 Width x

200 Height px

PNG
Android (XXHDPI) Header_logo_xxhdpi.psd

1080 Width x

256 Height px

PNG
Android (XHDPI) Header_logo_xhdpi.psd

642 Width x

150 Height px

PNG
Android (HDPI) Header_logo_hdpi.psd

480 Width x

114 Height px

 PNG
Android (MDPI) Header_logo_mdpi.psd

320 Width x

74 Height px

 PNG
*Web App platform uses tablet (portrait) header logo
Please include transparency with Android 9-patch header logos when saving as a PNG format


Event Box Icons

The event box icons are used to identify QuickEvent to be added, deleted, or reloaded.

Asset PSD Template File Required Size Format
Add Event Add_event.psd

90 Width x

90 Height px

PNG
Delete Event Delete_event.psd

90 Width x

90 Height px

PNG
Reload Event Reload_event.psd

90 Width x

90 Height px

 PNG



Visual Style + Color Schemes

You can customise your app’s colour palette. See how these colors will be applied to your app below.

Transparent Visual Style

A Multi-Event App is set to transparent by default and the background image is blurred. The main customisable colour is the Bar Tint colour. All other colours will be skinned white and displayed on black semi-transparent cards.

mea1


Opaque Visual Style

Opaque Visual Style utilises the full colour palette. The background image is never blurred in opaque mode but will always be obstructed by content

mea2

 

 

mea3

 

Mockups 

Once the above information has been received you will be supplied with mock-ups, see below, for you to review and make changes.

mea4

 

Event App  by Lumi dark

Reveiwed and Approved by Product Team