QuickEvent Graphic Guidelines

 
The PSD template folder has all of the customisable design elements in your app, including splash pages, background images, logo, colour palette and the component icon set. 
 
While component configuration enables you to modify the appearance of certain components, the appearance of the overall app interface is controlled by a group of settings referred to as the brand. App Manager users with Admin or Event Admin permissions can edit brand data. 
You can customize the following app properties using the Branding interface:
  • splash page image interface 
  • background image
  • interface colors 
  • most icon and button images
You can define the brand from scratch if you want, but typically it is easier to apply a theme—a predefined brand—to your app, which overwrites the existing brand data. You can modify the brand after applying a theme, so a theme can be a basis for your final brand rather than the end state itself.
sea1-1

The Splash 

The Splash Page is the full screen image the user sees for a few seconds when they open the app. 



Portrait (mobile & tablet)

This splash page image is displayed on all mobile devices, and on the iPad when the tablet is rotated to portrait orientation. The image must be a .png image at least 1536 x 2192 pixels in size. To define the image, click the Select an image button and use the file browser to select an appropriate image.

Landscape (tablet)

 
This splash page image is shown on the iPad when the tablet is rotated to landscape orientation, and should be defined if your app is available for the iPad. The image must be a .png image 2192 x 1536 pixels in size. To define the image, click the Select an image button and use the file browser to select an appropriate image.
This image is meant to be displayed on one device in one orientation, so it is never cropped or scaled.

Asset PSD Template File Required Size Format
Portrait Splash Page Splash Portrait (Mobile&Tablet).psd

1536 Width x

2192 Height px

PSD*, PNG
Landscape Splash Page Splash Landscape (tablet).psd

2192 Width x

1536 Height px

PNG



Background Image

background image appears behind most interfaces in the app, and will be visible most of the time if you have the Visual Style set to Transparent. As background images are displayed behind other interface elements, it is best to make them unobtrusive so that they do not visually compete with icons and text.


Portrait (mobile)
This background image is displayed on all mobile devices, and may be cropped or resized as necessary to fit the device. As the edges of the graphic may be cut off when displayed on certain devices, ensure the image does not feature any important graphical information or text near the edges. See Splash page and background image cropping for more information.
To define the image, click the Select an image button and use the file browser to select an appropriate .jpg or.png image 707 x 1096 pixels in size
 
Portrait (tablet)
This background image is shown on the iPad when the tablet is rotated to portrait orientation, and should be defined if your app is available for the iPad. As it is only meant to be displayed on one device in one orientation, this image is never cropped or scaled.
To define the image, click the associated Select an image button and use the file browser to select an appropriate .jpg or.png image 1080 x 1920 pixels in size.
 
Landscape (tablet)
This background image is shown on the iPad when the tablet is rotated to landscape orientation, and should be defined if your app is available for the iPad. As it is only meant to be displayed on one device in one orientation, this image is never cropped or scaled.
To define the image, click the associated Select an image button and use the file browser to select an appropriate .jpg or.png image 1600 x 1400 pixels in size.
 
Asset PSD Template File Required Size Format
Portrait (mobile) bg_portrait_mobile.psd*

707 Width x

1096 Height px

JPG, PNG
Portrait (tablet) bg_portrait_tablet.psd*

1080 Width x

1920 Height px

JPG, PNG
Landscape (tablet) bg_landscape_tablet.psd*

1600 Width

1400 Height px

JPG, PNG

 

Event Logo

The Event Logo is the image used at the top of the navigation menu as well as at the top of the Activity Feed feature to identify the event.

An image added here will appear as the event icon in a event app, will be displayed at the top of the 9 icon navigation menu and can be configured to appear at the top of the slide-out navigation menu, Activity Feed, and survey results reports. The logo will never be cropped, but it may be proportionally scaled depending on the device, and note that it supports transparency (the background shows through in those areas of the logo that are designated as transparent).
To define the Logo image, click the Select an image button and use the file browser to select a .png image 640 x 200 pixels in size.

 
Asset PSD Template File Required Size Format
Event Logo event_logo.psd

640 Width x

200 Height px

PNG


Icons

Icons are divided into two groups: component icons, which are the component-specific icons that appear in the main menu, and system icons, which typically appear in other interfaces (although some may appear in the main menu as well). Note that the App Manager shows component icons associated with all components, including those that are not part of your app. Even if you intend to complete rebrand your interface, it is unlikely you'll need to change all icons.

To define a given icon, click the icon and use the file browser to select an appropriate image. The image must be a .png image 200 x 200 pixels in size.

 
Asset PSD Template File Required Size Format
Component Icon icon_main_{component name}.png

200 Width x

200 Height px

PNG


Visual Style 

Select Transparent to make text boxes semi-transparent, revealing the Background Image beneath, or Opaque for opaque text boxes with the Background Image showing around the sides.

Transparent Opaque
The background image is blurred.  The background image is not blurred. 
Not all colours are fully customisable on mobile devices and tablet; the titles, sub titles, and body text on the listing and the detail page will be skinned white and displayed on semi transparent black cards Full control over the colour palette in this mode. All colours will be pulled from the colour palette chosen on the QP


sea3         no trans




Colour Schemes (Opaque Visual Style)

You can customise your app’s colour palette. See below for an example of how your colour selections will be applied in “Opaque” visual style.

sea9sea10




Color Schemes (Transparent Visual Style)

You can customise your app’s colour palette. See below for an example of how your colour selections will be applied in “Transparent” visual style. Not all colours are fully customisable on mobile devices and tablet: the titles, sub titles, and body text on the listing and the detail page will be skinned white and displayed on semi-transparent black cards. However, selecting “Transparent” visual style

 

9.pngsea12


Event App  by Lumi dark

Reveiwed and Approved by Product Team