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?

• Scale-up Business (💰 & 👥)
  • reduce costs
  • errors & frictions
  • increase the quality
• Strong brand
• UI is value

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

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

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 Systems
by Alla Kholmatova

Design Tokens

• What Are Design Tokens?
• Living Design System
• Tokens in Design Systems
• Design Tokens: Scaling Design with a Single Source of Truth

Lit & WebComponents

• WebComponents
• Lit docs
• Lit Youtube