Come progettare un prodotto digitale

Al giorno d’oggi, i prodotti digitali devono essere in grado di esistere su qualsiasi dispositivo ed adattarsi a qualsiasi schermo. Ma come si progetta un interfaccia?

E quali sono i processi che permettono la realizzazione di un prodotto digitale? All’interno di questo articolo, parleremo di metodologia ma soprattutto di come

creare interfacce semplici, coerenti e scalabili.

Iniziamo subito!

Il metodo Atomic Design per progettare un prodotto digitale

Nella progettazione di una webapp, di un’app o più in generale di un prodotto digitale è fondamentale progettare tramite Atomic Design, che è un metodo, ideato da Brad Frost, basato sull’idea che esistano 5 fasi ben distinte di progettazione che lavorano insieme e danno vita a sistemi complessi. In sostanza danno vita ad un’interfaccia. 

Le fasi sono 5: atomi, molecole, organismi, template e pagine.

Atomi

Gli atomi rappresentano l’elemento più piccolo di un’interfaccia. Pensa a loro come a blocchi di lego o delle note musicali, sono degli elementi fondamentali per costruire qualcosa di più grande. Nel nostro caso parliamo di: caratteri, icone e colori.

Molecole

Le molecole invece sono gruppi di atomi che, legati insieme, formano elementi più complessi e distinti. A tutti gli effetti le molecole rappresentano la spina dorsale del nostro sistema di progettazione. Alcuni elementi distintivi sono: input, textifield e bottoni. 

Organismi

Con gli organismi iniziamo ad entrare nella sfera degli elementi complessi, sono tutti quegli elementi costituiti da molecole e atomi che solitamente definiscono le sezioni di un’interfaccia. Un esempio pratico può essere un menù oppure una form, cioè tutti quegli elementi che consentono all’utente di interagire con un layout generando un’esperienza.

Template

Arrivato a questo punto il meccanismo è chiaro. Il template è costituito da atomi, molecole e organismi che cuciti insieme danno vita ad un layout definito, o almeno abbastanza per identificare il design che si modella sotto i nostri occhi. Una delle caratteristiche principali del template è che si concentra sulla struttura generale della pagina andando a definire le gerarchie, le posizioni e tutti gli elementi che definiscono il layout.

Pagine

Le Pagine rappresentano la fase finale del processo di progettazione di un prodotto digitale. Arrivati a questo punto si inseriscono i testi, le immagini e tutti gli elementi reali. Oltre a rappresentare gli elementi con i quali gli utenti si interfacceranno, le pagine risultano fondamentali per testare e validare tutta la progettazione, anche quella dei livelli precedenti. L’interfaccia è funzionale? Se la risposta è no, parte un viaggio a ritroso tra atomi, molecole, organismi e template; è proprio in questa fase che tutto deve risultare equilibrato ed efficiente, altrimenti ci ritroveremo elementi che non possiamo usare.

Perché l’Atomic Design?

L’Atomic Design ci fornisce un metodo di progettazione chiaro e funzionale. Permette, contemporaneamente, di vedere le interfacce scomposte nei suoi atomi e anche di vedere come questi elementi si combinino tra di loro per formare nuovi componenti. Grazie a queste connessioni i designer hanno la possibilità di apportare modifiche ad una parte del sistema senza avere ripercussioni su tutto il resto e per questo motivo tutti i membri del team (e anche i clienti) sono in grado di apprezzare un’app o una webapp, perché mostra coerenza e scalabilità. 

Un altro vantaggio, in ambito sviluppo, è la possibilità di avere un codice più coerente. Utilizzando gli atomi per creare un layout, è facile accorgersi di quali componenti vengono utilizzati in diverse parti del sito, riducendo la probabilità di scrivere il codice due volte. In poche parole l’Atomic Design, è come un inventario, che consente la progettazione di un’app o di una piattaforma, mantenendo gli elementi coerenti e in alta qualità.

Il Design System

L’applicazione dell’Atomic Design dà vita al Design System, ovvero ad un catalogo di componenti (o meglio ancora di: atomi, molecole e organismi). Composto da regole e linee guida, il Design System crea continuità all’interno di un prodotto digitale, migliorando le performance e l’user experience. Tra le grandi digital company che hanno investito nella creazione del proprio Design System troviamo:

• Google
  Sviluppato da Google, il Material Design spicca per minimalismo, che ben si sposa con la necessità di integrare tante funzionalità mantenendo l’interfaccia accessibile. A livello pratico, Material Design è l’equivalente di un grande manuale di istruzioni che spiega ai progettisti come approcciare alla costruzione di un prodotto digitale. Se sei avvezzo ai servizi Google forse riconoscerai lo stile su YouTube o Gmail.

• Spotify
  Ancore è il Design System del servizio di musica Spotify. In questo caso, il Design System, nasce con l’esigenza di far coincidere il bisogno di coerenza visiva con la necessità di avere la stessa esperienza su piattaforme molto diverse tra loro, parliamo di auto, smartwatch, altoparlanti e persino frigoriferi intelligenti! Ancore ha la capacità di raccogliere più di 22 Design System, (ciascuno gestito da un team diverso all’interno dell’azienda), tutti connessi tra di loro sotto lo stesso ombrello.

• Airbnb
  L’obiettivo dell’azienda era quello di creare una navigazione comprensibile per gli utenti e un linguaggio universale. Il risultato è un set di componenti che costituiscono ciò che Airbnb definisce un organismo vivente, in costante evoluzione e altamente tecnologico.

• MailChimp
  Mailchimp, il celebre servizio di invio di newsletter e gestione campagne di marketing, ha creato il suo Design System in cui non sono i componenti il piatto forte, ma le linee guida per i contenuti e il tone of voice hanno contribuito al successo della piattaforma. Empatia e personalità sono le basi dell’emotional design, dettagli che emotivamente aiutano a “umanizzare” il prodotto e quindi a rinforzare il legame con l’utente.

Questa carrellata sugli esempi più famosi di Design System ci mostra quanto sia impattante un linguaggio condiviso e unificato per la riconoscibilità di un brand. Utilizzarlo garantisce anche il superamento delle complessità interne di coordinamento, migliorando l’allineamento tra i diversi attori coinvolti.

Quindi, cosa aspetti?