Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alex Pazhyn: Google_Material_Design

732 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Alex Pazhyn: Google_Material_Design

  1. 1. What the Material Design is? +
  2. 2. design system
  3. 3. cross-platform design framework
  4. 4. visual language
  5. 5. digital paper typographic designT
  6. 6. Tools
  7. 7. Screens mdpi hdpi xhdpi xxhdpi
  8. 8. mdpi hdpi xhdpi xxhdpi xxxhdpi 1 1.5 2 3 4
  9. 9. Color
  10. 10. Use opacity for text, icons, and dividers
  11. 11. Accent color
  12. 12. materialpalette.com
  13. 13. materialui.co
  14. 14. flatuicolors.com
  15. 15. Custom branding?
  16. 16. • 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.
  17. 17. • 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.
  18. 18. Typography
  19. 19. 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.
  20. 20. Noto
  21. 21. Typography difference
  22. 22. Slicing
  23. 23. 1. Handmade
  24. 24. Soap
  25. 25. 2. PNG Express
  26. 26. 3. Nine-patch editor
  27. 27. Guidelines
  28. 28. 1. Handmade
  29. 29. 2. PNG Express | pngexpress.com
  30. 30. 3. hi@zeplin.io
  31. 31. Animation + +
  32. 32. Android Design Support Library
  33. 33. Frameworks
  34. 34. Angular Material Materialize Material UI MUI CSS Framework Polymer
  35. 35. fezvrasta.github.io/bootstrap-material-design/
  36. 36. Material Design for Pre-Lollipop Devices
  37. 37. AppCompat v21
  38. 38. Best cases
  39. 39. brigade.com
  40. 40. google.com/trends/
  41. 41. events.google.com/io2015/
  42. 42. Oyster – The Best Way to Read
  43. 43. Google Calendar
  44. 44. links:
  45. 45. developers.google.com
  46. 46. androidexperiments.com
  47. 47. alex_pazhyn

×