Professional and Lifelong Learning

Course description

This is a practical introduction to design systems and why they are rapidly gaining prominence across the industry. We introduce the design concepts that lay the foundation for maintainable, scalable design systems through case studies of the most notable design systems, such as Material Design by Google and Carbon Design System by IBM. We then create a design system from scratch. We begin with the visual rules and guidelines of the design system and their application to the design of the design system's core icon set and component library. We then turn our attention to micro interactions, state transitions, and animations. We then translate these designs into a library of code components. While our implementation and documentation is as styled components in React, our approach lays the foundation for implementation with other languages and frameworks. We in particular address ensuring accessibility. Finally, we discuss human and organizational considerations in adopting, transitioning to, and maintaining design systems into existing product design teams and workflows.