alex pazhyn: google_material_design
TRANSCRIPT
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
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
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
Oyster – The Best Way to Read
Google Calendar
links:
alex_pazhyn