{"id":11809,"date":"2025-05-21T11:57:07","date_gmt":"2025-05-21T09:57:07","guid":{"rendered":"https:\/\/www.lucacassara.it\/ux\/?p=11809"},"modified":"2025-05-21T12:18:03","modified_gmt":"2025-05-21T10:18:03","slug":"cose-un-design-system-e-perche-dovresti-davvero-iniziare-ad-usarlo","status":"publish","type":"post","link":"https:\/\/www.lucacassara.it\/ux\/?p=11809","title":{"rendered":"Cos’\u00e8 un Design System (e perch\u00e9 dovresti davvero iniziare ad usarlo)"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ti sei mai trovato a ridisegnare lo stesso bottone per la quinta volta? O a dover allineare un’interfaccia incoerente fatta da tre team diversi? Se hai risposto “s\u00ec”, probabilmente \u00e8 il momento giusto per parlare di Design System.<\/strong><\/p>

Un Design System non \u00e8 solo una libreria di componenti o un documento pieno di specifiche: \u00e8 una vera e propria infrastruttura del design, fatta di regole, pattern, componenti e linee guida condivise. \u00c8 ci\u00f2 che tiene insieme coerenza visiva, accessibilit\u00e0, scalabilit\u00e0 e velocit\u00e0 di sviluppo.<\/p>

Perch\u00e9 \u00e8 importante?<\/strong>
Per un UX\/UI Designer
\ud83d\udd01 Coerenza visiva: ogni componente \u00e8 progettato una volta sola, ma pu\u00f2 essere riutilizzato ovunque.
\u26a1 Velocit\u00e0 nei progetti: meno tempo su dettagli ripetitivi, pi\u00f9 focus su problemi reali dell\u2019utente.
\ud83e\udde0 Decisioni documentate: ogni scelta (tipografia, spaziatura, colori) ha un perch\u00e9 e pu\u00f2 essere spiegata chiaramente a stakeholder o dev.
\ud83e\udd1d Migliore collaborazione cross-team: parliamo tutti la stessa lingua.<\/p>

Per un\u2019Azienda
\ud83d\udcc8 Riduce i costi: meno refusi, meno ore di revisione, meno bug visivi.
\ud83d\ude80 Accelera il go-to-market: componenti pronti, gi\u00e0 validati, accessibili e testati.
\ud83d\udd04 Facilita l\u2019evoluzione del prodotto: ogni nuova feature parte da una base solida e coerente.

<\/p>

Il Design System di TimeAct (una piccolissima anteprima ;))
<\/strong><\/h5>

Nel progetto di restyle per TimeAct in collaborazione con eNetworks, ho progettato un Design System modulare e scalabile, capace di supportare un\u2019app multipiattaforma con diverse esigenze funzionali.
Ecco uno sguardo ad alcune delle foundations che ne costituiscono la base:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\n\t\t
\n\t\t\t
\n\t\t

Colori<\/span><\/strong>
I colori sono organizzati in primari, secondari, neutri, accento e feedback (errore, warning, successo). Una struttura solida che garantisce accessibilit\u00e0 e flessibilit\u00e0 in tutti i contesti d’uso.<\/p>

\"\"<\/a><\/p><\/div>\n\n\t\t\n\t\t

Tipografia<\/span><\/strong>
Ho definito una gerarchia chiara e leggibile, usando la font Montserrat, adattata per titoli, paragrafi e microtesti. Il tutto pensato per la leggibilit\u00e0 su desktop e mobile.<\/p>

\"\"<\/a><\/p><\/div>\n\n\t\t\n\t\t

Layout Tokens<\/span><\/strong>
Spaziatura, radius, stroke e ombre: tutto \u00e8 standardizzato con valori scalari. Questo ha reso facilissima la vita ai dev, e ha garantito uniformit\u00e0 su tutta l’interfaccia.<\/p>

\"\"<\/a><\/p><\/div>\n\n\t\t\n\t\t

Input form<\/span><\/strong>
Text field, textarea, dropdown, date e time picker. Ogni elemento \u00e8 documentato, validato e facilmente integrabile in form complessi.<\/p>

\"\"<\/a><\/p><\/div>\n\n\t\t<\/div>\n\t\t<\/div>\n\t\t

\n\t\t\t\t\t\t