Il Design Process per la progettazione di siti web

Sviluppa un metodo di progettazione efficace con l’atomic design

creativecode avatar Giulio Tiseo

15 Mag, 2020

~8min.

Sviluppare un design process solido ed efficace ti aiuterà nella progettazione di siti web professionali. Se sei alle prime armi con la progettazione di siti web, potresti trovare delle difficoltà nell'individuare i punti di riferimento utili ad iniziare un progetto e portarlo avanti. Il metodo che adotterò in questa guida si baserà sui principi dell'Atomic Design. Con questo metodo potrai delineare un tuo design process personale, che ti permetterà di ottenere risultati significativi su tutti i tipi di progetti.

Il Design Process per la progettazione di siti web

Negli articoli precedenti hai avuto modo di prendere confidenza con gli strumenti base di Figma. Ora è giunto il momento di entrare nel vivo della progettazione andando a realizzare i primi design.

Prima di cominciare mi prendo un po’ di tempo per spiegarti nel dettaglio il design process che seguiremo.

Quando parliamo di Design Process facciamo riferimento alla tecnica di scomposizione di un progetto, utile a costruire un prodotto seguendo una serie di procedure ben definite.

Con un buon design process, infatti, sarai in grado di raggiungere risultati soddisfacenti senza uscir matto e tentando soluzioni alla cieca. Come ti ho già spiegato in questo articolo, avere un metodo di progettazione solido è di fondamentale importanza se vuoi diventare un web designer produttivo.

Quindi, cosa dobbiamo fare? Bhè, prima di tutto…

# Sviluppare il proprio design process partendo dall’Atomic Design

Se non hai ancora maturato esperienza con il web design e non sai davvero da dove cominciare, ti mostrerò un metodo di progettazione molto efficace. Questo metodo è stato elaborato da un famoso web designer di nome Brad Frost all’inizio del 2013: l’Atomic Design. Posso assicurarti che questo approccio ha rivoluzionato qualche anno fa il mio design process e mi ha reso consapevole delle fasi da svolgere per riuscire ad ottenere siti web professionali.  

L’Atomic design è un metodo di progettazione molto efficace che si articola in 5 step. Al termine della progettazione, avrai ottenuto un sistema di interfacce strutturato in modo gerarchico e modulare. Il nostro obiettivo è quello di realizzare il design di un sito web che sia in grado di attrarre il giusto target e dare modo agli utenti di raggiungere facilmente le informazioni che stanno cercando.

Per realizzare un prodotto di questo tipo, un designer deve essere in grado di trasmettere nei propri progetti dei modelli concettuali che possano richiamare nella mente dei visitatori, i giusti modelli mentali.

Modelli mentali, modelli concettuali… ma di che diavolo sto parlando? Se è la prima volta che ne senti parlare questa terminologia potrebbe allarmarti, ma non ti devi preoccupare. È molto più semplice di quello che sembra.

# Cosa si intende per modello mentale e modello concettuale nel design?

In senso generico, un modello mentale rappresenta il processo di pensieri che elabora una persona per comprendere il funzionamento di qualcosa o del mondo circostante.

Riusciamo a capire se un designer ha fatto un buon lavoro se il prodotto che abbiamo davanti ai nostri occhi risulta comodo e semplice da utilizzare. Tale semplicità non è un risultato che si ottiene casualmente, ma è un processo che si basa su una serie di fattori che accomunano le persone sulla base delle esperienze, delle conoscenze, della storia di ognuno di noi, ecc.

Il modello mentale

Nell’ambito dell’UI Design, un modello mentale si riferisce alla rappresentazione di qualcosa che l’utente ha in mente. Gli esseri umani creano modelli mentali molto rapidamente e sono in grado di farsi un’idea del funzionamento di qualcosa, ancor prima che questa finisca fra loro mani. 

Immagina ad esempio di aver deciso di acquistare un nuovo smartphone, cosa fai una volta aperta la scatola? Afferri il device e premi il tasto di accensione (incredibile ma vero, sai già dove trovarlo!). Una volta caricato il sistema, chiunque abbia avuto uno smartphone prima, inizierebbe a navigare fra le pagine facendo swipe sul display. Se ti è capitato di fare esattamente queste cose, vuol dire che hai un modello mentale che ti permette di conoscere già il funzionamento del device e della sua interfaccia, anche se lo hai appena comprato.

