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 from the link below.
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.
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 |
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.
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
Mockups
Once the above information has been received you will be supplied with mock-ups, see below, for you to review and make changes.
Comments
0 comments
Please sign in to leave a comment.