In principio era lo stile in linea (inline style) e l’uso dei tag table tr td per avere un qualche forma rettangolare con dimensioni prefissate… Poi arrivarono i fogli di stile ovvero i CSS.
Poi una terza generazione di CSS con supporto di media query per diversi dispositivi, poi i preprocessori
LESS, SASS, SCSS e poi Bem, Styled Components … e poi tanta tanta entropia
Per fortuna nel tempo il design si è astratto ad un livello tale da poter fare lavorare grafici (UX, UI designer e tutto il mondo creativo) parallelamente ai sviluppatori, utilizzando per quanto possibile una base comune materiali.
Nel marasma e nella entropia di device, punti di vista e contesti diversi si è arrivato ad avere per lo stesso brand varie versioni grafiche dello stesso prodotto.
Aziende come Spotify in particolare o General Electrics analizzando questo caos decisero di applicare ordine e rimuovere ogni contrasto visivo.
Nel caso di GE, non era piu’ tollerabile che 40000 sviluppatori applicassero idee personali alla UI.
Da qui altri famosi brand come AirBnb , Google, Microsoft etc etc (su StyleGuides ne trovate quasi 300) hanno deciso di pubblicare i loro sistemi sia per attirare interesse sia per farsi pubblicità
Ma come partire per creare un design system da zero? Ovvero definire una volta per tutte come è fatto un bottone, un bordino un effetto, un colore etc etc.
Atomic Design ci viene in soccorso proponendo alcune idee interessanti
- Atomi (form, etichette, bottoni etc etc)
- Molecole (un box di ricerca per esempio, diciamo una web component per essere moderni)
- Organismi (l’header o il footer di una pagina)
- Modelli (insiemi di box all’interno di un contesto)
- Pagine (una rappresentazione reale di un modello, con contenuti reali)
Applicare questo pattern all’inizio è sicuramente dispendioso ma a regime si ha una gestione capillare di ogni singolo elemento. Non solo, all’interno di uno o piu’ team si arriva a parlare un linguaggio “comune” tra sviluppatori (frontend dev) e grafici (ux/ui designer)
