Read this in other languages: English.

UI Kit

Lo UI Kit è parte di un insieme di strumenti condivisi, i kit di design, che servono a progettare e realizzare i servizi digitali destinati ai cittadini. È disponibile come file Sketch italia UI Kit 2.0.sketch, utilizzabile anche attraverso la funzione "aggiungi come libreria" di Sketch o si può importare su Figma semplicemente trascinando il file Sketch nella schermata principale.

Lo UI Kit è una libreria di stili (colori, tipografia, griglie) e componenti (bottoni, input field, menu etc) utili a costruire prototipi di siti web e applicazioni. È stata costruita seguendo le Linee Guida di design per i servizi digitali della pubblica amministrazione.

:eyes: Se vuoi vedere tutti gli assets prima di scaricarli, puoi andare al progetto:

• su Invision design-ui-kit
• su Sketch Cloud
• su Figma

:dart: L’obiettivo è quello di migliorare l’user experience dei servizi digitali della pubblica amministrazione italiana attraverso la diffusione di uno stile consistente e coerente.

Sulla base di un inventario e una roadmap abbiamo costruito prima il design dei componenti e poi li abbiamo tradotti in codice alimentando la libreria Bootstrap Italia.

:star: In questo repo trovi anche un pacchetto di icone nel file indipendente italia-icons.sketch, oppure direttamente scaricabili come SVG.

Un Esempio di uso dello UI Kit è il prototipo del sito web dei Comuni italiani. Il layout è stato realizzato utilizzando e adattando agli specifici casi i componenti dello UI Kit.

Indice

• Come iniziare
• Segnalazione bug e richieste
• Come contribuire

:blue_book: Come iniziare

• Il kit è un file Sketch, prima di aprirlo ti consigliamo di scaricare da Google Font i seguenti typefaces:Titillium, Roboto Mono, e Lora.

• Nel repo trovi il file italia-UI Kit.sketch che include componenti e stili in un unico file, ma se hai bisogno solo di specifici componenti, puoi scaricare dalla cartella Components anche solo quello che ti interessa.

• Per aprire il Kit correttamente assicurati di avere l'ultima versione di Sketch. Per utilizzare lo UI Kit all'interno del tuo progetto puoi caricarlo direttamente come library di Sketch. Questa funzionalità ti permette di avere a disposizione raccolte di simboli che puoi usare in più file. Puoi inoltre tenere aggiornati i tuoi documenti nel caso in cui le librerie dovessero essere modificate.

Per saperne di più, vai alle Sketch libraries Wiki

Il kit è un progetto aperto e in continua evoluzione non solo per i componenti ancora da realizzare ma anche per l’implementazione dei file già scaricabili. Ti consigliamo quindi di controllare periodicamente se ci sono aggiornamenti del Kit: i componenti esistenti vengono implementati ed aggiunti di nuovi. Per tenere la libreria aggiornata sarà necessario scaricare di nuovo il file da questo repo e sovrascriverlo alla copia che hai in locale.

Non hai Sketch? Puoi importare il file in un altro tool di prototipazione come Figma, Invision Studio o Adobe XD, oppure installare Lunacy per utilizzare Sketch su Windows.

:wrench: Segnalazione bug e richieste di aiuto

Vuoi segnalare un bug o fare una richiesta?

Dai un'occhiata a come creare una issue. Se invece vuoi discutere delle scelte fatte o qualcosa non ti è chiaro, puoi venire a parlarne su Slack o sul Forum di Deigners Italia.

:sparkles: Come contribuire

Vorresti dare una mano sullo UI Kit? Sei nel posto giusto!

Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle linee guida di design per i servizi digitali della PA, e fai riferimento alle indicazioni su come contribuire allo UI Kit.