Alex Pazhyn, who has more than 7 years of experience with UI design, wtells about «Designing in the Material Design Style». 1. What the Material Design is? 2. Work with color palette, typography and custom branding 3. Guidelines and slicing 4. Frameworks for MD Style 5. Solving the issues and Best cases. Presentation will be interesting for UX/UI designers and Android developers.

2. What the Material Design is?
+

4. design system

5. cross-platform design framework

6. visual language

7. digital
paper
typographic
designT

9. Tools

14. Screens
mdpi
hdpi
xhdpi
xxhdpi

15. mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
1
1.5
2
3
4

16. Color

20. Use opacity for text, icons, and dividers

21. Accent color

27. materialpalette.com

28. materialui.co

29. flatuicolors.com

30. Custom branding?

32. • 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.

34. • 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.

37. Typography

40. A• 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.

42. Noto

46. Typography difference

49. Slicing

50. 1. Handmade

51. Soap

52. 2. PNG Express

53. 3. Nine-patch editor

56. Guidelines

58. 1. Handmade

60. 2. PNG Express | pngexpress.com

61. 3.
hi@zeplin.io

62. Animation + +

64. Android Design
Support Library

65. Frameworks

66. Angular Material
Materialize
Material UI
MUI CSS Framework
Polymer

67. fezvrasta.github.io/bootstrap-material-design/

68. Material Design for
Pre-Lollipop Devices

69. AppCompat v21

70. Best cases

73. brigade.com

74. google.com/trends/

75. events.google.com/io2015/

77. Oyster – The Best Way to Read

79. Google Calendar

80. links:

81. developers.google.com

82. androidexperiments.com

84. alex_pazhyn