Luca Del Puppo - Senior Software Engineer
The recipe for a universal Design System
Big Thanks to
Luca Del Puppo
- Senior Software Engineer
- Javascript enthusiast
- Typescript lover
- “Youtuber”
- “Writer”
Love sport: running, hiking
Love animals
Recipe
- What is a design system?
- Benefits of having an effective Design system
- How to create a Design System?
- Technical challenges
- Who can help developers?
- Conclusion
What is a Design System?
Are they the best
Design Systems for you?
A Design System is
a set of interconnected patterns
and shared practices
coherently organized to serve the purpose of a digital product.
Vocabulary
Design System
Pattern
Funzionali
Pattern
Percettivi
Design principles
Governance
Params & Rules
Shared language
typography
iconography
margins
colors palette
navigation
form
layout
CTA
Styleguide
Components
(pattern library)
What Design System is not
- styleguide
- pattern-library
- job for Designer
- UX
- checklist
When and where is it crucial?
Benefits of having
an effective
Design system
-
Promotes consistency
-
Reduced building time
-
Reduced design and development debt
-
Allows room for innovation
-
Contributes to strong, memorable brands
How to create a Design System
What is needed?
- Business Model
- Personas o Proto-Personas
- User Journey
- User Interface
What is in charge of you?
- Principles
- Governance
- Design Patterns
- Patter Library
Principles
- Between 3 and 5
- Authentic & Genuine
- Handy & Applicable
- Clears
- Easy to remember
Governance
- Which is the team?
- Which are the tools?
- How do you make the results visible?
- What are the meets?
Image by catalyststuff on Freepik
Design Patterns
a Design Pattern is
a general repeatable solution to a commonly occurring problem in software design
Design Patterns - Types
- Functional
Tangible block of the user interface - Perceptive
The aesthetic essence of our element
Design Patterns - Tools
- Paper
- Figma
- Invision
- Sketch
- Adobe
- .....
How to define Design Patterns
-
Interface inventory (http://bradfrost.com/blog/post/interface-inventory/)
-
Inductive process from UI+User Journey to Pattern (design driven)
-
Periodically and after designing (well) the interface
frontenders, designers, copywriters (4/8p)
-
Outcome = draft of the standard patterns
-
Process > Result
Pattern Library
Pattern Library is
a tool to document and share
Design Patterns
Pattern Library - Best practices
-
MUST HAVE a Structure (sorted, hierarchical, by functionality..)
As the team is used to think - MUST HAVE minimal info (name, scope, example, variants)
Pattern Library - Anti Patterns
- It exists, but it's unused
- It's used just by a part of the team
Pattern Library - Tools
- Storybook (https://storybook.js.org/)
- Frontify (https://frontify.com/)
- PatternLab (https://patternlab.io/)
- Fractal (http://www.fractal-design.com/)
Technical challenges
Requirements
- Available for every possible framework
- Performance
- Prevent css override
The perfect solution
doesn't exist
The perfect solution exists only
for your case
But...
we can think about
STANDARDS
we can think about
Web Components
we can think about
Why Lit?
Why?
A library with 3 simple properties
- Simple
- Building on top of Web Components standards
- ready to productivity
- designed with web platform evolution in mind
- Fast
- 5kb
- no need to rebuild a virtual tree and diff it with the DOM
- WebComponents
- Every Lit component is a native web component
Build one
runs with every framework
Because the standard WEB
is forever
We hope 😅
The Carbon Example
Design system by IBM
They are moving to Lit
Demo
Image by catalyststuff on Freepik
Conclusion
Conclusion
- In charge of all of you
- Must help you
- Must be shared
- Must be your language
- Must be your identity
- Should survive at the javascript frameworks
Which is the secret ingredient?
The secret ingredient is
YOU
Homeworks 📚
The Book
Design Tokens
Lit & WebComponents
Luca Del Puppo
@puppo92
Luca Del Puppo
Puppo_92
@puppo