Oct 04, 2023  
2020-2021 Undergraduate Academic Catalog 
2020-2021 Undergraduate Academic Catalog [ARCHIVED CATALOG]

Add to Portfolio (opens a new window)

UX 2023 - Design Systems

3 lecture hours 0 lab hours 3 credits
Course Description
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Students will learn about commonly used design systems, including Material Design and Human Interface Guidelines, and how they differ from branding standards or style guides. Students will learn about the basic components, patterns, and guidelines that make up a design system. The class will culminate in a project where students will build and leverage their own design system. (prereq: UX 2011 )
Course Learning Outcomes
Upon successful completion of this course, the student will be able to:
  • Gain familiarity with components of Material Design and Human Interface Guidelines and understand which components are appropriate to use on which platforms 
  • Conduct analyses of design systems and the components, standards, and patterns that make up a design system 
  • Communicate design system ideas to other students, who then will leverage that information in their own projects
  • Understand the difference between a design system, style guide, branding standards, and content standards 
  • Build a design system leveraging design and interface knowledge 

Prerequisites by Topic
  • Students will need to possess an understanding of visual design and interfaces, which they will utilize when building components for their design system

Course Topics
  • Google’s Material Design
  • Apple’s Human Interface Guidelines
  • Other commonly used design systems
  • Types of design systems
  • Basic design system principals
  • Functional and perceptual patterns in pattern libraries
  • Component libraries
  • Content, brand and visual style guides
  • Best practices for component design and utilization

Amii LaPointe

Add to Portfolio (opens a new window)