how material design is changing the world
TRANSCRIPT
![Page 1: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/1.jpg)
How Material Design is changing the world
![Page 2: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/2.jpg)
About me
Carla Nicole Calheiros
- Computer Science student- Web developer
![Page 3: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/3.jpg)
UX and UIThe “drawing” of the page
The interaction with the user
![Page 5: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/5.jpg)
- Create a visual language that synthesizes classic principles of good design with innovation and possibiity of technology and science
Goals
![Page 6: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/6.jpg)
- 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
![Page 7: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/7.jpg)
Material is the metaphor
Principles
![Page 8: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/8.jpg)
Principles
Bold, graphic, intentional
![Page 9: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/9.jpg)
Principles
Motion provides meaning
![Page 10: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/10.jpg)
What is material?Light and Shadow
Key light
Ambient light
Ambient and key light
![Page 11: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/11.jpg)
What is material?
Any shape and color
Display and 3d environment
![Page 12: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/12.jpg)
What is material?Shape and responsiveness
![Page 13: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/13.jpg)
Animation
“... motion describes spatial relationships, funcionality, and intention with beauty and fluidity”
Response
![Page 14: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/14.jpg)
AnimationMeaningful transitions
● Clear● Smooth● Effortless
![Page 15: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/15.jpg)
Style
●Color palette (http://bit.ly/1yxUXEO)
●UI color application (opacity makes the diference)
●Themes (download)
●Icons (copy or create)
![Page 16: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/16.jpg)
Imagery
Focus
Narative
Style
![Page 17: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/17.jpg)
Typography
- Roboto (since android 4.0)
Style
![Page 18: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/18.jpg)
LayoutPrinciples- How paper works- Floating action button
![Page 19: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/19.jpg)
LayoutUnits and
measurements
Metrics & Keylines
![Page 20: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/20.jpg)
LayoutStructure- UI regions
- Toolbars
![Page 21: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/21.jpg)
LayoutStructure- App bar - System bars
- Side navs - Whiteframes
![Page 22: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/22.jpg)
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
![Page 23: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/23.jpg)
Components- Buttons: Floating action button
![Page 24: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/24.jpg)
Components- Cards
![Page 25: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/25.jpg)
Components- Chips
![Page 26: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/26.jpg)
Components- Data tables
![Page 27: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/27.jpg)
Components- Menus
![Page 28: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/28.jpg)
Components- Pickers
![Page 29: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/29.jpg)
Components- Progress & activity
![Page 30: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/30.jpg)
Components- Sliders
![Page 31: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/31.jpg)
Components- Tabs
![Page 32: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/32.jpg)
Components- Text fields
![Page 33: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/33.jpg)
Patterns
Usability
Resources
What’s new
![Page 35: How material design is changing the world](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55d22432bb61eb2e2f8b45a9/html5/thumbnails/35.jpg)
Thank you