Material Design
We’ll focus on how Google’s Material Design system works on Android devices (primarily phones) and explore the primary navigation model.
Learning Objectives
- Describe the purpose of Google’s Material Design system
- Define lateral, forward, and reverse navigation
- Identify when to use bottom bars, top bars, tabs, and nav drawers
- Create a screen in Sketch using the Baseline Material Theme
- Adapt the Baseline Material Theme
Where to Start
- Surfaces
- Component behavior and basic components:
- Understanding navigation and navigational components:
- Bars: Bottom and Top
- Tabs
- Bottom Nav
- Nav drawer
- Navigation transitions
- Material Theming:
Tools
See Also
Competencies
- Interaction Design Android Navigation
- Interaction Design Interface controls
- Interaction Design Navigation
- Interaction Design iOS Navigation
- Information Architecture Card Sorting
- Usability Evaluation Tree Testing
Explainers
Lessons
- Human Interface Guidelines
- Color Systems
- Content Strategy
- Inspiration and Aspiration
- Reusable Components
- User Flows
Resources
Tutorials
Talks
References
Tools
Articles
- 7 Rules for Creating Gorgeous UI
- 10 Usability Heuristics for User Interface Design
- 7 Rules for Creating Gorgeous UI – Part 2
- Card Sorting Beginner’s Guide
- Card Sorting: Uncover Users' Mental Models for Better Information Architecture
- Interface Writing: Code for Humans
- Is closed card sorting an outdated technique for IA?
- Microcopy: Tiny Words With A Huge UX Impact
- Typography for User Interfaces
- UI vs Print
Books
-
Design Systems
by Alla Kholmatova -
Everyday Information Architecture
by Lisa Maria Marquis -
Expressive Design Systems
by Yesenia Perez-Cruz -
Inclusive Components
by Heydon Pickering