design assets & information for ios and android applications

Design assets & information for iOS and Android applications1

Design assets & information for iOS and Android applications

Your brand and logo will be displayed in several views in the applications. To ensure compliance and the right look & feel we would like you to follow the following guidelines:

1. SQUARE LOGOThis logo will be used as an app icon. See example Figure 1. (Same for Android and iOS)We need two different .svg files in size 36 x 36px

Light theme compliant The logo can have several colours and will be presented on a mostly white background. See Example A.

REGISTER

LOG IN

By clicking Register, you agree to our Terms and Conditions

Welcome to Magine Pro

FIGURE 1.SQUARE LOGO

FIGURE 1.PROMOTIONAL TEXT/HEADLINE/TAGLINE.

This promotional text will have the oppsite colour from the theme of the app. Light theme = dark text. Dark theme = light text

FIGURE 1.TERMS AND CONDITIONS URL

EXAMPLE ALIGHT THEME COMPLIANT

EXAMPLE BDARK THEME COMPLIANT

Dark theme compliant

The logo should be all white and is mainly used on dark themed areas. See Example B.


2. RECTANGLE LOGOThis logo will be featured mainly in the header of the app. See example Figure 2. This area has a restricted space so the logo should have the ratio of 25:7. Please supply a .svg for both iOS and Android.

Light theme compliant The logo can have several colours and will be presented on a mostly white background. See Example A.

FIGURE 2.RECTANGLE LOGO EXAMPLE A

LIGHT THEME COMPLIANT

EXAMPLE BDARK THEME COMPLIANT

Dark theme compliant

The logo should be all white and is mainly used on dark themed areas. See Example B.

3. APPLICATION ICONS The app icon is the same as the square logo (See Example A). If you supply the square logo as .svg we will take care of it all, by resizing it to all the correct client specific sizes.

But if you rather do the yourself, make sure you follow the guidelines from Apple and Android.

iOS: Apple documentation https://developer.apple.com/ios/human-interface-guidelines/icons-and-ima-ges/app-icon/

Android: Android documentationhttp://iconhandbook.co.uk/reference/chart/android/

EXAMPLE A


3. SPLASH & WELCOME SCREENThis is the first thing that the user sees when clicking on the app icon. See example Layer 1. You will only see it briefly while loading the Welcome Screen. See example Layer 3. Main focus for this screen is to keep it simple and highlight your brand. A common solution is to use a background image or colour. This will later be used as the background for the Welcome Screen. See example below.

The splash screen itself consist of two basic elements: a background and a foreground. The background consist of a single colour, gradient or a simple pattern that wouldn’t be corrupted when re-scaled for different screen sizes.

The foreground consists of one (1) graphic element. This element together with the background image/colour becomes the backdrop of the Welcome Screen. See example below.

4. WELCOME SCREENThe Splash Screen is now set to be the background for the Welcome Screen with an overlay on top. The app icon, promotional text /headline/tagline as well as buttons for Login and/or Sign Up is also visible on this screen. See example below.

SPLASH SCREEN BACKGROUND (LAYER 1)SOLID COLOR, PATTERN OR GRADIENT. If your app has light theme the background colour should be bright to keep consistanty through out the app.

SPLASH SCREEN FOREGROUND (LAYER 1)GRAPHIC ELEMENT, EG AN ILLUSTRATION

WELCOME SCREEN (LAYER 3)APP ICON, PROMOTIONAL TEXT/HEADLINE AND BUTTONS APPEARS ON TOP OF THE SPLASH SCREEN.


ASSEST REQUIREMENTS FOR SPLASH AND WELCOME SCREENBackground (single colour, gradient or simple pattern): Name it launch_bg in 36 x 36px in .png format.See Example A.

Foreground (graphic element that can easily be resized for different screen sizes): Name it launch_fg in .svg formatMake sure this graphic element doesn’t exceed 328 x 328 px.See Example B.

REGISTER

LOG IN



WELCOME SCREEN APP ICON, PROMOTIONAL TEXT/HEADLINE AND BUTTONS APPEARS ON TOP OF THE BACKGROUND AND FOREGROUND ELEMENT.

EXAMPLE A BACKGROUND IN .PNG

EXAMPLE BFOREGROUND ELEMENT IN .SVGRemember to export this in the five sizes mentioned in the text above.


5. COLOURSPlease provide a primary identity colour (See Figure 5A and 5B.)Also provide Secondary and Tertiary Colours. See examples below.

REGISTER

LOG IN



PRIMARY SECONDARY TERTIARY

Primary colorUsed mostly throughout the service in areas such as the header and buttons. (See Figure 5A and 5B.)

Secondary & Tertiary colourSecondary and Tertiary colours are used to highlight interactions in the app, could for example be features, links or in app-purchase elements. (See Figure 5A)

FIGURE 5BUSE OF PRIMARY COLOUR

FIGURE 5AUSE OF PRIMARY & SECONDARY COLOUR


5. COLOURS (continue).Also choose if you want your application to have a light or dark theme.See Figure 6 for Light Theme.See Figure 7 for Dark Theme.

6. GENERAL INFORMATIONPlease also supply us with:

• Help URL• Privacy URL• Support email• Terms & conditions URL See Figure 1.• Promotional text (in all relevant languages)

See Figure 1.

FIGURE 7DARK THEME

FIGURE 6LIGHT THEME

That’s it - now the magic begins :)

Design assets & information for iOS and Android applications

That’s it - now the magic begins :)

7. CHECKLIST

Please supply us with the following list of image assets for iOS and Android mobile apps .

Devevice Image Type Image File Image size Used for Comment

design assets & information for ios and android applications

Documents