Tài liệu hướng dẫn thiết kế giao diện di động với các nguyên tắc về màu sắc, bố cục và kiểu chữ. Người dùng được khuyên chọn một màu chính và một màu hỗ trợ từ vòng tròn màu sắc, cũng như sử dụng các mẫu giao diện khác nhau như grids và cards. Các yếu tố giao diện như nút, hộp thoại và kiểu chữ Roboto được đề cập để tối ưu hóa trải nghiệm người dùng.

2. CHOOSE COLOR THEME
Select theme
 materialpalette.com
 www.materialup.com

3. COLOR WHEEL
http://www.lantabrand.com/cat12news3797.html
 Chọn 1 màu chính đặc trưng cho chủ đề muốn thể hiện.
 Chọn 1 màu hỗ trợ cho màu chính. Bạn dùng 2 màu đối diện nhau trong vòng
tròn màu căn bản

4. MOBILE UI PATTERN
http://pttrns.com/
http://www.mobile-patterns.com/

5. GRID
720x1280
45 cells / 1 cell = 16dp
https://www.google.com/design/spec/layout/metrics-keylines.html

6. LIST

7. DETAIL VIEW

8. MIXED CONTENT

9. APP BAR

10. STATUS BAR

11. NAVIGATOR

12. VERTICAL MENU

13. GRID MENU

14. BUTTONS

15. BUTTONS

16. PERSISTENT FOOTER BUTTONS

17. FLAT VS RAISED BUTTONS

18. FLAT VS RAISED BUTTONS

19. BUTTON STATE

20. DROP DOWN

21. DIALOGS

22. DIALOGS (NO TITLE)

23. DIALOGS

24. DIALOGS

25. CARDS

26. DO CARDS
Cards for Different & Complex elements

27. DON’T CARDS
NO cards for list of same & simple elements

28. CARD LAYOUT

29. CARD LAYOUT

30. CARD LAYOUT

31. CARD LAYOUT

32. DIVIDERS
NO dividers for simple elements

33. DIVIDERS
For complex elements & Divide areas

34. GRID LISTS

35. GRID LIST

36. GRID LIST

37. TYPOGRAPHY
Roboto

38. TYPOGRAPHY