Intorduction to Material Design

Material Design is a relatively new design philosiphy recenetly introduced by Google during their I/O conference.

Although new, some of its principles are related to existing design patterns, such as flat design. This is a brief presentation that I gave at Mobile Notts discussing the differences between Material Design and Flat Design as well as key tips to help Designers and Developers integrate the concept into their apps.

Transcript

1. Mobile Nottingham @MobileNotts @mkflint @syeefk <— Food & Drink available in the kitchen :D
2. Material design
4. Syeef Karim syeef.karim@capitalone.com syeef@mlh.io Weekday Work Weekend Work @SyeefK Twitter
5. Material design
6. Pixels aren’t just bits on a screen, but rather they’re real things
7. What is flat design?
8. A design metaphor which removes any stylistic choices that give the illusion of three- dimensions
9. Traditionally removes the use of drop shadows
10. Traditionally removes the use of drop shadows Traditionally removes the use of gradients
11. Traditionally removes the use of drop shadows Traditionally removes the use of gradients Traditionally removes the use of textures
12. Instead opts for a minimalistic use of simple elements
13. Instead opts for a minimalistic use of simple elements Instead opts for a minimalistic use of flat colours
14. Instead opts for a minimalistic use of simple elements Instead opts for a minimalistic use of flat colours Instead opts for a minimalistic use of typography
15. Material design is similar
18. There are three key tricks to getting it right
19. Colour
20. “Bold, graphic, intentional”
21. “Emphasise bold shadows and highlights.”
23. Primary colour
25. Accent colour
27. Imagery
28. A great tool to help communicate your product
30. Pro tip - avoid stock imagery
31. Looks unauthentic and cheap
32. Authentic Motion aka Animations
37. “…finding solutions within constraints.”
38. Thanks for listening
39. Mobile Nottingham @MobileNotts @mkflint @syeefk <— Food & Drink available in the kitchen :D