alex pazhyn: google_material_design

What the Material Design is?

+

design system

cross-platform design framework

visual language

digital paper

typographic designT

Tools

Screens

mdpi hdpi xhdpi xxhdpi xxxhdpi

mdpi

hdpi

xhdpi

xxhdpi

xxxhdpi

1

1.5

2

3

4

Color

Use opacity for text, icons, and dividers

Accent color

materialpalette.com

materialui.co

flatuicolors.com

Custom branding?

• Pick a palette and stick with it.

• Create hierarchy using contrast to bring attention to important buttons or information.

• Whatever your color story, look to the material design system for inspiration on how to apply it.

• Logos should be established in high-level UI elements.

• Logos shouldn’t interfere with the user’s interaction patterns

• Logos can change states to be more adaptable to the experience, e.g. shrinking from the full logo mark to a bug.

Typography

RA• You can use any typeface in the material design system.

• Establish a rational typography system for your brand and stick to it.

• Play with scale and hierarchy to best suit your brand’s needs.

• Follow the material design guidelines for baseline grids.

Noto

Typography difference

Slicing

1. Handmade

Soap

2. PNG Express

3. Nine-patch editor

Guidelines

1. Handmade

2. PNG Express | pngexpress.com

3.

hi@zeplin.io

Animation + +

Android Design Support Library

Frameworks

Angular Material

Materialize

Material UI

MUI CSS Framework

Polymer

fezvrasta.github.io/bootstrap-material-design/

Material Design for Pre-Lollipop Devices

AppCompat v21

Best cases

brigade.com

google.com/trends/

events.google.com/io2015/

Oyster – The Best Way to Read

Google Calendar

links:

developers.google.com

androidexperiments.com

alex_pazhyn