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

Materialize CSS

Material Design Lite (MDL)

Angular Material

Polymer

http://bit.ly/the-material-world

Made with Slides.com