how material design is changing the world
TRANSCRIPT
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
- 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
Thank you