Design Systems 101 Syllabus

A 10-week course about design systems from SuperFriendly

Week 1: Introduction to Design Systems

Discussion

• Introductions
• What is a design system?
• Introduce final project: 3 or more websites/apps powered by a single design system + case study of process (include videos, photos, and sketches)

Lecture

Design System roundup

Work

• Read Atomic Design chapters 1 & 2
• Try to build at least two things with an existing (likely open-source) design system. Examples:
  • Material Design
  • Bootstrap
  • Polaris
  • Lightning

Week 5: Deviating from the System 🔗

Week 2: Processes, Workflows, and Frameworks

Discussion

• Review builds
• Choose designer or developer distinction
• Who here has built a site or an app before? What's your process for building sites and apps?

Lecture

• Waterfall vs. Agile
• The types of Agile
• Hot Potato
• Creating with a design system
• Work in public

Work

• Assign pairs
• Read Atomic Design chapters 3 & 4
• Read Expressive Design Systems chapters 1 & 2
• Read Designer + Developer Workflow
• Watch Designer + Developer Workflow
• Watch Designer vs. Developer!
• Watch Let’s Learn Design Systems!
• Create a webpage using hot potato and create a 1-minute time lapse of the process

Week 3: Tooling

Discussion

• Review time-lapses
• The nuts and bolts of design systems; how-tos.

Lecture

• Pilots
• Tooling
  • Development tools
    • SHTML
    • PHP
    • npm
    • Pattern Lab
    • React/Vue
  • Design tools
    • Sketch
    • Figma
    • Photoshop

Work

• Read Atomic Design chapter 5
• Read Expressive Design Systems chapter 5
• “Hello World” in at least 2 tools for dev and 2 tools for design that wire up a true design system

Week 4: Reference Sites

Discussion

• Review hello world examples
• Reference sites

Lecture

• Why are reference sites important?
• The politics of design systems
• Behind-the-scenes of a reference site
  • Zeroheight
  • Invision Design System Manager
  • Gatbsy
  • WordPress
  • Manual

Work

• Read Expressive Design Systems chapters 3 & 4
• Build a reference site for your design system

Week 5: Deviating from the System

Discussion

Review reference sites

Lecture

• Following the system vs. deviating from it
• Miscellaneous time for knowledge gaps

Work

Officially start on final project

Week 6

• Work on final project
• Open office hours; sign up for 15-minute breakout room

Milestone suggestions

• Pilot 1 should be built
• Reference site should be 30% complete
• Case study should be 30% complete

Week 7

• Work on final project
• Open office hours; sign up for 15-minute breakout room

Milestone suggestions

• Pilots 1 and 2 should be built
• Reference site should be 60% complete
• Case study should be 60% complete

Week 8

• Work on final project
• Open office hours; sign up for 15-minute breakout room

Milestone suggestions

• Pilots 1, 2, and 3 should be built
• Reference site should be 90% complete
• Case study should be 90% complete

Week 9

• Work on final project
• Open office hours; sign up for 15-minute breakout room

Milestone suggestions

• Finishing touches and final polish
• Last minute reviews

Week 10: Demo Day!

Final project due 1 second before final class begins

• Celebrate!
• Take a deep breath
• Retrospective discussion
• Send-offs