Material design Made Real
-
Upload
tally-barak -
Category
Technology
-
view
196 -
download
0
Transcript of Material design Made Real
![Page 1: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/1.jpg)
Material DesignMade Real
Tally Barak
![Page 2: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/2.jpg)
![Page 3: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/3.jpg)
We challenged ourselves to
Create a visual language that
synthesizes classic principles of
good design with the innovation
and possibility of technology and
science. The movie
![Page 4: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/4.jpg)
![Page 5: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/5.jpg)
Icons made by Yannick, Freepik, Google from www.flaticon.com is licensed by CC BY 3.0
![Page 6: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/6.jpg)
Bold, graphic, intentional Motion provides meaning
Material is the metaphor
![Page 7: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/7.jpg)
![Page 8: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/8.jpg)
Material Properties
![Page 9: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/9.jpg)
Material is the metaphor Motion provides meaning
Bold, graphic, intentional
![Page 10: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/10.jpg)
![Page 11: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/11.jpg)
http://www.google.com/design/spec/style/color.html#color-color-palette
![Page 13: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/13.jpg)
![Page 14: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/14.jpg)
![Page 16: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/16.jpg)
Material is the metaphor Bold, graphic, intentional
Motion provides meaning
![Page 17: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/17.jpg)
Beautiful Meaningful
![Page 18: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/18.jpg)
Surface Interaction Material Response Radial reaction
Responsive
![Page 20: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/20.jpg)
examples
Delightful Details
![Page 21: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/21.jpg)
• Layout
• Gestures
• Scrolling
• Touch
• Errors
• Navigation
• ARIA
• RTL
![Page 22: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/22.jpg)
Made Real
![Page 23: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/23.jpg)
http://developer.android.com/training/material/index.html
Android
![Page 24: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/24.jpg)
Polymer Project
https://www.polymer-project.org/ Designer
![Page 25: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/25.jpg)
https://material.angularjs.org/#/
Angular-Material
![Page 26: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/26.jpg)
https://material.angularjs.org/#/
![Page 27: Material design Made Real](https://reader030.fdocuments.net/reader030/viewer/2022032514/55d76485bb61eb50658b46a1/html5/thumbnails/27.jpg)
Thank You!