Atomic Design and Sketch: una guida per migliorare il flusso di lavoro

Sketch e Atomic Design sono un potente insieme di strumenti e metodologie che i progettisti possono utilizzare per creare sistemi di progettazione che consentono la standardizzazione e un flusso di lavoro più efficiente.

Sistemi di progettazione: un primer

Un sistema di progettazione è un insieme di componenti e linee guida riutilizzabili che aiutano i team a unirsi attorno a un linguaggio comune durante la creazione e la vita di un prodotto.

Nella maggior parte dei casi, i sistemi di progettazione sono composti da una guida di stile e da una libreria di componenti. Possono anche includere elementi come voce e tono, nonché valori del marchio. Il punto di avere un sistema di progettazione è creare una serie di standard che agiscano come un'unica fonte di verità per un prodotto o un marchio.

Il Material Design di Google è un esempio di un sistema di progettazione dell'interfaccia utente strutturato. Material Design è stato introdotto nel 2014 come un modo per progettare e sviluppare app Android coerenti.

Un altro esempio è Voice and Tone di Mailchimp. Descrive come la propria voce sia sempre la stessa ma il tono cambia a seconda del contesto. Essere consapevoli di questo aiuta a potenziare il contenuto e dare personalità al marchio.

Sebbene ci siano molti metodi diversi che possono essere utilizzati per creare un sistema di progettazione, è una buona idea scegliere un framework che consenta al team di unificarsi attorno a un linguaggio comune e a un insieme di standard. Atomic Design è un ottimo esempio di framework che raggiunge questi due obiettivi.

Progettazione atomica: sistemi di progettazione degli edifici

Atomic Design, una metodologia introdotta da Brad Frost nel 2013, si basa sull'idea che ogni sistema di progettazione può essere definito come una serie di elementi costitutivi che coesistono.

Ecco una rapida panoramica dei componenti di Atomic Design:

• Atomi . Rappresentano gli elementi costitutivi di base di un sistema di progettazione. Un esempio è un pulsante o uno stile di testo.
• Molecole . Un gruppo di atomi che lavorano insieme come un'unità. Le molecole sono elementi tangibili dell'interfaccia utente. Ad esempio, un pulsante e un campo di testo possono essere raggruppati per creare un modulo di ricerca.
• Organismi . Atomi e molecole che lavorano insieme in una struttura complessa. Un campo di ricerca raggruppato con una barra di navigazione forma un organismo di intestazione su un sito web.
• Modelli. Oggetti a livello di pagina che collocano i componenti in un layout che definisce la struttura del contenuto. Ad esempio, prendendo un organismo di intestazione e posizionandolo su un modello di home page.
• Pagine. Istanze di modelli che rappresentano il prodotto finale.

“Abbiamo il compito di creare interfacce per più utenti in più contesti utilizzando più browser su più dispositivi con più dimensioni dello schermo e più funzionalità che mai. Questo è davvero un compito arduo. Per fortuna, i sistemi di progettazione sono qui per aiutarti.”—Brad Frost come introduzione all'Atomic Design e ai sistemi di progettazione.

L'utilizzo di Atomic Design per creare e mantenere un sistema di progettazione aiuterà i designer a lavorare in modo più efficiente e a comunicare meglio all'interno dei loro team. Esistono numerosi strumenti e metodi per creare e mantenere i sistemi di progettazione, ma spesso gli strumenti migliori sono quelli con cui abbiamo più familiarità.

Come utilizzare il design atomico con Sketch

Per sviluppare un sistema di progettazione utilizzando Atomic Design, un ottimo (e già familiare) strumento è Sketch. Ci fornisce una tela per creare atomi, molecole e organismi: gli elementi necessari per definire il nucleo di un sistema di progettazione.

Creazione di atomi

Iniziamo creando tre tipi di atomi in Sketch: simboli, stili di livello e stili di testo.

Simboli. I simboli non sono altro che componenti riutilizzabili. Sono definiti una volta perché possono essere istanziati in un prodotto. Ad esempio, un simbolo di freccia (atomo) può essere definito con proprietà come il colore del bordo, la dimensione, ecc. Possiamo quindi riutilizzare questo simbolo senza doverlo ricreare ogni volta.

Stili di livello . Gli stili di livello sono gli elementi di stile visivo riutilizzabili che rimangono coerenti su ogni livello. Ad esempio, il colore di riempimento della freccia precedentemente definito.

Stili di testo. Gli stili di testo, simili agli stili di livello, sono elementi riutilizzabili che garantiscono la coerenza tra oggetti di testo simili. Ad esempio, definire la dimensione del carattere e il colore di un elemento h1. Funziona in modo simile agli stili di testo in Google Docs o Microsoft Word.

Quando definiamo simboli, stili di livello e stili di testo, Sketch può dividerli in categorie gerarchiche nei suoi menu di simboli e stili di testo con l'uso di una "/" (barra in avanti). Seguire le convenzioni di denominazione e disporre di un insieme ben definito di categorie principali conferirà ai file una struttura organizzata, riducendo la confusione e le incoerenze.

Ecco alcuni modi per creare categorie gerarchiche per simboli, testo e stili di livello in Sketch.

