- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
Building a Design System: A Practitioner's Case Study
1. The Silver Bullet
of Product
Development
Building a design system. The true story.
2. Hello!
Role: CEO and Co-founder at UXPin. Design Ops team.
Background: UX Design & Psychology
Passion: Design and Development at scale. Product Strategy.
Design Ops. Design Systems.
@marcintreder
3. The Full-Stack UX Platform
Agile UX in one place: design systems, prototyping, and documentation together
4. UXPin in a Nutshell
Mission: To streamline the product development process with the
power of design and collaboration!
Customers: +150 countries. Focus on enterprises (PayPal, Sapient…)
Team: 70 people. 2 offices (Mountain View, CA and Gdansk, Poland)
www.uxpin.com
8. +40 interviews with design leaders
“What is the biggest problem your team is facing in the design process?”
9. Sophia Baboolal via Unsplash
The Impossibility of Scale
• UI gradually decays into inconsistency
• User happiness decreases
• Teams become slower and slower
10. The entropy of a sufficiently complex digital
product always increases.
15. Yes
No, but we're currently working on one
No, and we aren't working on one
I don't know
0% 10% 20% 30% 40%
Does your company have a pattern library or
design system?
Answered: 3,157
16. Does your company have a pattern library or
design system?
Answered: 3,157
What is a Design System?
And how does it help solve the problem of design inconsistency?
17. “A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.“
- Nathan Curtis
22. s
The Structure of a Design System
Color Palettes Typographic Scales Grid Definitions Icons & Assets
Templates Modules Components Elements
Design Principles Implementation Guidelines Editorial Guidelines
Building Blocks
UI Patterns
Rules
24. History
Non-extensive, subjective, history of Design Systems
Design Patterns. Elements of
Object-Oriented Software
A Pattern Language
Christopher Alexander
YUI Library
Sass CSS
Bootstrap
Salesforce Lighting
ES6 JS Modules
25. Why Today?
Why this time Design Systems are going to reach scale.
Digital matters: 6/10 top 10 companies in the world are tech companies (Apple, Alphabet,
Microsoft, Amazon.com, Facebook, Alibaba).
Experience matters: Design was never more important. Business value of user experience is
widely recognized.
Technology is ready: Web technology became modular (js modules, and libraries e.g. React,
CSS preprocessors, task managers...)
Is design ready?
27. 1. Accept that building a Design System is
an ongoing process.
Make it part of your product development. Start building it now.
28. “A design system isn’t a project. It’s a product serving products.”
- Nathan Curtis
29. Design system is a process and therefore is
simultaneously always ready and never done.
Design system with one color defined, properly named,
implemented and accepted by an organization is better
than a full static style guide.
30. 2. Form a multidisciplinary design operations team.
Designers, engineers and content managers should run the DesOps house
and gradually solve problems of a product organization related to the
consistency of experience and efficiency of design/development process
31. 3. Build your interface inventory
The Interface Inventory is a neatly organized box with all the pieces of your
product. It shows all the glaring inconsistencies and serves as a kick-off to
the process of building a design system.
32. Do you want to see a real interface inventory?
33. 4. Build your building blocks
Step by step start standardizing your building blocks. Take colors, basic
properties, typography, iconography - improve it, organize it, document and
deliver to your product teams.
38. Primary/base colors and other properties:
Secondary/accent colors and other properties
@blue-base: #006cff;
@blue-lighten-15: lighten(@blue-base, 15%); // #4d98ff