Do you sometimes lose track between the countless tasks at work, household, sports and whatever else might come up?
I certainly do feel that way. And even though I try to organize myself with note taking and journaling, I haven’t found a perfect system for my life yet. But for my work as a UX designer I immensely value a reliable system.
On the one hand, this of course includes a proper design system that helps me make the design accessible and reusable for others. On the other hand, it is also a helpful documentation and source for further inspiration.
Design systems — one of my favorite topics when it comes to working as a UX designer. 🤩
What is a Design System?
A design system is a collection of standards defined for a product and/or whole organization to handle design related topics in a single source of truth. Most design systems include reusable components and pattern libraries.
In any case, it is not only a set of UI elements, but also includes, for example, the tone and voice of your design. In addition, the wording could also be part of the design system.
For example, is it documented whether it means remove, delete or discard on a button in order to get rid something?
What does a Design System include?
Style guide — It’s the basis of a design system and contains the smallest parts that are needed in almost all further elements of the design system.
- Typography
- Colors
- Tone and voice
- Writing style
- Trademarks and logos
Component Library — This is the heart of the design system and probably requires the most attention over time. All individual elements of the user interfaces are documented here, including all their states and variants.
- Buttons
- Input field variants as text input or date picker
- Dropdowns
- Tool tips
- Filter components like radio buttons, check boxes or sliders
Pattern Library — In contrast to the component library, in which individual UI elements are documented, the pattern library contains larger “components”, in which several components are combined and shows how they can work together in the interface.
- Navigation
- Forms
- Filters
- Bigger groups like login or sign up pages
Where to learn about Design System?
Books about Design Systems
If you love reading and are interested in design systems, you’re lucky. There are great books out there that will help you to dive deeper into setting up and creating a design system.
Practical UI Patterns for Design Systems
— Diana MacDonald
You will learn what UI patterns are, how you can use them and why consistency is king when it comes to product design. Diana MacDonald also shows in her book the best examples of very common UI patterns so that you get inspired for your own work.
Atomic Design
— Brad Frost
Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.
atomicdesign.bradfrost.com
Expressive Design Systems
— Yesenia Perez-Cruz
Learn to build purposeful design systems that support and strengthen your team’s creativity.
Design System Bootcamp
If you not just wanna read but learn actively and see in action how to create an amazing design system you should join the Memorisely Design System Bootcamp.
It’s a part-time 5 week course with live classes, great teachers and wonderful class mates. I did the bootcamp in 2021 and learned things I now use in my everyday work as a solo designer, being also responsible for the whole design system work. If you have any questions regarding the bootcamp, just reach out to me.