Possiamo rappresentare i simboli usando la seguente convenzione di denominazione suggerita in Atoms/ :

• Risorse
• Bottoni
• Controlli di input
• immagini
• Navigazione
• Informazione

Non convertiremo gli stili di livello in simboli, quindi è sufficiente identificarli in base al loro gruppo semantico. Ancora una volta, usando Atoms /:

• riempie
• frontiere
• Ombre
• Gradienti

Simile agli stili di livello, ecco come possiamo creare stili di testo in Atomi /:

• Intestazioni
• Corpo
• Didascalia
• Etichette
• Collegamenti

Un linguaggio di progettazione unificato non dovrebbe essere solo un insieme di regole statiche e singoli atomi; dovrebbe essere un ecosistema in evoluzione.—Airbnb on Building a Visual Language.

Creazione di molecole

Gli atomi definiscono la parte fondamentale delle linee guida di progettazione di un prodotto, ma di per sé non sono del tutto utili. Per ricavare alcune funzionalità, uniamo gli atomi e creiamo molecole.

L'unione di un'etichetta (atomo) con un pulsante di input (atomo) per creare una funzione di ricerca è un buon esempio di elemento molecolare comunemente usato.

Un avvertimento perché qui può esserci un po' di area grigia. Un pulsante, a livello di codice , è considerato un atomo, ma un pulsante a livello di progettazione è considerato una molecola poiché stiamo raggruppando uno stile di livello e uno stile di testo. Per evitare qualsiasi confusione è una buona idea pensare solo agli elementi a livello di codice.

Le principali categorie che rientrano in Molecole/ sono:

• Informazione
• Navigazione
• Controlli di input

Poiché le molecole inizieranno a modellare i nostri prodotti in modo interattivo, è una buona idea definire ulteriormente le categorie di cui sopra. In questo caso, definiremo un insieme di sottocategorie che rappresenta una libreria di modelli:

• Elenchi a discesa
• Commuta
• cursori
• Schede
• Impaginazione
• Indicatori di progresso
• Campi data
• Campi di testo
• Caselle di controllo
• Tasti della radio
• Moduli

Creazione di organismi

Gli organismi sono gruppi di atomi e molecole. Possono anche far parte di altri organismi.

A differenza di atomi e molecole, gli organismi non hanno un'inclusione astratta nei prodotti che stiamo progettando; sono componenti concreti, riutilizzabili e facilmente identificabili con azioni specifiche. La loro struttura è più complessa di un atomo o di una molecola.

Se il campo di ricerca precedentemente definito è raggruppato con altri componenti, come una barra di navigazione (molecola) e un logo (atomo), viene creato un organismo. Un esempio è una barra di navigazione o un calendario.

Gli organismi, come le molecole, possono rientrare nelle stesse categorie e sottocategorie:

Ecco le categorie principali che creeremo per gli organismi/:

• Informazione
• Navigazione
• Controlli di input

Come per le molecole, creeremo anche sottocategorie per gli organismi:

• Elenchi a discesa
• Commuta
• cursori
• Schede
• Impaginazione
• Indicatori di progresso
• Campi data

Fino a questo punto, la maggior parte dell'interfaccia utente è già stata progettata, quindi ora è semplice come richiamare le istanze dei nostri componenti quando sono necessarie per la progettazione.

È facile individuare ciascuno di questi componenti in base ai loro gruppi semantici, sia cercandoli direttamente utilizzando il pannello di inserimento nella barra degli strumenti di Sketch, dove troveremo un insieme ben organizzato di 3 categorie principali, sia utilizzando un plug-in come Corridore per lo schizzo.

Runner for Sketch ottimizza il flusso di lavoro di un designer fornendo una serie di comandi da tastiera che possono utilizzare invece di trovare elementi in menu infiniti. Ad esempio, possono digitare la parola insert , premere il tasto Tab e cercare i componenti di cui hanno bisogno.

Digitando atomi , un elenco a discesa ci mostrerà tutti gli elementi che rientrano in quella categoria. Se atomi e molecole hanno categorie condivise, verranno visti solo gli atomi e tutte le molecole verranno ignorate.

Avvolgendolo

Sketch e Atomic Design sono un potente insieme di strumenti che possono essere utilizzati insieme per migliorare i flussi di lavoro di progettazione e facilitare un framework efficace del sistema di progettazione.

Utilizzando il concetto di atomi , molecole e organismi come base dei componenti, Atomic Design aiuta i designer a unirsi attorno a un linguaggio comune durante la creazione e la vita di un prodotto.

I progettisti possono utilizzare strumenti come Sketch per implementare Atomic Design fornendo un flusso di lavoro più efficiente e una serie di standard che sono adottati da tutti i membri del team di progettazione, compresi gli sviluppatori, durante le fasi finali del progetto.

Ulteriori letture sul blog di Toptal Design:

• Come costruire un framework di progettazione efficace
• Comprendere i sistemi e i modelli di progettazione
• Come creare una guida allo stile di schizzo, una libreria e un kit dell'interfaccia utente
• Perché le startup hanno bisogno di una guida di stile
• Zeplin Sketch Plugin: il ponte del flusso di lavoro tra design e ingegneria