how material design is changing the world

How Material Design is changing the world

About me

Carla Nicole Calheiros

- Computer Science student- Web developer

UX and UIThe “drawing” of the page

The interaction with the user

Material Design google.com/design

- Create a visual language that synthesizes classic principles of good design with innovation and possibiity of technology and science

Goals

- Develop a single underlying system that alows for a unified experience across plataforms and devices sizes. Mobile precepts are fundamental, but touch, voice, mouse and keyboard are all first-class input methods.

Goals

Material is the metaphor

Principles

Principles

Bold, graphic, intentional

Principles

Motion provides meaning

What is material?Light and Shadow

Key light

Ambient light

Ambient and key light

What is material?

Any shape and color

Display and 3d environment

What is material?Shape and responsiveness

Animation

“... motion describes spatial relationships, funcionality, and intention with beauty and fluidity”

Response

AnimationMeaningful transitions

● Clear● Smooth● Effortless

Style

●Color palette (http://bit.ly/1yxUXEO)

●UI color application (opacity makes the diference)

●Themes (download)

●Icons (copy or create)

Imagery

Focus

Narative

Style

Typography

- Roboto (since android 4.0)

Style

LayoutPrinciples- How paper works- Floating action button

LayoutUnits and

measurements

Metrics & Keylines

LayoutStructure- UI regions

- Toolbars

LayoutStructure- App bar - System bars

- Side navs - Whiteframes

Components- Bottom sheets- Buttons- Buttons: Floating action button- Cards- Chips- Data tables- Dialogs- Dividers- Grind lists

- Lists- Lists: Controls- Menus- Pickers- Progress & activity- Selection controls- Sliders- Snackbars & toasts- Subheaders- Tabs- Text fields- Toolbars- Tooltips

Components- Buttons: Floating action button

Components- Cards

Components- Chips

Components- Data tables

Components- Menus

Components- Pickers

Components- Progress & activity

Components- Sliders

Components- Tabs

Components- Text fields

Patterns

Usability

Resources

What’s new

Contact

Carla Nicole Calheiros

+CarlaNicoleCalheirosPnicole.calheiros@gmail.com

Thank you