App Design

Standalone and embedded app design require the following graphics and colour values (added in the Core using hex codes).

Screen_Shot_2017-12-18_at_4.43.06_pm.png

app-hex-guide.png

 

Warning

Setting the colour of the content page detail bar background to white or black can cause display issues in other areas of the app.

Phone screens

Phone screens are made up of image and text layered on top of each other. Use transparency to add interest. Remember that legibility behind the menu icons is important – clean & simple is better.

Phone Menu Background

•    720 x 1600px PNG
•    No transparency
•    520px clear space at top

  • One graphic gets used for all devices. This means it gets cropped for smaller screens. The background gets cut from the top (it is always anchored to the bottom).
  • It is recommended to avoid busy or high contrast in any background pattern or image to ensure legibility of menu item labels that will appear over the top.

Knowledge_Base__KB__App_Asset_Phone_Background_Asset.png

Phone Menu Header

• 720 x 300px PNG
• Transparency optional

  • This image will require 50px of clear/safe space at the top for the Android notification bar overlay.
  • The header sits over the top of the background, so it can utilise transparency.
  • The update cog sits in the top right-hand corner, you can adjust the colour, but it cannot be moved.

Knowledge_Base__KB__App_Asset_Menu_Header_Short.png

Phone Menu Header Tall

• 1125 x 604px PNG
• Transparency optional

  • This image will require 135px of clear/safe space at the top for the iPhoneX status bar overlay.
  • The header sits over the top of the background, so it can utilise transparency.
  • The update cog sits in the top right-hand corner, you can adjust the colour, but it cannot be moved.
  • If you don't supply a tall menu header, the system will use the small header. If this occurs, the status bar will use the content page detail bar background colour.

Knowledge_Base__KB__App_Asset_Menu_Header_Tall.png

Example of the two header types on the iPhoneX:

  1. Screen one shows the tall asset, extending behind the status bar (a dark overlay is automatically added)
  2. Screen two shows the result of only uploading the stand 300px high header asset, using the content page feature bar colour behind the status bar
  3. Screen three shows the content page with the feature bar background colour set

Knowledge_Base__KB__App_Asset_Diagrams3.png

 

Tablet screens

Tablet screens are made up of a header graphic and a flat colour behind the menu.

Tablet Menu Header

• 720 x 400 px PNG
• Transparency optional
• Phone header will be used if not supplied

  • As the tablet menu’s background is a flat colour, the tablet header image is a great opportunity to include a background pattern or graphic.
  • Tip: Fade the bottom of the header graphic into the solid colour you choose for the menu. This will give your menu a smooth seamless look.
  • The update cog sits in the top right-hand corner. You can adjust the colour, but it cannot be moved.

Knowledge_Base__KB__App_Asset_Tablet_Menu_Header.png

 

Menu Icons

Help your attendees easily find what they are after. Clear icons can improve the usability of your app. We have created a few sets that we encourage you to use or refer to, they contain a wide range of icons which cover the needs of most event apps.

Menu Icons

• 171 x 128 px PNG
• Transparency optional

  • Our templates contain solid and line versions. They have been setup in Adobe InDesign which means a master page controls the background, and object & paragraph styles control the individual icons – meaning you can change all 100+ icons in a few minutes.
  • Menu icons are always loaded from left to right, top to bottom on phones and top to bottom on tablets.
  • Menu icon names are created in our CMS Core. They can be renamed and rearranged at any time.
  • Core has four default icon sets that can be tinted any colour to match your app design

Knowledge_Base__KB__App_Asset_Menu_Icons.png

 

Generic header & feature headers

These appear above content pages. A generic header appears throughout the app, but can be replaced for any page independently at any time allowing you to really add focus and functionality to each page.

Generic Header / Feature Header

•    720 x 405px PNG
•    No transparency

  • Allow 74px clear space at top back button (iOS) and system icons (Android).
  • A generic header is needed as a default throughout the app. Feature headers can be loaded above any content page, this will replace the generic header.

Knowledge_Base__KB__App_Asset_Menu_Generic_Header.png

 

Email headers

Include your event branding in automated emails ie. resetting an app password or downloading app notes.

Email Header

• 600 x 100-400px PNG
• No transparency

  • Height can be anywhere between 100px to 400px, use whatever suits your design.
  • The colour of the headers and buttons can be specified in Core.

 

IMPORTANT:

All assets must be supplied exactly as specified. The Core will not accept assets with any deviations from the specifications. Read more. 

Click here to access Adobe InDesign, Illustrator and Photoshop Templates

Was this article helpful?
1 out of 2 found this helpful