What's new in Material Design?

Were you bored by all these apps which looked like a sample from the Material Design website? Then rejoice, change is coming!

At the last I/O, Google announced a refreshed version of their famous Material Design language. It brings more power to the hands of designers and developers by allowing more customization. With Material Theming, you finally have the ability to create nicer apps while keeping that material spirit.

The talk describes the main changes of “Material Design 2” from a design point of view, and how developers can implement them on Android. Many major changes will be illustrated thanks to Google examples or real apps implementation.

Transcript

1. What's new in Material Design?
2. @AERILYS QUENTIN SALLAT Senior Android developer at magicplan Android and iOS app which allows you to create a floor plan with AR and AI More than 15 million downloads. Ranked #1 in Utilities in 114 countries. Included in AppStore Best of 2017.
3. So what's Material Design anyway?
4. MATERIAL DESIGN 101 A design language made by Google Created to be used across platforms Made real thanks to the material metaphor Announced at I/O 15
5. MATERIAL DESIGN 2.0? Announced at I/O 18 Offers more customization Less constraints, more room for designers
6. THE BASICS MATERIAL SYSTEM MATERIAL FOUNDATION MATERIAL GUIDELINES
7. MATERIAL SYSTEM MATERIAL SYSTEM Tools, samples and components to improve app development
8. MATERIAL FOUNDATION MATERIAL FOUNDATION Strategy to architecture your design
9. MATERIAL GUIDELINES MATERIAL GUIDELINES Implementing a unique design while keeping consistency
10. FLEXIBLE FOUNDATION More customization possibilities CROSS-PLATFORM Same UI across dev platforms NEW PRINCIPLES
11. MATERIAL THEMING "Material Theming refers to the customization of your Material Design app to better reflect your product’s brand."
12. Basically it’s Material Design + freedom
13. Use the theme in the code 3 Apply to your design 2 Customize your theme 1 THE THREE STEPS OF THEMING
14. "Shapes direct attention, identify components, communicate state, and express brand." SHAPES
15. Material Design is Cross-Platform
16. CROSS-PLATFORM ANDROID iOS WEB FLUTTER
17. MATERIAL STUDIES
18. 7 design studies to showcase how flexible Material Design can be MATERIAL STUDIES
19. A sample app to showcase the available Material components CATALOG
20. A Sketch plugin to apply your theme to Material components MATERIAL THEME EDITOR
21. A Web app to ease communication between designers and developers Same principle as Zeplin, but by Google GALLERY
22. Material Components
23. COMPONENTS Open source components in libraries Cross-platform You already know most of them... They're just more customizable Not all of them are available on every platform AndroidX libraries on Android
24. APP BOTTOM BAR Action bar/toolbar But at the bottom of the screen Easier to access Different from bottom bar navigation
25. FLOATING ACTION BUTTON Just like before With shapes Integration with bottom app bar Extended FAB
26. BACKDROP 2 layers component "The back layer displays actions and context These control and inform the front layer’s content."
27. BOTTOM DRAWER Works with bottom app bar Only for mobile Full screen in landscape
28. TEXTFIELDS Just like TextInputLayout Without spacing issues Two variants Filled Outlined Don't use both next to each other
29. CHIPS Used to represent Filters Choices Actions Used as a group It's not a button!
30. From theory to practice
31. GOOGLE KEEP Rounded corners as shapes A lot more white space Source: Android police
32. GOOGLE I/O Use a backdrop Filter talks based on selected chips!
33. MESSAGES New Floating Action Button Centered title in toolbar with no elevation Source: Digital trends
34. PLAY STORE Chips as categories tags Uncentered title in toolbar Low radius corners as shapes
35. ASSISTANT Outlined Textfield Chips for actions
36. What's next?
37. WHAT'S NEXT? Material Design is still the same Google provides us defined ways to customize our apps We'll see nicer apps... And iOS design will be back on Android
38. CONCLUSION Start using Material Design today! New tools to let you customize your theme Not all new components have to be used Check components compatibility before designing!
39. @AERILYS Thank you! Questions?