Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.
Summary:
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
Building a Design System: A Practitioner's Case Studyuxpin
- 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
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
Building a Design System: A Practitioner's Case Studyuxpin
- 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
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Building compelling business cases for Design SystemsLaura Van Doore
This talk was originally presented at Web Directions Summit 2018 in sunny Sydney.
Design Systems have reached peak popularity. It’s no secret that the topic of Design Systems have been an outrageously popular topic over the past few years. Every design team has either built one, is building one, or wants to build one. But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?
This talk is aimed primarily at designers, but may also interest product managers, front end developers & other roles core to a product team. It will be of most benefit to those who are either looking to introduce a design system into their organisation, or to bolster their case to increase the business investment in an existing design system. The aim of the session is to equip the audience with the right tools & mindset to effectively sell a design system project to higher levels of business function within their organisation.
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
Design systems and UI libraries are a popular topic more than ever before. The most challenging tasks for front-end developers is to ensure the technical functionality. The decisions we make today have an impact on the team’s work for several years ahead. Our goal is not to change our minds on a frequent basis. How can we adopt a design system successfully rather than being it a disaster? What tools, methods and processes can we apply?
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Building compelling business cases for Design SystemsLaura Van Doore
This talk was originally presented at Web Directions Summit 2018 in sunny Sydney.
Design Systems have reached peak popularity. It’s no secret that the topic of Design Systems have been an outrageously popular topic over the past few years. Every design team has either built one, is building one, or wants to build one. But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?
This talk is aimed primarily at designers, but may also interest product managers, front end developers & other roles core to a product team. It will be of most benefit to those who are either looking to introduce a design system into their organisation, or to bolster their case to increase the business investment in an existing design system. The aim of the session is to equip the audience with the right tools & mindset to effectively sell a design system project to higher levels of business function within their organisation.
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
Design systems and UI libraries are a popular topic more than ever before. The most challenging tasks for front-end developers is to ensure the technical functionality. The decisions we make today have an impact on the team’s work for several years ahead. Our goal is not to change our minds on a frequent basis. How can we adopt a design system successfully rather than being it a disaster? What tools, methods and processes can we apply?
Zeeto Tech Exchange: Design for Scalability - UXZeetoSlides
Zeeto is a technology platform that makes online properties and mobile apps money by asking their visitors smart questions and using their answers to display high-value ads.
The Zeeto Tech Exchange is a leading San Diego tech community group that meets on a monthly basis to discuss, debate and network. "Design for Scalabality" was presented in February 2017.
Design Systems are Coming... Are you Ready?Vernon Kesner
Responsive Web Design has flipped the workflow of multi-discipline organizations on its head. Waterfall methodologies no longer work due to new points of collaboration needed between design and development. These intersection points leave many asking, "What does a wireframe look like?" or "What happened to comps?" This talk will look at how building pattern libraries can also help to build better teams.
Developing Design Systems: Patterns, Prototypes, and People (Dennis Kardys)Future Insights
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
You’ve heard the talk about how we should be designing systems not pages, and how taking a modular, component driven approach to design is key. All true, but developing design systems is hard, messy work. Too often scalability and modularity become afterthoughts in the design process—evidenced as pages featuring combinations of almost, but not quite, identical components are passed on to the front end designer to sort out. But scalable, component-based design is not just a single person’s responsibility. To get everyone onboard we need to bake system-thinking into the entire design process. In this talk we’ll dissect what constitutes a design system, and look at different prototyping techniques that can be used to prepare, present, and bullet-proof one. We’ll also tackle challenges like: how to remain creative and ideate when taking a modular approach to design, how to define and document system rules, and how to stay organized. Front-end engineer and experience designer alike, you should come away from this session with a fresh take on patterns and prototyping, along with practical examples for how they can supercharge team collaboration.
Today there are multiple CSS frameworks, pre-processors, grids and naming strategies that can be used to organize your codebase. The question is, how do you sort through all the noise and figure out which of theses new CSS coding strategies and tools are best for your specific project and how do you combine them in order to create the best environment for styling? (Created for a Workshop)
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself:
How do we start it?
But here are some guidelines to help you clarify how to start a DS.
Design systémy a UI knihovny jsou dnes tématem víc než kdy předtím. Zajistit, aby takový systém fungoval také technicky je pro frontend vývojáře jeden z nejnáročnějších úkolů vůbec. Dnešní rozhodnutí ovlivní práci týmu na roky dopředu a není možné je často měnit. Jaké nástroje, metodiky a procesy zvolit, aby zavedení design systému bylo pro tým i produkt úspěchem a nikoli katastrofou?
I made this talk to help my Design Team colleagues, at [Digital Origin](https://www.digitalorigin.com/), to better understand the importance of designing in a modular way.
Modularity is the key to creating a flexible design system. For a system to be modular, it must have interchangeable parts (components).
Watch my slides if you want to learn Modular Web Design, to reach a smart system of reusable design patterns, interchangeable components, and well-planned system logic.
Markdown is a lightweight markup language with plain text formatting syntax, designed to be converted to HTML and many other formats using a tool by the same name.
I made this conference for my teammates at [Optimyzet](http://www.optimyzet.com/) –most of them designers– to help them write quick notes in a different way.
Just watch my slides if you want to become a Markdown wizard in 10 minutes.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
2. SUMMARY
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
3.
4. 1. ABOUT ME
Nadal Soler
Front-end Web Developer, focused on UX
https://www.linkedin.com/in/nadalsoler/
https://twitter.com/nadalsol
https://github.com/nadalsol/
5. 1. ABOUT ME
Style Guide
& Pattern Library
CSS Framework
Pattern Library
Design System (WIP)
8. 2. WHY HAVE ONE?
Recurrent problems
1. UX and code inconsistencies
2. Misunderstandings across teams
3. Less collaboration
4. Increased costs (time wasted doing repetitive tasks)
5. Slow shipping times
6. No scalability
9. 2. WHY HAVE ONE?
Main benefits
1. Efficiency
2. Consistency
3. Design and code quality
4. Accessibility
10.
11. “A design system is a set of interconnected patterns
and shared practices, coherently organised to serve
the purposes of a digital product”.
Alla Kholmatova
Designer and writer focused on design systems
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
12. There isn't a standard definition of "design system",
and people use the term in different ways – sometimes
interchangeably with "style guides" and "pattern libraries".
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
13. Style guides
Brand identity documents focused on logo treatments,
corporate values and brand styles, such as colour and typography.
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
14.
15. Pattern libraries*
A tool to collect, store and share your design patterns,
along with the principles and guidelines for how to use them.
(*) aka “front-end style guides”, “UI libraries” or “component
libraries”.
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
16.
17. Going further…
“A design system is a collection of components,
styles and processes to help teams design and build
consistent user experiences — faster and better”.
Jeroen Ransijn
Design Systems Lead at Segment
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
18. Last, but not least...
“We’re not designing pages,
we’re designing systems of components”.
Stephen Hay
Head of UX, Author of Responsive Design Workflow
3. DESIGN SYSTEM (FUNDAMENTALS)
DEFINITIONS
19. Carbon Design System
https://www.carbondesignsystem.com/
Lightning Design System
https://www.lightningdesignsystem.com/
Polaris
https://polaris.shopify.com/
Mailchimp:
https://ux.mailchimp.com/patterns
https://styleguide.mailchimp.com/
Bulb:
http://design.bulb.co.uk/
3. DESIGN SYSTEM (FUNDAMENTALS)
SOME EXAMPLES
20.
21.
22.
23.
24.
25.
26.
27. 1. Atomic Design
2. Interface inventories
3. Create a Pattern Library
4. Customise patterns with settings
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
28. Atomic design is a methodology composed of five distinct stages
working together to create interface design systems in a more
deliberate and hierarchical manner.
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
29. Atomic design is not a linear process.
Instead, think of the stages of atomic design as a mental model
that allows us to concurrently create final UIs and their underlying
design systems.
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42. Advantages of atomic design
“Atomic design provides us with a few key
insights that help us create more effective,
deliberate UI design systems”.
Brad Frost
Web designer and speaker, author of Atomic Design
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
43. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
ATOMIC DESIGN
Advantages of atomic design
1. Quickly shift between abstract and concrete.
2. See interfaces broken down to their atomic elements and also
see how those elements combine together to form our final UIs.
3. Craft design systems that are tailored to the content that lives
inside them.
4. A helpful shorthand for discussing modularity with our
colleagues, and provides a much needed sense of hierarchy in
our design systems.
44. “An interface inventory is a comprehensive
collection of the bits and pieces that make up
your user interface”.
Brad Frost
Web designer and speaker, author of Atomic Design
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES
45. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES
46. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
INTERFACE INVENTORIES
Some key questions
1. Which patterns should stay, which should go, and which can be
merged together?
2. What pattern names should we settle on?
3. What are the next steps to translate the interface inventory into
a living Pattern Library?
47. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CREATE A PATTERN LIBRARY
48. Settings may help on developing faster, ensuring consistency and
maintainability:
1. Set a default "base-agnostic theme", to be used for all
projects in “vr-sites”.
2. Create a “_settings.scss” Sass variables file, in order to
customise the default appearance for all components.
3. Import the "base-agnostic theme" in the rest of projects,
overriding those settings with custom values.
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
49. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
50. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
51. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
52. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
53. Settings leads to…
1. UI consistency
2. Reusable code (DRY!)
3. Fast development time
4. Easy adoption of new products
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS)
CUSTOMISE PATTERNS WITH SETTINGS
54.
55. The cost of creating a design system depends on how further do
you want to go...
1. Maturity of the product
2. Resources invested (people, time, money…)
3. Level of collaboration
4. Starting from scratch?
5. Size of the company
6. Number of projects and components
Keep in mind it’s a work in progress!
5. COST & VALUE
COST
56. 5. COST & VALUE
VALUE
1. Consistency and cohesion (better UX)
2. Speed up your team’s productivity
3. More collaborative workflow
4. Shared vocabulary
5. Helpful documentation
6. Make testing easier
7. Serve as a future-friendly foundation
8. A single source of truth for everyone
In the end is a matter of saving time and money.
57. “Teams that use the design system can focus
on what’s unique to their product instead
of reinventing common UI components.”
Jeroen Ransijn
Design Systems Lead at Segment
5. COST & VALUE
VALUE
58.
59. 6. INSPIRATION
ARTICLES & BOOKS
ARTICLES
Building a Visual Language
by Karri Saarinen
Driving Adoption of a Design System
by Jeroen Ransijn
Introducing Bulb’s design system
by Alla Kholmatova
BOOKS
Atomic design
by Brad Frost
Design systems
by Alla Kholmatova
60. 6. INSPIRATION
GLOSSARY & PRACTICES
GLOSSARY
Design system glossary
by Bulb team
GOOD PRACTICES
Criteria for new patterns
by Bulb team
Defining patterns
by Bulb team
61. 6. INSPIRATION
TOOLS & RESOURCES
TOOLS
Astrum
Figma
Fractal
Frontify
RESOURCES
Adele
DesignSystems.com
StyleGuides.io
UI Patterns
Pattern Lab
Storybook
ZeroHeight
Check my Pattern library tools research for more details.
62. 6. INSPIRATION
THE HOLY GRAIL OF DESIGN SYSTEMS
Carbon Design System
by IBM
Evergreen
by Segment
Lightning Design System
by Salesforce
Mailchimp Pattern Library
by Mailchimp
Polaris Design System
by Shopify
Solar Design System
by Bulb
63.
64. Feel free to ask any question.
Please join
#design-systems
SLACK CHANNEL