Material Design 101

Here we try to cover the basic principles of material design:
- what is material design and why was it created
- what is material
- the concepts of "Bold, graphic and Intentional" and "Authentic motion"
- some elements which were changed pretty drastically in Material Design

Served as an introduction to material design at Devfest Bangalore

Transcript

1. Material Design 101 Soham Mondal
2. Soham Mondal - Founder at Triveous - Creator of Skyro - Organizer at Blrdroid soham@blrdroid.org 
 soham@triveous.com
 @s0h4m www.soham.cc
3. Agenda What is Material Design
 Material
 Bold, graphic and intentional
 Motion 
 Elements
 Patterns
 What do you need to get started
 Practice
4. Goals of Material design - create a new visual language that takes the classic principles of good design and combines it with a) technology and b) science - create a platform that works across different devices
5. www.google.com/design - overall design guidelines, this is just a subset
 - all material design images/videos are attributed to the google material design guide (c) google
6. What is Material Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
7. 2004 MujiWanoSyokki-TeasetMug Masahiro-Mori cc by 3.0
8. A situation where an object’s sensory characteristics intuitively imply its functionality and use. For example, a knob affords twisting, and perhaps pushing
 A cord affords pulling. As a relation, an affordance exhibits the possibility of some action, and is not a property of either an organism or its environment alone. Affordance
9. What is Material Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Inspired by paper/ink
14. Cues Material: Paper, ink
 Movement: Physics, light, surface, movement
 Follow nature’s lead
18. Bold, graphic, intentional Use elements of print based design: typography, grid, space, scale, color, imagery to create hierarchy, meaning and focus All these elements should provide a waypoint to the user
26. Authentic motion Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.
29. Motion - Use motion to express continuity in the environment
 - So motion is meaningful and appropriate to help the user focus
 - Give feedback so that the user knows that actions have happened
31. Elements Buttons
 Cards
 Dialogs
 Dividers
 Grids
 Lists
 Progress and Activity
 Snackbar
 Tabs
32. Buttons
44. Cards
51. Dialogs
53. Progress
60. Snackbar
62. Tabs
66. Some patterns Errors
 Transitions
67. Errors
69. Navigational transitions
72. Resources - Material design icons: https://github.com/google/material-design-icons
 - Layout templates (illustrator) http://www.google.com/design/spec/ resources/layout-templates.html#layout-templates-tablet
 - Sticker sheets and icons: http://www.google.com/design/spec/ resources/sticker-sheets-icons.html# 
 - Google Design http://www.google.com/design/ 
 - Google IO 2014 Design talks
 - Roman Guy’s IO 2014 talk with code: http://goo.gl/B8kEbs
73. Q&A soham@blrdroid.org | soham@triveous.com @s0h4m www.soham.cc Source: http://www.google.com/design/