About a year ago I worked on my first Android app at Carbon Five. Having been an Apple junkie for years I decided to take a deep dive into the Android world. I switched up my phone to a Moto X (which I’m still sporting) and spent some time reading the Material Design guidelines.
I immediately fell in love with the guidelines because you didn’t need to be a designer to understand them or apply them. The digestible explanations of the fundamentals of design like grid systems, typography and color theory made it simple for our team to understand the behavioral and visual design used by comparing elements of our digital product to physical objects and how they would behave in relation to objects around them.
But, as a designer with a past in branding and advertising I had to step back and ask, If I’m following these guidelines word for word, how will I allow my brand to look and feel like itself rather than Google? I knew I had to answer this question before visually designing for the project I was working on and the best way to do that was find out: how other apps were using material design, who was getting recognition for using it well, and why?
After looking at dozens of apps I started to realize most apps were and still are using the guideline as a coloring book. They are grabbing elements off of the stickersheet that Google provides as a resource and changing up the colors of elements like buttons and cards to match their own brand colors.
However, the ones who are using it well and are getting recognition for it were flexing the rules to leverage their own brand identity. New York Times was awarded for “elegant use of typography” by Google in their Material Design Awards and they were hardly making any use of Roboto. Weather Timeline was recognized for “crafted simplicity” and were using four primary colors as opposed to the prescribed 1 primary and 1 secondary palette. AirBnB was featured on Play Store’s editor’s choice list and completely broke free of burying navigation in the NAV drawer.
3 Android apps and 1 talk at Droidcon DE later, having seen the good and the bad, I’ve created a 5 step process to help make sure we always maintain the identity of the brand while using Material Design.
Step 1: Reset Your Thinking
If you’ve been working on your app for a while, reset your thinking. Try and look at it like you’re on boarding to the product team and ask yourself and your team members these questions:
- Who is your product for? Who is your Primary customer?
- What’s the primary function? What goal is your customer trying to accomplish?
- Why does your customer need your product? Is it addressing a pain point that they have?
- How will it be used? In what space/context is your customer using this app?
Knowing what your product communicates to customers and potential customers and what people see, hear and think about your brand is a great way to identify what parts of your brand makeup are core to your visual and verbal identity.
Here at Carbon Five we have devoted project rooms to put up our product artifacts. I recommend you grab a role of tape and put up your findings from this step in your workspace. Surrounding yourself with artifacts that form your knowledge of a product will help engrain your findings in both your team’s understanding of the product and your own.
Step 2: Work With What You’ve Got
As designers on a product team we commonly inherit existing designs whether it’s a marketing site or a logo on a business card. Most often than not we have to incorporate some of these elements. Start this step by creating a minimal style tile of assets your brand may already have like logos, emblems, images, fonts and colors.
Again put up your findings in your workspace and identify what makes you unique when compared with Google’s Material Design Guidelines. You’ll also want to ask if your current visual esthetic communicates the tonality and context you identified in Step 1. If the answer is no, identify the minimum visual changes you can make to your brand to be on equal planes of communication visually and strategically.
Step 3: Rules to Follow
As you approach visual ideation and adding Material Design into the mix consider a few recommended rules to follow:
- Respect Ratios
The incremental growth that Google uses both within their design grid and typography is a great rule to apply. It helps set up a level of hierarchy in your app that is fundamental to any good design navigation.
- Use Shadows
Remember Material Design is a physical way of viewing digital objects and physical objects always have shadows.
- Pattern is Language
Apply as much of the visual pattern as you can because it’s the language your customers’ speak.
Step 4: Minimum Viable Design Customization
If there are 2 things you can do quickly to customize your android app from out of the box Material Design it’s this:
- Customize your color palette:
This is the step everyone seems to be applying.
- Customize your font:
Customizing your font is the quickest way to making your brand feel more like you and less like Google. Roboto is a system font and it’s not necessary for it to be your font.
Step 5: Sketch it Out
Keeping in mind everything you’ve learned about Material Design and your brand gather your team and ideate on paper how you can establish your own look. Sketch out basic UI elements like buttons, icons and cards and see how you can make them unique to your brand. Six up sketching is a great way to ideate this without getting stuck in the visual design phase too early.
Put these up along with your other artifacts and see what feels right for your product. Maybe it’s just as simple as rounded corners don’t match my branding or the system icons are too cute for my brand’s tone of voice. The goal here is to identify what changes/additions you can make to quickly identify your own look and feel.
Ultimately you want to be compliant, but not a copycat. Material Design guidelines may seem prescriptive but they’re really meant to be adapted for your brand. By getting to know your brand you can pick and choose what parts you should apply strategically.