The Material World
Burke Holland
Kendo UI
NativeScript
Kendo UI
What Is "Material Design"?
What IsN'T "Material Design"?
Material Design is not a CSS framework
Material Design is not a CSS framework
Material Design is not Bootstrap
Material Design is not a UI framework
Material Design is a design specification
Material Design is primarily about Android
opinion mine
Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
"Material Is The Metaphor"
Each object should act as if it actually exists, metaphorically speaking
Credit: Robert Padbury - Dribble
Content extends from edge to edge. It never adds thickness.
Material can be stacked. Shadows define which objects are on top, and which are on the bottom.
Unlike the physical world, material can change shape.
Material can split and heal.
Material can be created or destroyed anywhere and at any time.
Credit: Jan Kuijken - Dribble
Credit: Faiz Malkani - Dribble
Bold, graphic, intentional
Credit: Kingyo - Dribble
Credit: Aurelien Salomon - Dribble
Motion provides meaning
Credit: Jovie Brett - Dribble
Animation
Material responds to input.
Credit: Material Up
Delightful Details
Credit: Andy Orsow - Dribble
Meaningful Transitions
Style
Pick a primary color, and an accent color.
Credit: Kingyo - Dribble
Icons
Credit: Jurre Houtkamp - Material Up
Imagery
vs
Typography
Use Roboto
Layout
Credit: Aurelien Salomon - Dribble
Patterns
Reveal
Transform
Divide
Reflow
Expand
Components
- Bottom Sheets
- Buttons
- Floating Action Buttons (FAB)
- Cards
- Chips
- Data Tables
- Dialogs
- Dividers
- Grid Lists
- Lists
- List Controls
- Menus
- Pickers
- Progress & Activity
- Selection Controls
- Sliders
- Snackbars & Toasts
- Subheaders
- Tabs
- Text Fields
- Toolbars
- Tooltips
Libraries
http://bit.ly/the-material-world