One style to rule'em all - Styleguide & Atomic Design ~ Gaia Zuccaro

Developers
are from Mars,
Designers
are from Venus

Veniamo da mondi diversi
Ma vogliamo arrivare allo stesso traguardo.
Linee
di comando
Librerie di
programmazione
Pattern di
programmazione
Photoshop
Sketch
Griglie e Layout
Pattern
di interfacce
Creare
interfacce
belle che
funzionino!
DEED – Meetup Roma - 18 Aprile 2016

Style Guide
(ma anche style tiles, interface inventories, pattern libraries…)
Una style guide serve a rappresentare come tutti
gli elementi dell'interfaccia e i suoi componenti
devono essere rappresentati visivamente.
Un punto di riferimento per l'interfaccia utente (UI).

Style Guide
(ma anche style tiles, interface inventories,
pattern libraries…)
Una style guide serve a
rappresentare come tutti gli
elementi dell'interfaccia e i suoi
componenti devono essere
rappresentati visivamente.
Un punto di riferimento per
l'interfaccia utente (UI).

Style Guide

Migliora la vita di tutti
Designer, sviluppatori, clienti.
Ai Designer, perché utilizzare una style guide, aiuta a
progettare con maggiore consistenza.
Agli Sviluppatori, perché rende più snello e rapido il processo di
transizione e analisi dal design all’implementazione
Al Cliente, perché ha un sistema di regole condivise indipendente dai
fornitori, e una rapida comprensione dell’identità del proprio prodotto.

Migliora la vita di tutti
Designer, sviluppatori, clienti.
• Sono indispensabili quando si lavora in team, per fare in modo che tutti
abbiano ben presente l’obiettivo
• Permettono di conservare coerenza in un sistema complesso, anche
quando entrano in gioco dispositivi diversi
• Spingono a pensare al progetto come un sistema, non ad un insieme di
singole pagine

Come procedere?
Roadmap (la mia) per la costruzione di una buona styleguide
Prima disegnate il vostro prodotto. Dopo la vostra style guide. Verificate
prima che quello che avete in mente funzioni, e dopo standardizzatelo.
Se siete dei designer, sarà insita nel vostro dna un’eterna insoddisfazione.
delle vostra style guide. Conviveteci! Creare un sistema visivo è un
processo iterativo.
Mettete bene a fuoco il tono e l’obiettivo della vostra comunicazione e poi
iniziate a scrivere la vostra styleguide.

Elementi di base
Per una buona style guide
• Principi di Design
• Tipografia
• Colori
• Uso delle immagini
• Griglie e spaziature
• Definizione dei componenti

Elementi di base
Principi di Design

Elementi di base
Tipografia

Elementi di base
Colori

Elementi di base
Uso delle immagini

Elementi di base
Griglie e spaziature

Elementi di base
Definizione dei componenti

Atomic Design
Progettare verso lo sviluppo
“We’re not designing pages, we’re designing
systems of components.”—Stephen Hay

L’atomic design è una metodologia, ideata da Brad Frost, tramite la
quale usiamo la metafora degli atomi per identificare i mattoncini e le
loro aggregazioni.
Gli atomi si aggregano e creano le molecole, le quali unendosi formano
gli organismi che infine generano i template di pagina. Unendo i
contenuti (testi, immagini) ai template nascono le pagine del nostro sito.
http://patternlab.io/
Atomic Design
Progettare verso lo sviluppo

DEEV – Meetup 18 Aprile 2016

Ma i Designer non lo
hanno sempre fatto?

Sì… ma ci siamo scordati
di dirvelo :)
… e di condividerlo.

Miglioriamo il flusso.
Insieme.

Come migliora il flusso
questo approccio?
Elimina la frizione tra la consegna
dei nostri layout e l’interpretazione e
l’incertezza degli sviluppatori in fase
di costruzione del front end. Non
devono interpretare uno “stato” o un
funzionamento.

Elimina la produzione di
centinaia e centinaia di file che
producono microscopiche
varianti sia in termine di funzione
che di responsività.
Come migliora il flusso
Questo approccio?

L’atomic design ed in generale le style guide vanno di pari
passo con le guidelines modern sulla strutturazione ad
oggetti del front end.
• BEM (Block, Element, Modifier)
• OOCSS (Object Oriented Css)
• SMACSS (Scalable and Modular Architecture for Cascading Style Sheets)
• Inverted triangle CSS
Un flusso condiviso
tra designer e sviluppatori.

Dagli elementi di base
Al dettaglio, passando per componenti riutilizzabili
Un flusso condiviso
tra designer e sviluppatori.

Un vocabolario condiviso
da costruire insieme

Ok, però…
Dobbiamo pensare in grande!
Una style guide obsoleta non serve a nessuno. Doverla
mantenere aggiornata manualmente è un lavoro spesso noioso e
di non immediato ritorno: come è possibile risolvere il problema
alla radice?
Dalle front end style guides alle living front end style guides

living front end style guides
Linee guida generate in automatico da un sito esistente,
dove il codice non è duplicato, non c’è bisogno di alcuno sforzo
per mantenerle e non esiste quindi pericolo di disallineamento
tra un progetto e la sua documentazione.
La maggior parte dei generatori di Living style guide, funzionano creando una documentazione tramite il parsing
dei commenti nei file css, che recepiscono il cambio dei valori nel codice base e in automatico creano una nuova
style guide.

Una Living Style Guide rende sempre più importante l’interazione tra
design e sviluppo. È l’intero team a dover dialogare per trovare una
soluzione al problema della mantenibilità nel lungo periodo. Non è un
problema esclusivamente di design, anzi.
Ecco perché è sempre più importante avere designer che
sappiano dialogare con degli sviluppatori e viceversa.
living front end style guides

Power
Tools!

Impariamo da:
http://styleguides.io/
Raccoglie esempi di styleguide, articoli, libri, risorse.
• Mailchimp
• SalesForce
• Ibm
• LonelyPlanet
• Design Italia

Creiamo con:
Simboli nidificati di sketch
Cercando di mutuare la struttura logica
dell’ATOMIC DESIGN.
Sincronizziamo i simboli e gli assets con
Brand.ai

Condividiamo con:
https://frontify.com/
Permette di creare una style guide online e
di condividerla con un team. Ha anche delle
API la possibilità di comunicare con Slack,
GitHub e tramite Zapier verso tutti i servizi
supportati.

Generiamo con:
• http://patternlab.io/
• http://fbrctr.github.io/
• https://github.com/davidhund/jekyll-styleguide
Lista completa https://github.com/davidhund/styleguide-generators

Manteniamo con:
• Kss
• Fractal
• Hologram
• The Living Style Guide
• Styledocco
Lista completa https://github.com/davidhund/styleguide-generators

Così potrete dire
anche voi al vostro
developer:

“you are
the css to
my html”

Grazie a Gigio e ad Alberto.
Sviluppatori che amano i designer.
@gaiazzz

One style to rule'em all - Styleguide & Atomic Design ~ Gaia Zuccaro

Recommandé

Recommandé

Contenu connexe

Similaire à One style to rule'em all - Styleguide & Atomic Design ~ Gaia Zuccaro

Similaire à One style to rule'em all - Styleguide & Atomic Design ~ Gaia Zuccaro (20)

One style to rule'em all - Styleguide & Atomic Design ~ Gaia Zuccaro