Image Style Guide - App Tiles
App Tile Menus
When a user opens the app and has logged in, they will see a main menu laid out in tiles, and a collapsed menu. These menus allow the user to navigate all of the content in the app, and initiate every journey possible.
The main menu is called tile menu. And the collapsed menu is often called secondary menu, side menu or hamburger menu 🍔. They look like this:
The tile menu, with its sleek design, offers a great UI and in turn contributes to a better user experience. This menu is also highly customisable. Each tile can span several cells in the grid, vertically or horizontally, and they all have a background image and a text that can be easily branded.
The collapsed menu on the top left of the mobile app expands into a vertical menu. You can add in here things like account settings or the app's T&Cs and FAQs.
Image Style Guide
In order to get your app looking complementary to your website, we require images from you in the following format (below you will see a reference to the shapes and layout).
You may also wish to include text on your images if you have particular brand guidelines for fonts.
Format | Size | Layout |
PNG | 561px X 1122px |  |
PNG | 1122px X 561px |  |
PNG | 561px X 561px |  |
Once we have the images as the above table references we will be able to scale these so that there is no distortion on the end result.
Image sizes
We require the tile menu images to be in the following sizes (below you will see a reference to the shapes and layout). Please include any text on top of the images and save as a PNG or JPEG. Think of the images as sitting on a grid.
Grid size 4 - Square  | Grid size 4 - Rectangle  |
Grid size 5 - Square  | Grid size 5 - Rectangle  |
Grid size 6 - Square  | Grid size 6 - Rectangle  |
Example App Layouts
You can have a maximum amount of 4 tiles across the screen and a minimum of 1, as demonstrated below.
Please think of the tiles as the framework for the layout of your app. They do not need to be displayed as restricted tiles. We can work with the padding and margins around each tile to create an aesthetic that is more pleasing to the eye.
Depending on the design criteria you have we can work with you to achieve your goals within your budget.
Please send these over to your project manager who will be able to progress your app build.
Font Style Guide
iOS Default font
SF Pro (This sans-serif typeface is the system font for iOS which we use in the app by default)
Android Default font
Roboto is the default font on Android (for every android version year 2013 onwards)
Using Custom Fonts
You can commission the use of a custom font family in your app. We install the font family and font styles which takes effect when we provide you with a finished app.
You can browse collections here https://www.myfonts.com/ but there's loads of online market places for you to visualise and browse fonts.
Google Fonts are free of charge, these can be used in-app without any additional costs. You can browse the collection of Google Fonts here https://fonts.google.com/
