The most well-known part of a design system is the components that are made. They serve to keep things simple and consistent pertaining to the goals of the company and its visitors. Sadly they are also one of the easiest things that are done incorrectly in the entire process. What are they and why should it be done? In this last of a series, we are going to look at this.
Design Components
What are components?
Simply put they are generic and reusable parts of a webpage that can be applied to any part of a page. Think buttons, lists, headers, form fields. They can also be much more specific to the website that is being developed. For example, if you are running a movie rental service like Netflix, a component could be the thumbnail of the movie along with information about it such as the title, rating, and length of the film. This would likely be used in multiple places on the site so it makes sense to make it consistent across the site.
What is the purpose of components?
There are multiple purposes for creating a component library.
One Source of Truth. You don't want people on your team to be confused as to what typography the company uses. There should be a single place where the answer can be found.
Reusable Elements. As talked about earlier, it is easier and faster to design with components that are already made than designing each thing by hand.
Easier for Developers. As a CSS Engineer, it is very frustrating converting a mockup to code when the styles of what should be the same element are in different styles. An H4 header on one page is slightly smaller on another page is not a good way to develop a site.
Easier Updates. There is nothing worse than having the base typography of a page change slightly causing a designer to hand-make those changes across an entire website. Design Systems are usually linked to a global library. Changing it at the source updates every instance of that object making changes a breeze.
There are many more reasons to have a component library but these are the main ones. If you are trying to make a website for either yourself or a client without a Design Component Library, then you are only setting yourself up for a lot of work down the road.
What should be in the Component Library?
What is included is up to the needs of the project, but regardless there are some basics that pretty much every project will need. For this article, I will be using Microsoft's Design System for Visual Studio Code. Here are some examples of some of their components.
For all Design Systems here is an incomplete list that all of them should include
Colors
Typography
Buttons
Form Inputs
Tables
Grid and Spacing
Wrapping Up
In reality, Design System Components are easy to create and make a world of difference to all parties involved. Every project should have one. Period. The time setting them up saves time for designers, developers, marketers, and everyone else.
