3.1. File della Libreria dei componenti UI¶
Per il modello è stata creata una libreria di componenti standardizzati che definisce il punto centralizzato dal quale recuperare gli elementi che andranno a comporre l’interfaccia del sito.
I vantaggi di utilizzare una libreria di componenti sono:
una maggiore applicabilità a livello di implementazione, riducendo tempi di sviluppo e frequenza di modifica degli stili e al contempo garantendo una maggiore consistenza in termini sia visivi che di esperienza tra i siti;
un’esperienza d’uso più coerente per i cittadini, garantendo maggiore orientamento e trovabilità dei contenuti anche nel passaggio tra diversi siti ASL.
All’interno del file Figma è possibile trovare tutte le informazioni di implementazione, di utilizzo e di comportamento a livello di interazione.
Vai alla libreria dei componenti UI
3.1.1. Fondamenti (Foundations)¶
I fondamenti di UI sono gli elementi che definiscono le caratteristiche dei componenti dell’interfaccia utente.
La base dei fondamenti del modello ASL è stata generata a partire dallo UI Kit Italia al quale sono stati integrati alcuni elementi aggiuntivi caratterizzanti del modello.
I fondamenti definiscono le linee guida per l’utilizzo di:
nomenclature (naming);
griglie e spaziature (spacing);
colori e tokens.
3.1.2. Componenti (Components)¶
I componenti definiscono i mattoni riutilizzabili del kit. Ciascun componente è stato progettato per incontrare bisogni specifici degli utenti e, nel loro insieme, definiscono i modelli di interazione.
I componenti sono divisi in:
Components: ossia tutti i singoli componenti del Kit;
Sections: ossia organismi di componenti che si ripetono all’interno di determinate pagine o sezioni del sito.
3.1.3. Layout di pagina (Page layouts)¶
I layout di pagina invece definiscono i template che, attraverso l’insieme di componenti specifici, articolano la struttura delle pagine e del contenuto al loro interno.
I layout di pagina disponibili sono:
Homepage;
Pagine lista;
Pagine foglia;
Pagine aggregatorici;
Ricerca.
3.1.4. Personalizzazione dell’interfaccia¶
Aggiungi il logo dell’ASL, scegli la giusta tipologia di header e imposta i colori primari e secondari.
La guida alla personalizzazione del modello ti aiuta a creare un sito con una resa grafica fluida, accessibile e che rispecchia al meglio l’identità visiva dell’ente di riferimento.
Per accedere alle guida alla personalizzazione, vai al file del modello ASL sulla Community Figma, apri il file nelle tue bozze (Drafts) e scorri l’indice laterale fino a trovare il foglio «How to».