When I first learned to make basic websites with HTML and CSS, the way I thought of UI design was much different than I do now. Back then, I mainly treated every element that needed to be styled like its own special case and did not plan ahead much in terms of scale or future adjustments. Granted, I was mostly designing small websites for fun that would only be used once. However, I’ve recently been thinking about web design in a much different way, due to working on projects that frequently require updates, are worked on by a larger team rather than just myself, and have plans to scale over time. This eventually led me to discover the design system approach to design versus a system of exceptions.
Mobile
My first exposure to design systems was in the CS 492 Mobile Software Development course. In this course, we were introduced to Google’s Material Design system and Jetpack Compose components for use in our Android Studio projects. I was amazed to learn how utilizing a design system could not only make development faster, but also maximize usability and aesthetics by using a tried-and-true system for design. After this experience, I immediately wondered how this could apply for web-based projects and how other companies may be approaching design systems.
Web
Later on, I learned of UI component libraries, which are a way to implement design systems. For example, Ant Design (by Ant Group) and Gestalt (by Pinterest), which are both open-source projects. Throughout this term, in the CS 464 Open-Source Software course, I’ve contributed to and analyzed the Ant Design project for React. This allowed me to understand some of the complexities of how UI component libraries work under the hood, especially ones with an active developer community.
For my team’s capstone project, we have been using the UI component library, Vuetify, that works with Vue. Being unfamiliar with both, it’s been an exciting and difficult challenge to explore another new component library while thinking of design in a more modular way than I would normally.
Summary
Design system thinking can be a great way to maximize efficiency, scalability, and modularity when designing larger projects, especially when working with multiple developers. However, design systems also require overhead to maintain (for companies that manage their own) or to learn in order to integrate into your own project. Ultimately, the benefits of thinking of design in a more systematic way can be done with or without a component library, but component libraries take much of the decision-making and questions of usability out of the equation. Personally, I’m enjoying working with UI component libraries so far for web-based projects, but will always enjoy vanilla CSS.
Leave a Reply