Il digitale a misura di cittadino

In questa pagina presentiamo il design system realizzato per la Pubblica Amministrazione italiana e gli strumenti di Designers Italia a disposizione degli sviluppatori.

L’obiettivo è aiutare la Pubblica Amministrazione a risparmiare tempo e risorse, grazie a una serie di strumenti per la progettazione e lo sviluppo di siti e servizi pubblici digitali a misura di cittadino, che possano essere allo stesso tempo moderni, efficaci, inclusivi e facilmente manutenibili.

Il sito designers.italia.it contiene:

• i riferimenti alla versione corrente delle Linee Guida di Design;
• una serie di kit per il design dei servizi pubblici digitali della Pubblica Amministrazione;
• il collegamento alla piattaforma Medium di Designers Italia che ospita casi d’uso e applicazioni di successo del design system per la Pubblica Amministrazione.
• il piano attività aggiornato al 2022, contenente una roadmap delle attività e i principali risultati raggiunti dal progetto Designers Italia negli ultimi anni, con uno sguardo rivolto ad azioni e obiettivi futuri.

Il codice sorgente del sito si trova in un repository GitHub aperto a ogni tipo di contributo.

UI kit

Lo UI kit è fatto di componenti visive già pronte per assemblare l’interfaccia di un sito o di un app, seguendo le linee guida per i servizi digitali della Pubblica Amministrazione e le migliori buone pratiche di design più diffuse nel panorama nazionale e internazionale.

Il kit è costruito con Sketch e definito in maniera aperta e collaborativa su GitHub insieme alla community dei designer. Lo UI kit è il punto di riferimento per i componenti e i pattern di interfaccia utente destinati ad essere implementati con l’utilizzo dei kit di sviluppo web (Web Development Kit), mostrati di seguito.

• Introduzione allo UI Kit;
• tutti i componenti e i pattern dello UI Kit;
• repository GitHub.

Sono sempre più in crescita le Pubblica Amministrazioni che stanno utilizzando lo UI kit per definire le proprie interfacce, tra le quali un posto di assoluta rilevanza spetta ai modelli per i siti dei Comuni e per i siti delle scuole.

Per domande e discussioni sullo UI Kit, sullo Slack di Developers Italia è disponibile e aperto a tutti il canale #design-ui.

Web Development Kit

I Web Development Kit sono un insieme di strumenti per lo sviluppo front end di siti e applicazioni web. Sono librerie HTML, CSS e Javascript che permettono di realizzare siti conformi alle Linee Guida di Design e realizzano in codice quanto previsto dallo UI kit. Allo stato attuale, il kit per lo sviluppo web più stabile, aggiornato e maturo è Bootstrap Italia, basato sulla libreria open source Bootstrap 4.

Bootstrap Italia

Il kit basato su Bootstrap 4 è il punto di riferimento per lo sviluppo dei progetti della Pubblica Amministrazione. Lo scopo principale è mettere a disposizione della comunità di sviluppatori, in coerenza con le Linee Guida di Design, la sintassi, gli strumenti, il parco di plugin e le convenzioni tipiche di uno strumento già conosciuto e utilizzato, quale appunto Bootstrap 4.

• Documentazione di Bootstrap Italia;
• repository GitHub;
• Bootstrap Italia Playground per iniziare ad usare Bootstrap Italia;
• esempio di template base da cui partire.

Contribuisci alla crescita del design system: per segnalare un sito, una app o un tema realizzato con Bootstrap Italia, puoi aprire una issue sul repository di Bootstrap Italia o scrivere un post sul forum!

Design React Kit

Il progetto ha come obiettivo quello di costruire un set di componenti ed un layer di presentazione comune basato su React. Il focus del progetto sono le web app e/o le applicazioni mobile ibride basate su React Native. Il React Kit non è completo in quanto alcuni dei componenti presenti su Bootstrap Italia non sono ancora stati implementati.

• Documentazione del Design React Kit;
• repository GitHub.

Tutti i design kit per la progettazione

La realizzazione dell’interfaccia e dello sviluppo web sono soltanto una parte del processo di definizione di un servizio digitale. Designers Italia mette a disposizione kit e modelli che coprono tutte le fasi di progettazione di un servizio, dall’organizzazione del progetto alla comprensione del contesto, dalla progettazione alla realizzazione e validazione delle soluzioni con gli utenti.

Per maggiori informazioni, puoi iniziare dalla pagina dei kit sul sito di Designers Italia.

Canali

Entra nel forum

Dialoga sullo Slack di Developers Italia: sono disponibili diversi canali che iniziano con “#design-“, in particolare segnaliamo: #design-service, #design-ui-kit, #design-dev, #design-siti-dei-comuni e #design-siti-scuole.

Risorse