Image Style Guide - App Tiles

Lydia Joynes Updated by Lydia Joynes

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.

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.

When using a custom font beware as mobile apps require a different licence to that you would purchase for a website. **These can be very expensive so its important that you review the pricing before making your decision **

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/

How did we do?

Icon Library

Contact