- Cos’\u00e8 il Design System?<\/a><\/li>
- I 3 benefici di un Design System<\/a><\/li>
- Design System:\u00a05 esempi di successo<\/a><\/li><\/ol><\/div><\/div><\/p>
I punti di contatto digitali<\/strong> tra brand e cliente continuano ad aumentare, rendendo sempre pi\u00f9 importante – e difficile – riuscire a mantenere coerenza e uniformit\u00e0 tra i diversi canali e la moltitudine di device<\/em>.
\nL\u2019utente moderno passa con estrema facilit\u00e0 da una pagina web su desktop ad un\u2019applicazione mobile, da uno smartphone ad una smart TV o da un tablet allo smartwatch. Questi passaggi repentini necessitano di una fruibilit\u00e0 elevata e di una massimizzazione dell’esperienza di navigazione.
\nIn caso contrario l’utente si troverebbe spiazzato non vivendo un’esperienza fluida. Una confusione simile\u00a0a quella di\u00a0John Travolta.<\/p>\nhttps:\/\/giphy.com\/gifs\/awkward-pulp-fiction-john-travolta-6uGhT1O4sxpi8<\/p>\n
Il Design System<\/strong> nasce – per l’appunto – per ottimizzare il flusso di creazione di una brand identity coerente<\/strong><\/a>, consistente e multi touchpoint. Vediamo di seguito nel dettaglio a cosa fa riferimento.<\/p>\n
Cos’\u00e8 il Design System?<\/h2>\n
\n
\u201cStyles come and go. Good design is a language, not a style.\u201d \u2013 Massimo Vignelli<\/p>\n<\/blockquote>\n
Il Design System \u00e8 un insieme di regole e linee guida<\/strong> che aiutano a mantenere coerenza e continuit\u00e0 all’interno\u00a0 di un ecosistema digitale, migliorando le performance<\/em> produttive e fornendo all\u2019utente una brand experience familiare e adattiva<\/strong> su tutte le piattaforme.<\/p>\n
https:\/\/giphy.com\/gifs\/animated-illustration-Fwgs7gq0LY9X2<\/p>\n
Generalmente, il Design System \u00e8 composto da:<\/p>\n
- \n
- una serie di linee guida<\/strong> che definiscono sia i comportamenti d\u2019utilizzo, sia la brand experience (personalit\u00e0, stile del brand, tone of voice ecc\u2026),<\/li>\n
- una libreria di componenti visuali<\/strong>, costruita seguendo il principio dell\u2019Atomic Design,\u00a0<\/em>ossia partendo dagli elementi pi\u00f9 piccoli di design – come i bottoni – per arrivare a costruire intere strutture di layout.
\nQuesta libreria non \u00e8 da confondere con delle semplici style guide<\/em> o librerie di pattern, ma \u00e8 un mix di questi strumenti unito ad un toolkit<\/em> gi\u00e0 pronto per gli sviluppatori. L’utilizzo coerente di queste componenti \u00e8 garantito da\u00a0un importante flusso di condivisione e regole di utilizzo.<\/li>\n<\/ul>\n\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2018\/09\/intesys-design-system.png\")
<\/p>\n<\/blockquote>\nI 3 benefici di un Design System<\/h2>\n
- \n
- Aumentare la coerenza e la consistenza del brand<\/strong>
\nPer aumentare la familiarit\u00e0 e la fiducia in un brand \u00e8 fondamentale che l\u2019utente riconosca immediatamente il prodotto o il servizio in qualsiasi piattaforma acceda. Ci\u00f2 \u00e8 possibile anche in assenza del logo grazie ad una forte personalit\u00e0 del brand nei suoi elementi grafici come colori, font, tone of voice etc.<\/li>\n- Maggiore chiarezza e semplicit\u00e0 per l\u2019utente<\/strong>
\nUtilizzare pattern<\/em> comuni di navigazione, sincronizzati in tutta la Digital Brand Experience<\/a>, facilita l\u2019utente a orientarsi e a familiarizzare pi\u00f9 velocemente con il sito o l\u2019applicazione, anche nel caso di passaggio tra diversi device<\/em>.<\/li>\n- Miglior efficenza e condivisione con gli stakeholder<\/strong>
\nLavorare su un set di pattern<\/em> condivisi aiuta l\u2019allineamento dei collaboratori e il focus degli attori coinvolti nel progetto. Inoltre, avere un repository<\/em> di componenti da poter riutilizzare aumenta l\u2019efficienza, evitando di perdere tempo per continue elaborazioni grafiche e guadagnando spazio per lo sviluppo di nuovi progetti sul brand.<\/li>\n<\/ol>\n[nectar_btn size=\"large\" open_new_tab=\"true\" button_style=\"regular\" button_color_2=\"Accent-Color\" color_override=\"#0f33ce\" solid_text_color_override=\"#ffffff\" icon_family=\"none\" button_id=\"\" text=\"Dai valore al tuo brand con l'experience design\" margin_top=\"30\" url=\"https:\/\/www.intesys.it\/design\/brand-experience\/?utm_source=journal&utm_medium=articolo&utm_campaign=design%20system\"]\n
Design System:\u00a05 esempi di successo<\/h2>\n
1. Material Design: il Design System aperto a tutti<\/em><\/strong>
\nL\u2019esempio pi\u00f9 utilizzato di Design System \u00e8 il Material Design<\/em>. Salito alle luci della ribalta perch\u00e9 sviluppato da Google, esso \u00e8 un linguaggio visivo che ben sintetizza i principi di un buon design<\/strong>, uniti a principi fisici<\/strong> e di movimento<\/strong>.<\/p>\nUn design democratico<\/strong>, aperto a tutti e per tutti, la cui principale e peculiare caratteristica si basa sulla quasi impossibilit\u00e0, anche per chi non \u00e8 designer<\/em>, di creare un design \u201cbrutto\u201d oppure semplicemente scorretto.<\/p>\n
Nel 2018 Google aggiorna il suo Design System con il tool Material Theming<\/a>, ampliando il parco di componenti e transizioni e -soprattutto – aumentando il grado di personalizzazione degli stessi, rispondendo cos\u00ec alle critiche di eccessiva uniformit\u00e0 visiva delle app o dei siti web che utilizzano il Material Design.<\/p>\n
\n - Maggiore chiarezza e semplicit\u00e0 per l\u2019utente<\/strong>
- una libreria di componenti visuali<\/strong>, costruita seguendo il principio dell\u2019Atomic Design,\u00a0<\/em>ossia partendo dagli elementi pi\u00f9 piccoli di design – come i bottoni – per arrivare a costruire intere strutture di layout.
- I 3 benefici di un Design System<\/a><\/li>