Material Design April 23, 2019

• Design Systems
• Native App
• Navigation
• User Interface

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:
  • Cards
  • Lists
  • Floating action button
• Understanding navigation and navigational components:
  • Bars: Bottom and Top
  • Tabs
  • Bottom Nav
  • Nav drawer
• Navigation transitions
• Material Theming:
  • The color system
  • The type system
  • System icons

Tools

• Material Theme Editor

Resources

• Getting started with Material Theme Editor video from Google Design

Ironhack Learning Platform

• Material design
• Design Systems & Design Ops