Dalle Styleguide alla Pattern Libraries: cosa serve e quando

Dalle Styleguide alle Pattern Libraries:cosa serve e quando

1

#CSSDAY - Faenza 2017 @Violo - extrategy

Alessandro Violinicoding to work out

Retro Computer Collector Plein Air Lover

Drummer Interface Developer Interaction Designer

2


Contesto:

• single page web application• tablet - desktop - smartphone• progetti > 6 mesi• applicazioni prodotto• team dinamici• team cross professionali• ambito finanziario

3


Le diverse figure professionali sono una ricchezza che possono generare

debito

4


Debito Tecnicoe

Debito di Dominio

5


La Styleguide

6


“è un insieme di standard per la progettazione di

documenti”

7


• connesse alla brand identity• vengono sviluppate da un UI designer• raramente vengono modificate• non necessitano di automatismi

8


• orienta lo studio creativo• condivide le informazioni• favorisce la coerenza• tiene traccia delle decisioni• sperimenta le soluzioni

9


la styleguide non ti permette di costruire una

pagina, ti indica come farlo

10


Come sfrutto le Styleguide

• creo un ambiente per la condivisione• le condivido con tutto il team• raccolgo feedback che possono influenzare il

processo di design

11

#CSSDAY - Faenza 2017 @Violo - extrategy12

Variabili colore



Placeholder


La Pattern Library

15


“è un modo formale di documentare soluzioni a problemi di design”

16


I Design Pattern

17


“sono le soluzioni progettuali generali a problemi ricorrenti”

18


Thanks to:Christopher Alexander

19


Styleguide

• connesse alla brand identity• vengono sviluppate da un

UI designer• raramente vengono

modificate• non necessitano di

automatismi

Pattern Library

• derivano dalla styleguide• vengono sviluppate da un

UI/ID designer• crescono insieme al

progetto• vanno manutenute

(automaticamente?)


Styleguide

• orienta lo studio creativo• condivide le informazioni• favorisce la coerenza• tiene traccia delle decisioni• sperimenta le soluzioni

Pattern Library

• fornisce assets per la pagina

• condivide le informazioni• favorisce la coerenza• condivide le soluzioni

scelte• offre un ambiente per i test


Come creo una buona Pattern Library

• pensando all’applicazione in modo modulare e a componenti

• sfruttando gli approcci di Atomic Design, BEM e OOCSS

22


Applicazione modulare


Atomic Design: atomi, molecole e organismi


BEM


OOCSS


OOCSS


I Layout

28


Come miglioro la gestione dei layout

• permettendo a tutto il team di impostarli in autonomia

• utilizzando layout annidabili• ricavando il contenuto scrollabile in modo

automatico

29





Layout annidabili


Layout annidabili



Contenuto scrollabile ricavato automaticamente






La chiarezza terminologica e un vocabolario comune è alla base della buona

comunicazione

La condivisione delle informazioni a tutte le figure professionali del team riduce i colli di

bottiglia e gli sprechi di tempo

Le scelte di un bravo interface developer può fare la differenza nella manutenibilità

dell’interfaccia

39


Thanks!

40

@Viologithub.com/Violo

extrategy.net/it/alessandro-violini

http://extrategy.net/it/alessandro-violini