B

u

i

l

d

i

n

g

 

E

f

f

e

c

t

i

v

e

 

D

e

s

i

g

n

 

S

y

s

t

e

m

s

 

f

o

r

 

t

h

e

 

W

e

b

Purpose and Value

A design system is a documented collection of visual elements, serving as a unified source of truth for digital products such as websites, platforms, applications, and more. Design systems are often built and managed by dedicated design teams within a company and typically consist of UI/UX designers, front-end developers, and digital strategists. The purpose of a design system is to ultimately ensure visual consistency, improve workflow among team members, and provide scalable solutions to accommodate business growth. Industry-leading technology companies such as Apple and Google, as well as forward-thinking retail brands such as Nike and Starbucks, leverage effective design systems to ensure an impactful brand experience across all digital touchpoints.

Creating a design system is a collaborative effort that helps align internal product, engineering, and design teams. When successfully implemented, design systems can help synergize different workstreams and reduce the risk of misalignment, ultimately saving time, costs, and resources for a company.

Elements and Components

With design systems for the web, basic visual elements serve as the building blocks for a more comprehensive library of web page components. These foundational elements often include:

1. Logo Application

2. Color Palette

3. Typography

4. Spacing

5. Sizing

6. Grid Layouts

7. Iconography

8. Illustrations

9. Photography

10. Videography

11. Interactions

12. Animations

Using these elements, a systems design team is able to create a growing library of web page components under one cohesive visual language. Some of the most commonly used web components include text blocks, image blocks, video blocks, button styles, form styles, and more. Depending on the organization, a design system can also be referred to as a pattern library, a user interface library, or modular design.

Process and Development

1. When creating a design system for the web, the initial step is to conduct a comprehensive audit of your brand’s existing visual language and online components. Start with your company’s website, but also consider other digital touchpoints with your customers, such as customer portals, marketing emails, social media, and more.

2. Organize your existing library of components and identify which visual elements your team wants to lean on as a source of truth going forward. In this step, your goal is to determine which elements will be incorporated, which will be removed, and whether it is necessary to revisit and refine your brand’s design language to improve consistency.

3. Document all elements of your design system with examples into one consolidated file, and if possible, consider building an interactive application online. It is common for leading companies to build “living” web documents for easy accessibility and scalability, providing a more tangible and iterative format for internal use.

References

https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6

https://medium.com/nextux/a-quick-guide-to-creating-a-design-system-7888e267171f

https://www.forumone.com/ideas/what-is-design-system/