How to work with design systems? 🚀 | Grab a Coffee ☕️ #13

#13・
37

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Grab a Coffee ☕️ will receive your email address.

Grab a Coffee ☕️
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 haven’t found a perfect system for my life yet, 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. 🤩

📒 Design Systems – What and Why
What is a design system? 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
📚 Reading 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
Atomic Design by Brad Frost
Expressive Design Systems by Yesenia Perez-Cruz
Want to learn more about Design Systems?
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.
😊 Share a coffee with me!
✨☕️ Become a Supporter ☕️✨
If you would like to get more insights, follow me on Twitter or Instagram and please share the Grab a Coffee ☕️ newsletter with your friends, colleagues and all other people who could be interested.
See you next week with new topics and an amazingly good cup of coffee. ☕️
Marina 👋
Did you enjoy this issue? Yes No
Marina
Marina @marina_kdot

Grab a coffee and read weekly news on UX and UI Design, breaking into tech and remote work.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Ch. de la Plâtrière 3 | 1981 Vex |Switzerland 🇨🇭