Branding on mobile native apps
Smartphone is used in mobility, with a limited comfort (screen, connectivity, time, used by definition out of home/desktop), within what Google calls micro-moments. These conditions have made successful apps which are effective in these micro-moments instead of traditional brands apps, less usability-oriented (relying more on branding and ads).
Branding is not dead ! With the growing adoption of mobile UX good practices, it is even regaining in popularity. Still, in both Google and Apple platforms, guidelines recommend limiting it to well-specified areas, and, you have to adapt it in coherence with the platform style (flat for Apple, material for Google). These guidelines help to ensure a global coherence across mobile apps for a better global usability. When iOS flat is willing to stay elegant and subtle, material can be considered as a kind of “reelevated / reshaped / recolored /rebranded flat”. Keep these differences in mind while thinking about the brand adaptation on an OS version of an app.
Traditionally on a web app, branding is declined in 3 main elements: logo, color and typography. On mobile, the logo (the app icon) is still important (access to your app from the app gallery) but less within the app. Color and typography stay important but more charted.
Branding main elements
- App icon: simple (unique shape and recognizable visual), on Android: lighted, eventually folded ; also on both platforms it is recommended to not use it in-app (eg: in the top bar instead of a useful title)
More details: on iOS and on Android
Basic experience elements (colors, texts, shapes, sounds)
- Color: standard recommendation to stay relevant (color-related ideas, associations through the prismatic circle), Android also proposes a grid for bolder colors and suggests using a different secondary color to accent selected parts of your UI
More details: on iOS and on Android
- Typography: recommendation to use platform fonts for a better legibility, still possible to customize it, Android recommends limiting it to title and subtitle texts
More details: on iOS and on Android
- Shapes: squared or rounded squared on iOS, Android allows for more curve with the recommendation of choosing a shape family for the whole app in accordance with the brand value (eg: for the product icon base image, or the corner radius from cards to icon shape)
More details: on Android
- Sounds: no recommendation for iOS, on Android: recommendation to be informative while respecting brand identity, Android reminds also the elements of a sound to use it to express your brand personality (tonality, timbre, dynamic, etc.), sounds can be UX sound (notification or actioning a UI element), ambient music or the voice of your vocal assistant
More details: on iOS and on Android
Global reference on branding using UI base elements: on Android
Composed branding elements
- Iconography: standard recommendation to be intuitive, prefer using system icons based on the related task or content, simpler shapes, thin on iOS, bolder on Android
More details: on iOS and on Android
- Imagery: recommendation to illustrate effectively an intent while expressing the brand’s visual language (illustration or photo, style, main colors), can be used: associated with content, on onboarding or feedback screens (empty states, acknowledgement/celebration screens), Android offers the hero image pattern (taking the full top part of the screen) to reinforce the brand on a specific screen
More details: on Android
- Animations: a good place to express brand identity but must stay effective (informative and focused), main play elements are imagery, color and choreography, common uses: feedback and status (eg: empty state, loading time), user education (eg: on an onboarding screen), screen transitions (acceleration, duration, etc.)
More details: on iOS and on Android
- Writing: in accordance with the tone of voice and editorial style of the brand ; must be concise, simple and direct
More details: on iOS and on Android
Specific components
- Launch screen: while recommending to display a first-screen similar image (to reduce perceived loading time), it is still possible on Android to use it to expose brand to improve its recognition (like with traditional splash screens)
More details: on iOS and on Android
- Status bar: coloring it to your app colors selection may reinforce your brand (for a short usability decrease with system options)
More details: on iOS and on Android
This list is roughly in accordance with what both OS recommend ensuring a global coherence and then a better usability across apps, but as guidelines are just guidelines we can imagine customizing other elements to express brand personality.
Branding on mobile apps should most of the time respect OS guidelines which frame its application, this list gives you a way to improve its mobile adaptation and to review global coherence from time to time.
To better understand how a brand can be adapted to an app, you can read “Designing for Emotion” by Aarron Walter.
