Il nostro team, attraverso l’approccio user-first, pone al centro il concetto di valore per l’utente, e promuove un approccio al Design collaborativo, efficiente e data driven
Progettare servizi digitali che migliorano la qualità della vita del cittadino.
Fornire al cittadino tutte e solo le informazioni e i servizi di cui ha bisogno per la propria protezione sociale, tramite una presenza digitale semplice, accessibile e costantemente ottimizzata sulla base delle sue esigenze.
- PERSONE AL CENTRO
- COLLABORAZIONE E DIVERSITÀ
- VALORE DEL RIUTILIZZO
- VALORE DELLA CONDIVISIONE
- COERENZA E STANDARDIZZAZIONE
- MISURAZIONE DELL'IMPATTO PER I CITTADINI
- MIGLIORAMENTO CONTINUO
- RICERCA DELLE EVIDENZE OGGETTIVE
👋 Ciao sono Sirio. Sono il linguaggio visivo e di interazione dell'Istituto! Progettare per il Cittadino con me da oggi è più semplice.
- 👨💼👩🏻💼👩🏽🔧🧑🏼🏫 Semplificare e migliorare l’esperienza degli utenti
- 🚁 Comunicare il brand in modo univoco
- 🎢 Semplificare ed efficientare la realizzazione e l’evoluzione dei prodotti digitali
- 👨👨👦👦 Rafforzare la collaborazione interna e la standardizzazione dei flussi operativi
🔗 inps.design/sirio-design-system
................................................................................................................................................................................
I Design Token sono tutti i valori utili a costruire un sistema di progettazione. Definiti come gettoni poichè rispecchiano in maniera atomica tutti gli attributi estetici che costituiscono i componenti del Design system. Sono espressi in valori e fanno riferimento a: colori, tipografia, spaziature, animazioni e qualsiasi altro attributo di stile definito in fase di design.
🔗 inps.design/sirio-design-token
I token globali costituiscono tutti quei valori che sono “assoluti”, non dipendenti da nessun altro valore e da cui possono essere definiti token figli. Sono i valori primitivi e da questi vengono declinati i token alias. In genere si definiscono globali gli attributi primari come: colore, tipografia e valori delle animazioni.
- Definiamo i token globali per costituire le radici da cui verranno discenderanno i token alias e i token specifici di componente
🟡 primary-000 { attributo } - { valore numerico in ordine crescente }
................................................................................................................................................................................
I token alias costituiscono tutti quei token che discendono dai token globali e che hanno una specifica responsabilità. Possono far riferimento ad uno specifico contesto o azione. Sono utili per comunicare lo scopo del token e quindi rendere chiaro il contesto di utilizzo.
- Definiamo i token alias per fornire informazioni relative al contesto di utilizzo di ciascun token, specifichiamo il loro scopo e cerchiamo di renderli “riutilizzabili” in più casi d’uso.
🟣 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }
................................................................................................................................................................................
I token specifici del componente costituiscono i token che rappresentano proprietà associate ad un componente. Anche se hanno lo stesso valore di un token alias il loro scopo è differente: ossia raccontare e definire una specifica proprietà di un componente. Spesso sono declinati da un token alias ma non sempre questa regola deve/può essere applicata. Nel nostro caso eviteremo dove possibile di innestare i token oltre il secondo livello di innesto.
- Definiamo i token specifici di componente con l’obiettivo di fornire un’informazione relativa alle proprietà associate ad un elemento.
🔵 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }
Puoi 🔗 scaricare questo pacchetto o clonarlo tramite il terminale. Abbiamo trasformato i nostri token tramite la libreria 🔗 Amazon style dictionary.
Puoi 🔗 scaricare Figma da questo link.
Puoi 🔗 scaricare il plugin da questo link.