The document introduces Material Design, a visual language developed by Google. It describes Material Design as evolutionary rather than revolutionary, moving from skeuomorphism and flat design to a system that incorporates 3D space. The goals of Material Design are to synthesize classic design principles with technology and create a unified experience across devices. It then covers the comprehensive components of Material Design including layouts, components, color, visual style, interaction patterns, and animation.
3. 7.11.2015 3Material Design: It’s a Whole New Language
Evolutionary, Not Revolutionary
Skeuomorphism Flat Material
4. 7.11.2015 4Material Design: It’s a Whole New Language
“Create a visual
language that
synthesizes classic
principles of good
design with the
innovation and
possibility of technology
and science.”
Material Design Goals
6. 7.11.2015 6Material Design: It’s a Whole New Language
“Develop a single
underlying system that
allows for a unified
experience across
platforms and device
sizes.”
Across All Devices
7. 7.11.2015 7Material Design: It’s a Whole New Language
• Layouts
• Components
• Color
• Visual Style
• Interaction Patterns
• Animation
Comprehensive
56. 7.11.2015 56Material Design: It’s a Whole New Language
Google Material Design
http://www.google.com/design/spec/material-design/introduction.html
Latest Updates to Material Design
http://www.google.com/design/spec/whats-new/whats-new.html
Material for Android Developers
http://developer.android.com/training/material/index.html
Roboto and Noto Fonts
http://www.google.com/design/spec/resources/roboto-noto-fonts.html
Appendix: Material Design
Resources
57. 7.11.2015 57Material Design: It’s a Whole New Language
Layout Templates
http://www.google.com/design/spec/resources/layout-templates.html
Material Palette (Palette Generator)
http://www.materialpalette.com
Material Up (Material Design Showcase)
http://www.materialup.com
Smashing Magazine Tutorial on Sketch’s Material Design Sticker Sheet
http://www.smashingmagazine.com/2015/05/15/sketch-with-material-
design/
Appendix: Material Design
Resources
Notas del editor
1. Finish
2. Material background
3. Material foreground
4. Color
5. Shadow