Image Style Guide - App Tiles

Lydia Joynes Updated by Lydia Joynes

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 commision 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 differnt 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 theres 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 addtional costs. you can brose the collection of Goolge Fonts here https://fonts.google.com/

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.

How did we do?

Icon Library

Contact