Component-Driven Design Systems
Development of digital products is a complex process that involves multiple stakeholders and roles: managers, designers, engineers, QA, and customers. This increases the communication overhead, slows down the process, and oftentimes results and less than ideal user experience.
- How to communicate design ideas between different stakeholders effectively?
- How to deliver consistent UI without constant supervising?
- How to ensure same problems not being solved multiple times?
Design systems offer a systematic approach to the process of product creation. This approach establishes an organization-wide design language that can be backed into a UI library and the styleguide and becomes the single source of truth for the entire organization. Component libraries and living styleguides encourage reuse, promote consistency, improve team productivity, help to identify common patterns and solve similar problems only once.
Design systems help teams to stay focused on things that matter and ship higher quality products in less time and effort.
What will you learn
- What is a design system and how can it enforce the design language
- Introduction to the Component-Driven Development process
- How to identify problems and issues with user interface, perform a UI inventory — a process where we’re going to identify problems with the current UI and structure it in a systematic way
- How to automatically generate a living styleguide from the source code
- How to design and implement a UI component library that is easy to use and maintain
- How to apply this knowledge to build a real product using only components from the UI library
- How to establish and maintain company-wide processes to work with design systems
Who is this workshop for
It's mainly designed for frontend developers with the focus on HTML and CSS and basic React. That being said, if you're a designer, you'll learn how modern frontend development look like which can help you communicate with you dev team. This workshop doesn't cover the technological aspect (although we'll write some code) but is more focused on the way you think and structure your design system.
About the coach
Andrey is a design system independent expert, a frontend engineer, and an interaction designer, specializing in UX, design systems and modern frontend architecture. He has been leading teams, designing and developing real products using web technologies for 20 years. Andrey is a co-organizer of ReasonConf, ReactVienna community, co-creator of MacOS app ColorSnapper, author and maintainer of several popular open source projects like react-dropzone and lint-staged and winner of the Open Source Award, international speaker and workshops coach.