Today's design systems typically consist of
three parts: a style guide, or multiple style guides, a pattern library, and a component
library. A style guide contains information about,
and examples of, how things should be done consistently across a product, website, or
suite of products or websites. Probably the most common type of style guide
relates to brand design: elements like font, colors, and trademarks. But UX style guides that tell design direction
and visual & interaction design standards, are necessary for any design system. Content style guides that include information
about areas like language and tone of voice are also highly effective. Style guides usually come in the form of a
document. They can be a section of an intranet but are
often saved as a PDF or some other static medium. This, of course, makes it hard to edit and
it brings forth document management issues. Pattern libraries include UI elements, like
forms and buttons, what they're for, and when to use them. Every pattern library has been usability tested,
and the design has been iterated. So the designs that make it into the library
are the team's best work in that area. Component libraries take things to the next
level and are UI patterns plus code. Organizations see huge cost savings at this
point because not only do designers get a head start on design, but developers don't
need to rewrite code that a colleague has already done. And just as UX designs have been tested for
usability, code has been reviewed and improved. So, the code that makes it into the library
is tight and fast. The style guides, pattern library, and component
library, comprise the design system. As for the library you use for your design system,
it'll depend on your front-end technology stack. But, you may choose a popular tool like Bootstrap,
Foundation, or Semantic UI. You may tweak one of these, or you may create
your own design system. Why have a design system? They enable so much, like enormous time savings
for designers, developers, and product teams; better UX design and code inter and intra
products; higher consistency in design, code, and brand; and increased team communication
and collaboration. Positive by-products of these things are more
satisfied users and customers and a shared design vision among and across product teams.
