Tutto quello che devi sapere sui sistemi di progettazione

Pubblicato: 2020-05-06

Il design sta diventando sempre più complesso. I moderni processi di progettazione richiedono una stretta collaborazione interfunzionale tra tutti i team coinvolti nella creazione del prodotto. Quando il time to market gioca un ruolo così essenziale nello sviluppo del prodotto, i team di progettazione si sforzano di ottimizzare il processo per creare prodotti velocemente ma senza sacrificare l'esperienza dell'utente.

Per far sì che ciò accada, i team di prodotto cambiano il modo in cui progettano i prodotti digitali: introducono sistemi di progettazione per rendere il processo di progettazione più trasparente e prevedibile.

In questo articolo, esploreremo il concetto di sistemi di progettazione e i passaggi chiave per la creazione di nuovi sistemi di progettazione.

Applica il tuo sistema di progettazione utilizzando lo stile del tema di Elementor

Che cos'è un sistema di progettazione?

Un sistema di progettazione è una raccolta di componenti riutilizzabili, guidata da pratiche chiare, che consente a un team di prodotto di creare un prodotto più velocemente. Pensa a un sistema di progettazione come a un'unica fonte di verità per i team di prodotto che consente loro di progettare e sviluppare prodotti.

Molti designer si trovano a chiedersi cosa dovrebbero includere nel loro Design System. Ogni organizzazione ha esigenze diverse ed è impossibile fornire un elenco universale di elementi che ogni sistema di progettazione dovrebbe utilizzare. Tuttavia, ci sono alcuni elementi che condividono molti sistemi di progettazione:

Componenti e modelli

I componenti sono elementi funzionali del design. Considerali come elementi costitutivi del tuo sistema di progettazione. Combinati, i componenti formano librerie a cui i designer fanno riferimento e utilizzano quando creano prodotti.

I modelli sono i protocolli che forniscono una forma di manuale di costruzione a cui i progettisti possono fare riferimento quando utilizzano i componenti.

Guide di stile

