This document provides guidance on designing apps for Android that incorporate both Material Design principles and a company's branding. It discusses key aspects of Material Design like paper, ink, elevation and motion. It emphasizes that branding elements should not interfere with user goals and recommends expressing a brand through color, illustrations and custom fonts while still following Material Design guidelines. Examples like the Starbucks, B&H and Trello apps are presented that successfully blend branding and user experience.

1. Designing apps for Android
Lorica Claesson, UX Design Consultant
@lorica
Nordic Usability GmbH
App Builders Switzerland 2016

2. Lorica Claesson
UX Designer with a twist.Tech
background, studied Computer
Science and HCI. I can code, but don't
normally. It is great for communication
with developers!
Passion for streamlined mobile apps
and Android. Pet project, Jiffy Time
Tracker.
Based in Zürich, Switzerland.

3. Mobile platforms 2015
Worldwide
22%
54%
24%
iOS Android Others
Switzerland
3%
39%
58%
Worldwide and Switzerland data from 2015
statcounter.com
Android does really matter!

4. Overview
• Material Design - The basics
• Expressing your brand
• Examples of successfully branded material design apps.

5. Material Design Guidelines
Material design guidelines were
created to make a cohesive
experience across devices and
platforms. The guidelines are based in
reality, using paper, ink and shadows.
But it is not skeumorphism.

6. Environment

7. The real world is predictable…
If you put a cup on a solid table, you
expect it to sit there. Not fall through
and hit the floor.
Physical rules make a predictable
environment.

8. Image from Material Design Spec
https://www.google.com/design/spec/
Material Environment is a 3D space
about the thickness of your phone.
Height is 24 dp.
The thickness of materials within it is
1dp.

9. Paper
Image from Material Design Spec
https://www.google.com/design/spec/
The material is called Paper.
Can only be round or square.

10. Paper
Don’t
Image from Material Design Spec
https://www.google.com/design/spec/
Paper can’t fold, because of the limited
24 dp height of the environment.
Can’t move through other papers.
Papers are solid, just like your table.

11. Ink
Image from Material Design Spec
https://www.google.com/design/spec/
Ink lives on paper and is bound by its
edges. It is your content, can be Text,
Color, Images. It has no thickness, and
does not cast shadows.

12. Image from Material Design Spec
https://www.google.com/design/spec/
Height hierarchy, where your common
UI elements go in the height.
Empty space on upper levels, used for
Dialogs, popups and menus.

13. Image from Material Design Spec
https://www.google.com/design/spec/
The 3D environment does not only look
nice, it also adds important information
about how things move. An element
with a lower elevation will go behind
one with higher elevation.

14. Visual design

15. At first glance
Commonly associated with material
design:
Toolbar of different heights
The Floating Action Button (FAB)
Bold colors

16. Color and theming
Primary color used for toolbar
Primary dark used for status bar
Accent used for FAB, Tab selector,
Checkboxes etc.

17. Motion
Use animations to transform your user
interface between different states
Brings meaning and helps user
understand what is going on.

18. Meaningful transitions
We can use animations to show the
transform the user interface from one
state to the next.

19. Responsive interaction
Materials react when touched.
Buttons move up through the depth
hierarchy to touch your finger when
pressed.
Touchable areas react with ripples
when touched.

20. Expressing your brand

21. Don’t let your branding interfere with the use of the product.

22. Don’t let your branding interfere with the use of the product.
People have a goal when using your
app. Don’t let logos or other brand
elements get in the way of that goal.
It can ruin your user experience, forcing
your users to move on.
That means, avoid placing branding
elements in primary positions such as
toolbar etc.

23. Toolbars on lower level say nothing
explicit about which app you are in.
Android Stock apps: Calendar, Contacts, Email

24. Toolbars are used to provide
contextually relevant information and to
describe the content you are looking at
Android Stock apps: Calendar, Contacts, Email

25. Product icon
Here (Launcher) Here (Loading screen) But not here (In app).
The product icon is a product branding
element that belongs on high level UI
elements, as part of the journey to arrive
in your app.

26. Product icon
Here (Launcher) Here (Loading screen) But not here (In app).
Think about shopping at Coop / Migros
on a high street. Big signs outside, less
inside.

27. Product icon
Here (Launcher) Here (Loading screen) But not here (In app).
Once the user is in your app, they know
where they are, they don't just end up
there by surprise.

28. Icon style
TapDeckHangoutsFabulous B&H
Material design style launcher icons.
Distinct silhouette, Any shape.

29. Icon style
TapDeckHangoutsFabulous B&H
Can be a rounded rectangle, but
shouldn't be just because you happen
to have an app on another platform that
requires it..

30. Icon style
TapDeckHangoutsFabulous B&H
Avoid text in icons, can be difficult to
read and confusing to the user.

31. Property Phonebook Switzerland
Text in icons send mixed messages.
It interferes with the product branding.

32. Property
For example, seeing “comparis.ch” in
the journey to arriving in the Property
app makes us associate that name
with the app.
This is not a good thing for the user
experience when trying to locate the
app on a phone in a list sorted by App
names. (The default behaviour of most
Application drawers)
We look at c for comparis, but the app
cant be found there… it’s under p for
Property.

33. Give your app a distinct shape and
symbol to increase recognizability.
Credit Suisse are communicating their
brand clearly, but the product icons tiny
text has to be read to tell the apps apart.
Opera is a great example of product icons
that communicate brand consistently, yet
are easy to tell apart from the other apps
in the portfolio.

34. Color
Using brand colors is a powerful way of
expressing your brand in lower level UI’s
without getting in the way of the users
goals.

35. Color
Color examples borrowed from a few
large web platforms in Switzerland.
Scout24, Tutti, local.ch

36. Examples

37. aNotification
Design by Nordic Usability
Simple and efficient use of brand color
and brand element for simple Product
icon.

38. Starbucks app
Playstore
Starbucks Starbucks green as accent color.

39. Starbucks app
Playstore
Starbucks
Powerful imagery as well as a custom font
makes it feel very Starbucks.

40. B&H app
Playstore
B&H
Material style app for shopping cameras
etc.

41. B&H app
Playstore
B&H
Great use of color and Illustrations for
categories.
IMHO, even better than their webshop!

42. Trello App
Designed by Trello
Trello

43. Trello App
Designed by Trello
Trello Distinct Trello style. Especially for
boards. Card on card is a no no in
Material design. But it is central to the
Trello experience, and it really works for
them.
Remember, Material design are
guidelines, not rules. If you need to
break them, go ahead.

44. Useful resources
Material design guidelines
http://www.google.com/design/spec
Material icons
https://design.google.com/icons/
Android support library
http://developer.android.com/tools/support-library

45. Thank you!
Lorica Claesson
UX Design Consultant
lorica@nordicusability.com
@lorica