Creating and Maintaining Scalable Design Systems

This is a practical introduction to design systems and why they are rapidly gaining prominence across industries. We introduce the design concepts that lay the foundation for maintainable, scalable design systems through case studies of the most notable examples of the practice, 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 system's core icon set and component library. We then turn our attention to micro-interactions, state transitions, and animations. We 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 programming languages and frameworks. We address ensuring accessibility in particular. Finally, we discuss human and organizational considerations in adopting, transitioning to, and maintaining design systems into existing product design teams and workflows. Students may not take both CSCI E-169 and ISMT E-165 (offered previously) for degree or certificate credit.