Download - Alex Pazhyn: Google_Material_Design
![Page 1: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/1.jpg)
![Page 2: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/2.jpg)
What the Material Design is?
+
![Page 3: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/3.jpg)
![Page 4: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/4.jpg)
design system
![Page 5: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/5.jpg)
cross-platform design framework
![Page 6: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/6.jpg)
visual language
![Page 7: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/7.jpg)
digital paper
typographic designT
![Page 8: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/8.jpg)
![Page 9: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/9.jpg)
Tools
![Page 10: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/10.jpg)
![Page 11: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/11.jpg)
![Page 12: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/12.jpg)
![Page 13: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/13.jpg)
![Page 14: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/14.jpg)
Screens
mdpi hdpi xhdpi xxhdpi xxxhdpi
![Page 15: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/15.jpg)
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
1
1.5
2
3
4
![Page 16: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/16.jpg)
Color
![Page 17: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/17.jpg)
![Page 18: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/18.jpg)
![Page 19: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/19.jpg)
![Page 20: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/20.jpg)
Use opacity for text, icons, and dividers
![Page 21: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/21.jpg)
Accent color
![Page 22: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/22.jpg)
![Page 23: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/23.jpg)
![Page 24: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/24.jpg)
![Page 25: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/25.jpg)
![Page 26: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/26.jpg)
![Page 30: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/30.jpg)
Custom branding?
![Page 31: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/31.jpg)
![Page 32: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/32.jpg)
• Pick a palette and stick with it.
• Create hierarchy using contrast to bring attention to important buttons or information.
• Whatever your color story, look to the material design system for inspiration on how to apply it.
![Page 33: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/33.jpg)
![Page 34: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/34.jpg)
• Logos should be established in high-level UI elements.
• Logos shouldn’t interfere with the user’s interaction patterns
• Logos can change states to be more adaptable to the experience, e.g. shrinking from the full logo mark to a bug.
![Page 35: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/35.jpg)
![Page 36: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/36.jpg)
![Page 37: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/37.jpg)
Typography
![Page 38: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/38.jpg)
![Page 39: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/39.jpg)
![Page 40: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/40.jpg)
RA• You can use any typeface in the material design system.
• Establish a rational typography system for your brand and stick to it.
• Play with scale and hierarchy to best suit your brand’s needs.
• Follow the material design guidelines for baseline grids.
![Page 41: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/41.jpg)
![Page 42: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/42.jpg)
Noto
![Page 43: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/43.jpg)
![Page 44: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/44.jpg)
![Page 45: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/45.jpg)
![Page 46: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/46.jpg)
Typography difference
![Page 47: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/47.jpg)
![Page 48: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/48.jpg)
![Page 49: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/49.jpg)
Slicing
![Page 50: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/50.jpg)
1. Handmade
![Page 51: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/51.jpg)
Soap
![Page 52: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/52.jpg)
2. PNG Express
![Page 53: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/53.jpg)
3. Nine-patch editor
![Page 54: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/54.jpg)
![Page 55: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/55.jpg)
![Page 56: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/56.jpg)
Guidelines
![Page 57: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/57.jpg)
![Page 58: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/58.jpg)
1. Handmade
![Page 59: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/59.jpg)
![Page 62: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/62.jpg)
Animation + +
![Page 63: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/63.jpg)
![Page 64: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/64.jpg)
Android Design Support Library
![Page 65: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/65.jpg)
Frameworks
![Page 66: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/66.jpg)
Angular Material
Materialize
Material UI
MUI CSS Framework
Polymer
![Page 67: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/67.jpg)
fezvrasta.github.io/bootstrap-material-design/
![Page 68: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/68.jpg)
Material Design for Pre-Lollipop Devices
![Page 69: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/69.jpg)
AppCompat v21
![Page 70: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/70.jpg)
Best cases
![Page 71: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/71.jpg)
![Page 72: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/72.jpg)
![Page 76: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/76.jpg)
![Page 77: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/77.jpg)
Oyster – The Best Way to Read
![Page 78: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/78.jpg)
![Page 79: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/79.jpg)
Google Calendar
![Page 80: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/80.jpg)
links:
![Page 83: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/83.jpg)
![Page 84: Alex Pazhyn: Google_Material_Design](https://reader030.vdocument.in/reader030/viewer/2022032514/55d6e740bb61eb774e8b46f1/html5/thumbnails/84.jpg)
alex_pazhyn