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

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?

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

@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

Design Systems
by Alla Kholmatova

@puppo92

Design Tokens

@puppo92

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