3.1. UI kit del modello Musei civici¶
Per la progettazione dello UI kit del modello si è partiti basandoci sullo UI Kit Italia e sugli altri componenti creati per i modelli precedenti, così da assicurare una coerenza visiva tra le varie interfacce. In base poi ai risultati della ricerca e quindi alle necessità a livello informativo e di contenuto, sono state creati alcuni specifici componenti (ad esempio, la Card Relaunch o la Hero della Homepage)
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 dei musei.
All’interno del file Figma è possibile trovare tutte le informazioni di implementazione, di utilizzo e di comportamento a livello di interazione.
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 Musei è 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 per museo singolo o aggregatore;
Pagine lista di primo o secondo livello;
Pagine foglia delle principali tipologie di contenuto;
Template di contenuto generico per pagine foglia;
Schermate del Flusso di acquisto biglietti o prenotazione.
3.1.4. Personalizzazione dell’interfaccia¶
Aggiungi il logo del museo, 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. È disponibile nel foglio “How to” dell UI kit del modello.