Design System for
Software Development Team
Luca Del Puppo
Luca Del Puppo
- Full Stack Developer
- Javascript Enthusiastic
- Typescript Lover
- “Youtuber”
- “Writer”
Love sport: running, hiking
Love animals
@puppo92
Agenda
- What is a design system?
- Benefits of having an effective Design System
- How to create a Design System
- Best practices for maintaining a Design System
- Conclusion
@puppo92
What is a Design System?
@puppo92
@puppo92
@puppo92
Are they the best
Design Systems for you?
@puppo92
@puppo92
A Design System is
a set of interconnected patterns and shared practices coherently organized to serve
the purpose of a digital product.
@puppo92
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)
Vocabulary
@puppo92
Pattern Library
Language
@puppo92
Design System
Literature
@puppo92
Interface
What Design System is not
- styleguide
- pattern-library
- job for Designer
- UX
- checklist
@puppo92
When and where is it crucial?
@puppo92
Benefits of having
an effective
Design system
@puppo92
@puppo92
-
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
@puppo92
What is need?
- Business Model
- Personas o Proto-Personas
- User Journey
- User Interface
@puppo92
Principels
- Between 3 and 5
- Authentic & Genuine
- Handy & Applicable
- Clears
- Easy to remember
@puppo92
Parameters & common rules
Modular
Strict
Integrated
Flexible
Governance
- Which is the team?
- Which are the tools?
- How do you make the results visible?
- What are the meets?
@puppo92
Design Patterns
a Design Pattern is
a general repeatable solution to a commonly occurring problem in software design
@puppo92
Design Patterns - Types
@puppo92
- Functional
Tangible block of the user interface - Perceptive
The aesthetic essence of our element
Design Patterns - Tools
- Paper
- Figma
- Invision
- Sketch
- Adobe
- .....
@puppo92
How to define Design Patterns
@puppo92
-
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
Patter Library
The Pattern Library is
a tool to document and share
Design Patterns
@puppo92
Patter 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)
@puppo92
Patter Library - Anti Patterns
- It exists, but it's unused
- It's used just by a part of the team
@puppo92
Patter Library - Tools
- Storybook (https://storybook.js.org/)
- Frontify (https://frontify.com/)
- PatternLab (https://patternlab.io/)
- Fractal (http://www.fractal-design.com/)
@puppo92
Best practices for maintaining
a Design System
@puppo92
Maintain a Design System
- Periodically check the product and verify if there are repetitive patterns not mapped
- Interface Inventory periodically
- Three Strikes And You Refactor
@puppo92
Never ends
@puppo92
Conclusion
@puppo92
Conclusion
- In charge of all of you
- Must help you
- Must be shared
- Must be your language
- Must be your identity
@puppo92
Homeworks 📚
The Book
@puppo92
Design Tokens
@puppo92
Luca Del Puppo
@puppo92
Luca Del Puppo
Puppo_92
@puppo