Un'introduzione a Atomic Design per i web designer

Gli atomi non sono semplicemente gli elementi HTML ma anche i loro stili di appartenenza: caratteri, colori, dimensioni e altre regole di stile CSS. Con le stesse parole di Brad, gli atomi “dimostrare tutti i tuoi stili di base a colpo d'occhio”.

Atomi - Esempio

Ecco un esempio dal nostro sito Web. I titoli dei post consigliati possono essere considerati un tipo di atomo; usano il stesso codice HTML e CSS e può essere facilmente distinto dal resto del contenuto.

Si noti che Hongkiat.com non è stato progettato pensando al design atomico, qui viene usato solo a scopo dimostrativo.

L'essenza del design atomico è progetta l'interfaccia utente dal basso verso l'alto usando questi cinque livelli, non identificare i componenti di progettazione atomica in seguito.

2. Molecole

UN molecola è formato da un gruppo di atomi. Le molecole costituiscono lo stadio successivo della gerarchia di progettazione atomica. Pensa agli elementi dell'interfaccia utente più semplici che sono già fatto di più di un elemento HTML, come un modulo di ricerca o un post consigliato nella barra laterale.

Essere organizzati in una molecola dà uno scopo a ciascun atomo. In un gruppo più grande (molecola), gli atomi devono supporto e complemento l'un l'altro, devono lavorare bene insieme per creare un design utilizzabile.

Ad esempio, il titolo (un atomo) deve ottenere più enfasi (caratteri più grandi, più peso, ecc.) rispetto al nome dell'autore (un altro atomo) nel blocco post consigliato. In questo modo, i due atomi sono “significava” a lavorare come una squadra per ottenere il miglior risultato.

Molecole - Esempio

Usando il nostro esempio precedente, puoi vedere che nella barra laterale di Hongkiat, un blocco di post raccomandato potrebbe essere visto come una molecola. Una molecola post consigliata è composto da tre atomi: una miniatura, un titolo e un atomo del nome dell'autore.

3. Organismi

Gli organismi sono composti da a gruppo di molecole, atomi (e qualche volta altri organismi). Nel web design, gli organismi sono componenti dell'interfaccia utente più complessi quello rappresenta sezioni definitive della pagina, ad esempio un'intestazione, un piè di pagina o una barra laterale.

Gli organismi possono essere costituiti da diversi tipi di molecole, ad esempio una barra laterale può essere costituita da una barra di ricerca e un diverso tipo di widget o di la stessa molecola ripetuta più volte, per esempio una manciata di blocchi di post correlati sotto l'altro. E, può essere la combinazione di questi due.

Organismi - Esempio

Sul sito web di Hongkiat, la barra laterale potrebbe essere un organismo. È composto da a barra di ricerca (un tipo di molecola, visualizzata solo una volta) e diversi messaggi consigliati (un altro tipo di molecola, visualizzato molte volte).

Tuttavia, l'organismo della barra laterale può anche essere visto come la composizione di a molecola (la barra di ricerca) e un altro organismo (il widget di post consigliato con diversi post consigliati). Il design atomico è un modello flessibile, le regole non sono molto rigide, quindi in questo caso possiamo definire lo stesso blocco sia come molecola che come organismo.

4. Modelli

Lo stadio successivo nella gerarchia del design atomico lo sono modelli. Come puoi vedere, questo è quando il design atomico smette di usare l'analogia chimica. Brad si astiene dalla terminologia a questo punto come pensa sia meno comprensibile per clienti e altri stakeholder, ed essenzialmente sono le ultime due fasi (modelli e pagine) che i designer devono vendere.

Modelli sono costituiti da organismi. Loro sono oggetti a livello di pagina ma senza il contenuto finale. Lo scopo dei modelli è rappresentare la struttura del contenuto sottostante.

I modelli mostrano come diversi atomi, molecole, organismi “funzionano insieme nel contesto di un layout”. Rappresentano fondamentalmente il scheletro di una pagina.

Modelli - Esempio

Per un esempio, pensa a a modello di home page con immagini segnaposto e blocchi di testo di lorem ipsum.

Di seguito, puoi vedere un esempio dal libro di Atomic Design. È il modello di pagina iniziale della rivista TimeInc. Atomi, molecole e organismi sono tutti al loro posto ma solo con contenuto schematico.

5. Pagine

pagine rappresentano l'ultimo stadio della gerarchia del design atomico. Le pagine sono le “istanze specifiche di modelli”. Nella fase della pagina, i modelli ottengono popolato con contenuti reali (copia, microcopia, immagini, video, ecc.), proprio come appariranno nell'interfaccia utente reale.

Le pagine consentono ai designer di vedere come esperienza utente finale sembrerà, a prova il design con utenti reali e a misurare quanto bene si comporta in termini di usabilità, conversione, accessibilità e altre metriche.

Pagine e varianti del modello

L'altro obiettivo della pagina è di fare variazioni del modello possibile. Parliamo di variazioni dei modelli quando il sottostante il modello è lo stesso ma il popolamento il contenuto è (leggermente) diverso. Ad esempio, se desideri mostrare contenuti diversi a gruppi di utenti diversi (ad es. Per i visitatori rispetto agli utenti che hanno effettuato l'accesso) o quando un titolo è molto più lungo degli altri.

Usare le varianti dei modelli è fondamentale se vogliamo creare coerente e resiliente interfacce utente. Componenti minori (atomi, molecole, organismi) devono funziona bene in diversi scenari.

Ad esempio, un pulsante deve apparire cliccabile con qualunque cosa intorno gli elementi circostanti. Se non sembra fattibile in una certa variazione, è necessario riprogettare l'atomo pulsante fino a quando non lo è si adatta a tutti i casi d'uso.

Pagine - Esempio

Di seguito, è possibile vedere la fase della pagina del modello di home page TimeInc precedente. Sembra diverso, eh? Questo è solo una variante di modello, anche se. Per avere un'interfaccia utente efficace, il team di progettazione deve riflettere attentamente cosa può cambiare nel sito reale. Quindi, devono anche testare il design per quella variante di modello (pagina).