Chapters
Chapters
Chapter 3
Structure
Structure
Structure
Structure, welcome home.
Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.
Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.
What does the overall identity look like?
Why is the cart abandonment rate so high?
Why is the cart abandonment
rate so high?
Why are people not completing key user flows?
Why are people not completing
key user flows?
Are the design, color palette and typography consistent throughout all materials?
Are the design, color palette and
typography consistent throughout
all materials?
What do the visuals communicate and are they in sync with our target audience and our business objectives?
What do the visuals communicate
and are they in sync with our target
audience and our business objectives?
What to include?
Start collecting materials
Start collecting materials
As I mentioned in the previous chapter, you're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones.
As I mentioned in the previous chapter, you're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones.
Foundations
Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced.
Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced.
For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?
For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?
Components
Group components by purpose. However, remember that you don't want to end up with 1000 components with slight differences. You will add a lot of complexity and, in the end - a lot of design and tech debt.
Group components by purpose. However, remember that you don't want to end up with 1000 components with slight differences. You will add a lot of complexity and, in the end - a lot of design and tech debt.
When you are considering if the component is valuable enough to be part of the design system, ask yourself:
When you are considering if the component is valuable enough to be part of the design system, ask yourself:
It's like baking a cake. 🎂
If you add too many layers,
everything will fall apart.
It's like baking a cake. 🎂
If you add too many layers,
everything will fall apart.
Don’t write poetry.
Don't use jargon and fancy words.
Please write how you've done it in simple language, explain where to use it, and add guidance for using it again.
Be straightforward as possible. Don't write essays; no one will read them.
People using the design system will only use the components when they fully understand the specifics.
Don't use jargon and fancy words.
Please write how you've done it in simple language, explain where to use it, and add guidance for using it again.
Be straightforward as possible. Don't write essays; no one will read them.
People using the design system will only use the components when they fully understand the specifics.
Clear and thorough documentation is an essential part of any design system.
Clear and thorough documentation is an essential part of any
design system.
Technical ecosystem
There are a lot of options for connecting design and development. Your head can start hurting from decision fatigue, especially when figuring out what to do.
You have third-party tools, plugins, and the most advanced and secure option - creating your Design API.
There are a lot of options for connecting design and development. Your head can start hurting from decision fatigue, especially when figuring out what to do.
You have third-party tools, plugins, and the most advanced and secure option - creating your Design API.
Abc
Abc
Design
Design
Figma
Development
Development
Tokens Studio
Knapsack
Knapsack
backlight.dev
Calculations
It is always wise to calculate before deciding on priorities and a roadmap.
To start, compare the costs and time required to use different tools. Compare features that you need versus the ones that a specific tool offers. This evaluation step forces you to think of concrete examples of the "final" system. ("Final" because nothing in digital is ever final. 😅)
The overview also helps highlight some benefits of a design system in a way that will help you pitch the system to others, helping the team understand time and cost savings.
If you want to explore more tools, explore the list of valuable resources ->
It is always wise to calculate before deciding on priorities and a roadmap.
To start, compare the costs and time required to use different tools. Compare features that you need versus the ones that a specific tool offers. This evaluation step forces you to think of concrete examples of the "final" system. ("Final" because nothing in digital is ever final. 😅)
The overview also helps highlight some benefits of a design system in a way that will help you pitch the system to others, helping the team understand time and cost savings.
If you want to explore more tools, explore the list of valuable resources ->
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2023 The Design System Guide by Romina Kavcic
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2023 The Design System Guide by Romina Kavcic
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2023 The Design System Guide by Romina Kavcic