Design System for

Software Development Team

Luca Del Puppo

My photo

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

Material Design Image

@puppo92

Carbon Design Image

@puppo92

Are they the best

Design Systems for you?

@puppo92

@puppo92

Booo meme

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

@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

Luca Del Puppo

@puppo92

Luca Del Puppo

Puppo_92

@puppo

Design System for Software Development Team

By Luca Del Puppo

Design System for Software Development Team

  • 699