Custom Design Guidelines
Important: Before reviewing custom design options, we recommend considering our included template design setup -DESIGN SETUP GUIDE
Responsive Design
Our platform is designed to reflect your brand throughout across devices. This allows you're attendees to have the same on brand solution regardless of the device they choose to access the platform from. whether your users accessed on a full-sized desktop display, or a 4" mobile device - or something in the middle. Below is an example of the responsive design used throughout our apps to enable them to fill the screen with content, no matter how they're accessed.
Please find below an overview of image sizing and guidelines for various parts of your app:
HTML Homepages
App Branding
- As part of our services, we will customise the app in line with your event branding.
- To enable us to customise your app, please provide:
- An event logo and any supporting assets in vector formats (.ai, .svg, .eps).
- Relevant font files if required.
- Any supporting brand guidelines so we can be sure to we use your assets correctly. Please ensure any images are at full resolution and are not watermarked.
HTML Homepage Examples
App Icon
The app icon sits on the homescreen of your user's device, as well as the tab icon in a web app browser and represents the face of your app. It's good practice to provide this as a 1024 x 1024 px PNG file with no transparency.
You can download an example app icon with our other native imagery templates here - from the Native App Submission Details page.
The Widget Builder
In addition to the customizable HTML homepages we offer an easy to use widget-builder. This allows for predefined icons / widgets with ‘drag-and-drop’ functionality to move as required. Widget dimensions:
1. 816px x 400px For Long Widget Images / Titles
2. 400px x 400px For Short Widget Images
3. 400px x 800px For Tall Widget Images
4. 816px x 800px For Large Widget Images
Background Images
If you'd like to provide a background image for your app, the best practice is to provide one portrait-oriented image for mobile and one landscape-oriented image for desktop. Then, depending on the size of screen your app is viewed on, the correct background image will be shown. These images don't need to be specific sizes, however a good recommendation is 800 x 1600 px for mobile and 1920 x 1080 px for desktop. These images should be JPGs and compressed so their file size is not over 400kb each.
The Main App Background
This will appear behind the icons on the home screen and behind content throughout the app. We have the ability to apply the background image to specific pages only where required.
1. Showcasing the App Background Image on Desktop
2. Showcasing the same App Background Image on Mobile
Alternative Mobile Background
For some projects it can be in the best interest of the client to provide two backgrounds. This is to ensure the image is optimal across all devices including desktop and mobile. See example above on the right.
Side Menu Image & Banner Ads
The image which appears at the top of the side menu is the Side Menu Image. It should be sized 1024 x 512 px JPG or PNG file. Note: transparency is supported here!
Fonts
If you'd like to set a custom font for your app, please provide us with the relevant font files and we can set this up for you.
Custom HTML Content Pages
Images - Images inside HTML pages need to be responsive to be optimal across devices including different mobiles and desktop. With this in mind, it’s difficult to specify a specific images size. After the preferred design is mocked (see example 1), it’s best to then provide the various image assets in high resolution that are a minimum of 1920 x 1080, this will allow us to resize as required.
Icons - Please provide these assets as SVG/EPS files. As per the above, it is essential that the app is responsive across devices and therefore if these icons are provided as SVG/EPS, we can ensure we maintain clarity across devices. If this is not possible, we can work with PNG’s however SVG/EPS files are preferable.
Typefaces - For Typefaces to be used in the App the client needs to provide the typeface of choice as .TTF or .OTF files. It’s important for designs that are given to us (see example 1) from the Client to also note their type usage (e.g - futura MD for titles and Gills Sans for Body text) and to provide all typefaces, no matter how common they may seem.
*Custom HTML content pages : As standard we offer a template solution with a customisable home screen. Fully custom content HTML pages require coding from a developer and are charged on a case by case basis. These type of pages are not included in standard app packages unless agreed with Account Manager. One downside of using these type of pages is that it increases the time of app setup and any changes as it’s a manual process to update the code.
Native App Imagery
If you have a native app included in your package, please click here to read our native specific requirements.