Design Guidelines

All CrowdComms apps,solutions, whether native apps accessed from the App Stores, or web-apps accessed via a custom personalised URL, can be very heavily branded and personalised by our in-house team of app designers to create a bespoke experience. WeBelow haveyou decadeswill find an overview of experiencedesign designing appsoptions and canthe takeassets directionrequired fromfor clients,CrowdComms to brand your app or useweb ourbased own experience and design the appplatform for youyour basedspecific upon a website or brand guidelines.event. 

Responsive Design

Our apps are designed to look beautiful no matter whether they're 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! 

App Banner Ads appear below the Side Menu Image and above the app search bar throughout your app, as well as inside certain modules. It's possible to upload multiple Banner Ads to your app and they will rotate around in order. Banner Ads should be uploaded to the app as a PNG or JPG image files, sized 1024 x 256 px.

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.