[Nazar Moravskyi] Material Design in Action

Presentation from GDG DevFest - the biggest Google related event in Ukraine. October 24-25, Lviv. Learn more at http://devfest.gdg.org.ua/

Transcript

1. Material Design in Action Nazar Moravskyi
 UX Designer, ELEKS
2. What is Material Design? New Google’s design language that allows for a unified experience across platforms and device sizes
3. Key Principles Material is the metaphor Bold, graphic, intentional Motion provides meaning
4. Material is the Metaphor Every Element is a piece of paper Elements have depths Natural light and shadows
5. Bold, Graphic, Intentional Based on print design Large-scale typography White spaces Vibrant colours
6. Motion Provides Meaning Objects transforms and reorganises Motion serves to focus attention and maintain continuity Animations everywhere
7. Applying Step-by-Step to Instagram App
8. Promoted Action
9. Distinguished by a circled icon floating above the UI
10. Have special motion behaviours, related to morphing, launching, and transferring
11. Used for positive actions (Create, Send, Share, Navigate) Dont’s Do’s
13. Navigation
14. Tabs Navigation Drawer
15. Tabs Use tabs if: • App's users to switch views frequently. • Limited number of top-level views. • You want to divide large amount of related data
16. Dont’s Icons Scrollable Mix Two Lines Truncate Resize Do’s
17. Navigation Drawer Use a navigation drawer if: • App has a large number of top-level views • App has natural “home” • Deep navigation branches • Reduce the visibility of less frequently visited destinations
18. Small amount of top level views Main “Home” view User would not switch frequently
20. Content
21. Cards Grids & Lists
22. Cards different content (title, photo, text, description) more than 2 actions possible cards with different types of objects !
23. Grids and Lists simple content 2 actions maximum optimised for visual comprehension and differentiating between like data types
24. Lists Grids Image first, text secondary Text first, image secondary
25. Multiple Actions Different Content
26. Rounded Corners Margin Between Cards
28. Grids works well on Instagram’s Explore
29. Animations Authentic Motion Meaningful Transitions Delightful Details
30. Authentic Motion - Acceleration Linear Ease Out Ease In Dont’s Do’s
31. Authentic Motion - Transformations Symmetric Un-symmetric
32. Authentic Motion - Weight & Size
33. Meaningful Transitions focus and guide user’s attention avoid confusion when layout changed or elements are rearranged
34. Delightful Details gives app superb look and feel
35. Summary
36. Design with paper in mind Use bright colours, be bold Don’t forget about patterns Add transitions and animations
37. Useful Resources http://www.google.com/design/ http://easings.net/ http://matthewlein.com/ceaser/ http://vimeo.com/93206523 ! official guidelines all about easing tool to test easing 12 principles of animation
38. Thank you g+ www /+NazarMoravskiy dribbble.com/Moravskyi