Standalone & embedded app design

Standalone and embedded app design require only a few graphics, menu text and solid colours are controlled in the Core via the colours hex code.

app-asset-.png

app-hex-guide.png

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 1281px PNG
•    No transparency
•    200px 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.

Phone Menu Header
•    720 x 300px PNG
•    Transparency optional

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.

phone-screens.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.

tsblet.png

Menu Icons
Help your attendees easily find what they are after. Clear icons can improve the performance 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

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.

page_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.

email_header.png