Material Design September 5, 2018

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
• Material design patterns