I modelli mentali ci permettono di organizzare nel nostro cervello le nuove informazioni che assimiliamo e sono molto utili in quanto ci consentono di richiamare tali informazioni quando abbiamo bisogno di capire il funzionamento di oggetti, software, ecc.

Gli utenti si affidano ai propri modelli mentali per riuscire a prevedere (spesso inconsapevolmente) il funzionamento di un sistema una volta eseguita una determinata azione.

Ti è mai capitato di fare un acquisto online? Non deve essere stato troppo difficile, vero?

Se sei in grado di comprare un prodotto su Amazon è molto probabile che tu sia in grado di acquistare qualsiasi cosa su una buona parte degli e-commerce in rete.

Questa facilità di utilizzo non è dovuta semplicemente alla tua esperienza pregressa con gli acquisti online, ma è soprattutto merito dei designer che hanno realizzato l’interfaccia basandosi sui giusti modelli concettuali.

Il modello concettuale

Il modello concettuale è il modello che l’utente interpreta o percepisce dal design dell’interfaccia. In poche parole, il modello concettuale è il principio su cui si basa il design di un’interfaccia, per trasmettere all’utente un determinato modello mentale.

Perciò, se il modello concettuale di un prodotto non corrisponde al modello mentale dell’utente, è molto probabile che risulterà complicato e poco intuitivo.

# Migliorare il design process progettando sistemi.

L’Atomic Design è il metodo progettuale che utilizzeremo in questa guida e che in generale ci permette di creare design di sistemi.

Un attimo…

# Cosa si intende per Design di sistemi?

Man mano che il web design continua ad evolversi e le figure professionali che intervengono sui prodotti web sono sempre più specializzate, si sta facendo largo l’idea che alla base di un progetto occorra iniziare a sviluppare design di sistemi e non più di semplici pagine web.

L’ideale per un front-end developer o un web designer che si relaziona con un team di sviluppatori, è trovare il modo di progettare le interfacce secondo un pattern comprensibile a tutte le professionalità messe in campo.

I prodotti per il web tirano in ballo un mucchio di competenze che non sempre è facile sincronizzare, senza considerare la difficoltà di comunicazione che spesso si ha nel trasmettere determinati concetti ad un cliente che ha un bagaglio diverso di conoscenze.

I modelli mentali ci aiutano anche in questo senso. Essi ci permettono di sfruttare un linguaggio comune e di focalizzare l’attenzione sulle aree più importanti del prodotto: usabilità, performance, visibilità, accessibilità.

Brad Frost ha elaborato l’atomic design per permette a designer, developer, ecc. di comunicare in modo efficiente ed ottenere risultati rilevanti, sfruttando le capacità di ciascuna figura professionale.

Questo metodo nasce da una riflessione molto profonda che Brad Frost ha elaborato mettendo a confronto il mondo della progettazione per il web con la chimica.

Dunque, sappiamo che la materia è composta da atomi che messi insieme formano molecole, che a loro volta creano organismi via via più complessi dando vita all’intero universo. Alla base dell’atomic design c’è il principio secondo cui occorre partire dalla progettazione dagli elementi più piccoli prima di arrivare alle forme complesse. Gli elementi più piccoli sono quelli che non è possibile scomporre in nessun modo, come gli atomi. Da questi elementi sarà possibile ricavare sistemi composti andando a legare gli atomi fra loro.

# Un design process solido per la progettazione di siti web

Come ti dicevo all’inizio, l’atomic design è un metodo strutturato in cinque livelli:

  • Atomi
  • Molecole
  • Organismi
  • Templates
  • Pagine
Leggi il capitolo sulle metodologie relative all’atomic design

1. Iniziare il progetto dagli elementi fondamentali: gli atomi

Applicando il concetto di atomo al mondo del web design è possibile riconoscere come elementi fondamentali e non scomponibili i seguenti elementi HTML: label, input e button. A questi vanno ad aggiungersi aspetti più astratti e vicini al mondo del design puro come la scelta della palette di colori, la tipografia, le animazioni e le icone.

Nel mio design process inizierò la progettazione dagli aspetti più astratti, andando via via a concretizzare ipotesi e idee in veri e propri elementi, quali ad esempio bottoni e input. Per cui, una volta fatta la dovuta ricerca sul progetto che andrò a sviluppare, inizierò a scegliere la palette di colori e i font, per poi passare al resto.

Tutti gli elementi compresi nella categoria degli atomi presi singolarmente non avrebbero alcun significato se non fossero inseriti nel contesto di un design più complesso (come vedremo fra poco). Tuttavia rappresentano dei riferimenti fondamentali che andranno a popolare la libreria di modelli che realizzeremo in Figma e fungeranno da base per strutture complesse e funzionali.

