Designing Mobile Experience

Applying Material Design Foundation to Mobile Experience

Originally presented at CCI Summit 2019, Telkom University

Transcript

1. Your Story sayyidprata.. fadelomr savirrals edisade aaprianil 24 px 24 px 56 px 60 x 60 px 56 px Designing Mobile User Experience Material Design Foundation CCI Summit 2019 @aaprianil
2. I am Aprianil Hello!
 @aaprianil
3. About me. Co-founder .Dikampus.id Head of Research and Product Innovation Motion Laboratory Expertise: User Experience, Product Management, & Startup Aprianil S Rangga
4. Kenalan dulu 3 minute
5. Figma Basic
6. Let’s Practice by Designing Instagram Your Story sayyidprata.. fadelomr savirrals edisade aaprianil
7. Design kit bit.ly/cci-summit-designkit
8. Material Design Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.
9. Why Material Design?
10. Material Design Foundation visit material.io
11. 1. Understanding Layout Material Design Foundation 2. Spacing Methods 3. Navigation
12. Understanding Layout - Structure 8dp - most measurement 4dp - for smaller components (icons, typography, etc)
13. Column, Gutters, and Margin 1. Columns 2. Gutters 3. Margins
14. Applying Column, Gutters, and Margin Your Story sayyidprata.. fadelomr savirrals edisade aaprianil 16 px margin gutters 20px Column 4
15. Spacing Methods
16. Spacing Methods - Baseline 4dp baseline grid 8dp baseline grid
17. Spacing Methods - Padding 1. Layout Grid 2. Padding
18. Spacing Methods - Padding Padding can be measured both vertically and horizontally
19. Applying Spacing Methods Your Story sayyidprata.. fadelomr savirrals edisade aaprianil 16 px 16 px 12 px 16 px
20. Spacing Methods - Container 1. Image container 2. Icon container 3. Surface container
21. Touch and Click Targets Touch target minimum of 48 x 48 dp
22. Touch and Click Targets Click target minimum of 24 x 24 dp
23. Applying Container, Touch and Click Targets Your Story sayyidprata.. fadelomr savirrals edisade aaprianil 24 px 24 px 56 px 60 x 60 px 56 px
24. Understanding Navigation 1. Lateral Navigation 2. Forward Navigation 3. Reverse Navigation
25. Understanding Navigation - Lateral Navigation Lateral navigation refers to moving between screens at the same level of hierarchy
26. Understanding Navigation - Forward Navigation Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app
27. Understanding Navigation - Reverse Navigation Reverse navigation refers to moving backwards through screens.
28. Understanding Navigation - Lateral Navigation
29. Understanding Navigation - Lateral Navigation Navigation Drawer Component Top-level destination use for up to 5+ destination
30. Understanding Navigation - Lateral Navigation Bottom Navigation Component Top-level destination use for up to 2 - 5 destination
31. Understanding Navigation - Lateral Navigation Tabs Component Any level of hierarchy use for up to 2+ destination
32. Applying Navigation 124 likes aaprianil Chillin and Relax View all 23 comments 3 hours ago Add a comment... 48 px 360 px 5 Destination Bottom Navigation
33. Let’s compare our latest design
34. Thank you @aaprianil