Le guide di stile sono prodotti che si concentrano sugli stili grafici (colori, caratteri, illustrazioni) e sul loro utilizzo. Le guide agli stili dovrebbero essere create tenendo conto dei valori del marchio (ad esempio, utilizzando i colori del marchio per elementi funzionali come i pulsanti di invito all'azione).

Principi di progettazione

I principi di progettazione sono le regole guida che aiutano i team a prendere decisioni di progettazione significative. I principi di progettazione riflettono le convinzioni condivise del team di progettazione.

Come costruire un sistema di progettazione in 10 passaggi

Passaggi:

  • 1. Analizza il tuo attuale processo di progettazione
  • 2. Identifica l'alfabeto del marchio
  • 3. Condurre un audit dell'interfaccia utente
  • 4. Definire i principi di progettazione
  • 5. Crea libreria componenti/modelli
  • 6. Definisci le regole
  • 7. Stabilire una strategia di governance
  • 8. Definisci la struttura degli elementi
  • 9. Assicurati che tutti i team utilizzino la lingua condivisa
  • 10. Comunicare i cambiamenti

1. Analizza il tuo attuale processo di progettazione

Per comprendere meglio il tipo di sistema di progettazione che si desidera implementare, è necessario iniziare esaminando e analizzando l'attuale approccio alla progettazione presso la propria azienda. Trova le risposte alle seguenti domande:

  • Qual è il processo di progettazione che segue la tua azienda?
  • Quali sono gli strumenti esistenti che utilizza la tua azienda?

Si consiglia inoltre di valutare il livello di maturità progettuale dei team di prodotto. Questa conoscenza ti aiuterà a stimare il tempo necessario per introdurre il sistema nella tua organizzazione.

2. Identifica l'alfabeto del marchio

Il linguaggio visivo che utilizzeranno i designer dovrebbe essere basato sull'alfabeto di un marchio. L'alfabeto include l'identità del marchio (valori del marchio e del prodotto) e il linguaggio del marchio (colori, caratteri, forme, animazioni, voce e tono). Definisci l'identità di un marchio, nonché il suo linguaggio, rivedendo le linee guida del marchio e intervistando le parti interessate, quindi fai riferimento a queste informazioni quando lavori sui principi di design e sulle guide di stile.

3. Condurre un audit dell'interfaccia utente

Uno dei problemi più pericolosi nella progettazione del prodotto è la duplicazione del design, che porta alla frammentazione e la frammentazione porta all'incoerenza. L'identificazione della duplicazione degli elementi di progettazione aiuta un team a evitare lo scenario in cui i membri del team creano un elemento da zero solo per scoprire che esiste già una versione simile.

Ecco perché classificare tutti i componenti visivi all'interno del prodotto dovrebbe essere il primo compito svolto dal team di progettazione prima di costruire un sistema di progettazione. Devi guardare le qualità visive dei tuoi elementi di design. Questa attività ha due obiettivi:

  1. Evidenziare le aree con le incongruenze più significative all'interno del prodotto.
  2. Identificare gli elementi e i componenti più importanti e più utilizzati del prodotto.

Un audit dell'interfaccia utente è un processo in più fasi. È essenziale identificare prima le proprietà principali dell'interfaccia utente come colori, caratteri, immagini e, solo dopo, analizzare come queste proprietà devono essere utilizzate nei componenti. Usa uno strumento come CSS Stats per vedere quanti colori unici, caratteri tipografici hai nei tuoi fogli di stile.

Google's background colors
Google.com ha 62 colori di sfondo unici.

Dopo aver ottenuto informazioni sullo stile, è possibile esplorare i componenti. La metodologia Atomic Design di Brad Frost ti aiuterà a scomporre ogni pagina web in singoli elementi (atomi, molecole e organismi).

Brad Frost’s Atomic Design methodology
La metodologia di progettazione atomica di Brad Frost

4. Definire i principi di progettazione

Comprendere le ragioni alla base delle decisioni di progettazione è fondamentale per creare un'esperienza utente eccezionale. Ecco perché, quando si tratta di stabilire i principi di progettazione di un sistema, è essenziale coordinare i team attorno a un chiaro insieme di obiettivi per mantenere coerenza ed equilibrio.

I principi di progettazione dovrebbero rispondere a tre domande fondamentali:

  • Quello che stiamo costruendo,
  • Perché lo stiamo costruendo
  • Come lo costruiremo?

È fondamentale che i principi di progettazione riflettano veramente i valori della tua organizzazione e siano con la visione generale.

5. Crea libreria componenti/modelli

Raccogli tutte le parti funzionali e decorative della tua interfaccia utente — campi di input, pulsanti, moduli, immagini, solo per citarne alcune — valutale in base alle esigenze del progetto (in base alle esigenze dell'utente/obiettivi aziendali) e lascia solo ciò di cui hai bisogno .

6. Definisci le regole

Uno degli obiettivi principali di un sistema di design è estendere la direzione creativa. Il sistema non dovrebbe bloccare i progettisti in una particolare direzione di progettazione. Invece, dovrebbe offrire a designer e sviluppatori un framework che offra abbastanza libertà per esplorare vari approcci prima di selezionarne uno da seguire.

Nel suo libro “Design Systems”, Alla Kholmatova definisce due tipi di regole:

  • Regole severe. I progettisti devono seguire un processo rigoroso per introdurre nuovi componenti e modelli nel sistema di progettazione.
  • Regole sciolte. Le regole allentate agiscono più come raccomandazioni, piuttosto che come vincoli rigidi. Designer e sviluppatori possono saltare le regole quando credono che senza le regole, possono creare un design migliore.

Trovando un equilibrio tra regole rigide e libere, troviamo un punto debole tra rigore e flessibilità.

7. Stabilire una strategia di governance

I sistemi di progettazione sono dinamici e in continua evoluzione. Ecco perché è fondamentale definire il processo di approvazione delle modifiche nel sistema di progettazione. Creare una chiara strategia di governance è essenziale per assicurarsi che il proprio sistema di progettazione possa adattarsi ai cambiamenti.

Nell'articolo, Modelli di squadra per ridimensionare un sistema di progettazione, Nathan Curtis definisce tre diversi modelli di governance:

1. Modello solitario: in questo modello, un "signore" (un individuo direttamente responsabile o un gruppo di individui) governa il sistema di progettazione.

the solitary model illustration
Nel modello solitario, il signore supremo mette a disposizione un sistema. Immagine: Nathan Curtis.

2. Modello centralizzato: in questo modello, un team è responsabile del sistema e ne guida l'evoluzione.

the centralized model illustration
Nel modello centralizzato, un team di progettazione centrale produce e supporta un sistema per altri team. Immagine: Nathan Curtis.

3. Modello federato: in questo modello, diverse persone di diversi team sono responsabili del sistema.

the federated model illustration
Nel modello federato, i progettisti di più team di prodotto lavorano insieme sul sistema. Immagine: Nathan Curtis.

Ciascuno dei modelli ha punti di forza e di debolezza, ma il modello solitario è il più fragile tra loro perché ha un rischio intrinseco: quando una persona è responsabile di così tanto, quella persona può rapidamente diventare un collo di bottiglia per il completamento di molti compiti.

In molti casi è possibile utilizzare una combinazione di modelli. Ad esempio, il modello del team Salesforce è una combinazione di modelli centralizzati e federati. Il Lightning Design System di Salesforce ha un team principale responsabile della gestione del sistema, ma ci sono anche collaboratori che agiscono come una federazione di professionisti.

8. Definisci la struttura degli elementi

Molti sistemi di progettazione soffrono della duplicazione di elementi funzionali: i membri del team creano componenti troppo focalizzati su un caso monouso. Di conseguenza, il sistema diventa inflessibile e i suoi utenti (progettisti e sviluppatori) devono creare nuovi componenti ogni volta che devono coprire un nuovo scenario.

Se analizziamo qualsiasi sistema di progettazione di successo come Material Design, notiamo che tali sistemi sono altamente riutilizzabili. L'elevata riutilizzabilità consente a designer e sviluppatori di utilizzare il Material Design come base per i loro prodotti.

Si consiglia di sviluppare componenti che non sono legati a un caso monouso ma possono essere riutilizzati in più contesti. Per essere riutilizzabili e scalabili, i componenti devono essere i seguenti:

  • Modulare. I componenti modulari sono autonomi: non hanno dipendenze. La modularità aiuta a creare componenti riutilizzabili e intercambiabili.
  • Componibile. È possibile creare nuovi componenti combinando componenti esistenti.
  • Personalizzabile. È possibile regolare ed estendere i componenti per farli funzionare in una varietà di contesti.

9. Assicurati che tutti i team utilizzino la lingua condivisa

Lo scopo fondamentale di un sistema di progettazione è facilitare il lavoro dei team, motivo per cui incoraggiare tutti a utilizzarlo è ancora più importante che costruirne uno. I sistemi di progettazione dovrebbero essere integrati nel flusso di lavoro dei team, diventare una parte fondamentale della produttività quotidiana di designer e sviluppatori e fornire valore ai membri del team.

Se hai appena iniziato a incorporare un sistema di progettazione nel processo di progettazione della tua organizzazione, conduci una serie di interviste per capire come le persone lo utilizzano e usa queste informazioni per adattare il tuo sistema di progettazione.

10. Comunicare i cambiamenti

Un sistema di progettazione non è una raccolta statica di artefatti; è un sottoprodotto della progettazione del prodotto che si evolve insieme all'organizzazione. Una volta che i team iniziano a utilizzare un sistema di progettazione, è fondamentale comunicare modifiche e aggiornamenti all'intera organizzazione. Invia aggiornamenti regolarmente e con un registro delle modifiche. Il registro dovrebbe indicare agli utenti quali modifiche sono state introdotte nella nuova versione e in che modo gli aggiornamenti influiranno sul loro lavoro.

Salesforce design system's what's new page
Lightning Design System di Salesforce ha una pagina integrata "Novità" che contiene informazioni sulle modifiche introdotte nel sistema di progettazione

Esempi di sistemi di progettazione

Ecco un paio di sistemi di design popolari.

Design dei materiali di Google

Material Design è un linguaggio di design sviluppato da Google nel 2014. L'idea di creare questo linguaggio di design era semplice: offrire a designer e sviluppatori uno strumento che consentisse loro di creare prodotti intuitivi e belli. Material Design è un sistema molto adattabile che può essere utilizzato per vari prodotti.

Material Design by Google

Lightning Design System di Salesforce

Lightning Design System consente ai team di prodotto di creare esperienze aziendali avanzate e applicazioni personalizzate con i modelli e stabilire le migliori pratiche native di Salesforce.

Lightning Design System by Salesforce

Conclusione

Un sistema di progettazione ben congegnato funge da stella polare per lo sviluppo del tuo prodotto. Diventa parte del DNA di un'organizzazione che aiuta i team di prodotto a produrre esperienze utente più coerenti e amplifica una cultura guidata dal design. I sistemi di progettazione incoraggiano le persone che lavorano sul prodotto a guardare oltre gli elementi costitutivi e a pensare allo scopo del loro design.

Con Elementor 3.0 puoi gestire facilmente i tuoi sistemi di progettazione da una pagina.