Primo step del design process: gli atomi
Gli atomi rappresentano la parte più piccola del nostro design e comprendono: la palette di colori, la tipografia, le icone, i bottoni, gli input e le label.

2. Progettazione degli elementi funzionali: le molecole

In genere rappresentano gli elementi di un’interfaccia, composti da due o più “atomi”. Con le molecole abbiamo modo di progettare gli elementi più complessi. Al contrario degli atomi che non hanno alcuna funzione specifica se presi singolarmente, le molecole danno forma alle azioni che svolgeranno gli utenti sul sito. Immagina ad esempio di dover realizzare un semplice form di ricerca. Per farlo andremo a mettere insieme tre atomi: l’input, la label e il bottone.

Design process (step 2): le molecole
Un form di ricerca non è altro che una molecola formata da una label, un input e un bottone con un’icona. Tutti questi elementi rispettano una libreria di stili registrati nella libreria.

3. Progettare gli elementi complessi: gli organismi

Con gli organismi iniziamo ad avere un’idea molto più chiara di quelli che saranno gli elementi dell’interfaccia che vedremo nel risultato finale.

Una collezione di molecole può essere combinata in un determinato modo per dare luogo a quelli che vengono definiti “organismi”. Gli organismi sono gruppi di molecole messe insieme che formano delle sezioni relativamente complesse di un’interfaccia.

Un classico esempio di organismo può essere la header section di un sito web, che riunisce diversi componenti come il logo, il menu di navigazione, il form di ricerca e le social icons. Oppure l’elenco di card che mostra gli ultimi articoli del blog, in cui sono rappresentate una serie di molecole formate da: titolo, testo introduttivo e bottone per la navigazione.

Costruire gli organismi partendo dalle molecole ci dà il vantaggio di realizzare componenti autonomi e riutilizzabili in diverse aree del progetto o addirittura in progetti diversi.

Terza fase del design process: realizzazione delle le molecole
Il componente Header di un sito web è un perfetto esempio di organismo, perché lega una serie di molecole definendo sezioni precise della pagina

4. La realizzazione del template

Giunti alla fase dei template, raggiungiamo il livello di progettazione che può iniziare ad essere compreso dai clienti o dai non addetti ai lavori. I template rappresentano l’elemento primitivo più vicino alla composizione finale. I template sono costruiti raggruppando due o più organismi che hanno senso di coesistere nel contesto di una pagina.

Step 4 Design process: realizzare il template
Esempio di una bozza di template

5. La presentazione delle pagine

Le pagine sono istanze dei template, popolate con un contenuto che visivamente può esprimere una rappresentazione fedele del prodotto finale. Nelle pagine, tutti i placeholder delle nostre card verranno personalizzate con contenuti reali o vicini al reale. Le pagine forniscono al cliente la rappresentazione più accurata di ciò che l’utente alla fine vedrà nel prodotto finale.

# Posso affidarmi all’atomic design anche se sono alle prime armi?

Devi. I design process che si basano su questo metodo sono quelli più naturali e vicini al nostro modo di pensare le cose. Proprio per questo motivo ho scelto di applicarlo in questa serie di articoli. Naturalmente non devi necessariamente prendere alla lettera ogni step, sei libero di fare tuo il design process andando ad apportare modifiche alle singole fasi.

In ogni caso, l’atomic design rappresenta una linea guida importante, soprattutto per chi è alle prime armi con la progettazione.

Vedrai crescere il progetto a poco a poco, partendo dal singolo elemento, fino ad arrivare al risultato finale. Non pensare che il metodo sia inflessibile, anzi… tutto ciò che realizzerai sarà soggetto a variazioni e miglioramenti nel corso del tempo. Il vantaggio di utilizzare questo approccio è che non rischierai di incorrere in modifiche che ti costringeranno a ricominciare.

Grazie all’atomic design hai modo di passare dall’astratto al concreto, realizzando sistemi coerenti e soprattutto scalabili. Quindi non ci tufferemo a capofitto nella progettazione della pagina web, ma andremo a creare gli elementi di base per poi assemblarli gradualmente in strutture complesse e funzionali.

Naturalmente nei prossimi articoli affronteremo anche aspetti più tecnici legati a Figma e agli strumenti più avanzati del programma. Bene, se sei arrivato fin qui ed è tutto chiaro, è giunta l’ora di tornare su Figma.