Building Better Products with Design Systems

Designs systems are an incredible tool for creating reusable, systemized, and cohesive designs for any application. Companies like Airbnb, Uber, and IBM have drastically revitalized the way they design products by utilizing the collection of reusable components and designs standards that change the pace of innovation and creation.

While many companies have brand guidelines and other documents that they consider “Design Systems”, these small collections of components or code snippets, they’re missing many of the elements that make Design Systems so powerful.

What is a design system

It’s a massive knowledge base that’s part UI and part documentation to help designers and developers become familiar with a companies digital design language.

Like a collection of lego blocks, a design system contains all the components necessary to put together an infinite number of UI designs. However, it’s more than just building blocks, it’s also the “why” of these UI elements that make this system such a fantastic tool.

Why have a design system?

A design system serves as a single source of truth for the entire product team on not just how things look, but how things are integrated and work together. Design systems help ensure products are consistent, modular, testable, and maintainable.

In practice, design systems help programmers use more modular and reusable component structures. Designers can whip up landing pages faster by reusing pre-designed UI components. Marketers have a source of reference for which images and fonts should be used.

Broken down, you can get a few key benefits from design systems:

  • Consistency — With a design system, it’s easier to create more consistent designs. Instead of thinking as a page as a new design, it can be visualized as a set of components.
  • Higher Quality — More consistent designs are higher quality. It’s also easier to independently snapshot test component libraries, and QA testers can easily monitor components as they’re built and changed.
  • Better Designer to Developer Communication — When design is a single source of truth, the vocabulary to talk about designs is already predefined. A button isn’t just a “purple button”, it’s the “Default medium primary button”. More exact language makes it easier for the team to talk about pages among each other.
  • Faster Design Process — With a design system built out, designers will have standards and components already defined for building new products, they can just be implemented.
  • Higher UX Focus — By not having to worry about all the details of designing and implemneting components and instead just reusing assets, designers and developers can focus more on the UX aspects of the product.

Examples of Design Systems

Creating a Design System

For new projects you’ll first want to look at some visual samples. These can be initial UI elements, mockups, or other designs that you’re taking inspiration from. Using these assets, you can start preparing the actual design system.

With these visuals in mind, use the Atomic Design Principles to begin work. Start with particles like colors, fonts, and shapes, them move to atoms like buttons, checkboxes, inputs, radio buttons, etc. Finally, compose some molecules like search boxes or date pickers, then organisms like navigation sidebars or menus.

Keep in mind a design system shouldn’t just encapsulate what an element looks like visually or in code, it should also be a description of why components are designed how they are.

For existing products, make an inventory of all existing UI elements. You’ll probably catch some that can be combined into variants, such as different types of buttons, to reduce the total number of components out there. Then, ensure all these elements are visually consistent and well-documented.

Conclusion

If you’ve built your design system, I’d love to see it! Feel free to leave it in the comments or drop me a link :)

Keep in Touch

Feel free to reach out and connect with me on Linkedin or Twitter, I love hearing from people who read my articles :)

Passionate about building cool shit. First-year undergrad student studying EECS and Business @ UC Berkeley MET Software developer at Carline.