Intro

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. Alcuni di questi progetti sono già attivi, altri sono visionabili nel piano attività. Per rimanere aggiornato con l’evoluzione dei progetti e gli eventi della community, ti raccomandiamo di registrarti alla newsletter di Designers Italia

Il sito designers.italia.it contiene:

• i riferimenti alla versione corrente delle Linee Guida di Design.
• i modelli di sito e dei servizi per alcuni enti pubblici, come comuni, scuole, aziende sanitarie locali e musei civici.
• il design system del Paese, che include i fondamenti, le componenti, i pattern e la loro anteprima per la progettazione e lo sviluppo.
• una serie di risorse per la progettazione dei servizi pubblici digitali della Pubblica Amministrazione.
• il collegamento al blog 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.

Design system

A partire dal 2022, un design sistem unitario e coerente è stato stabilito, costruendo sulle librerie esistenti ed evolvendo i seguenti kit:

• Introduzione al Design System.
• Guida a come iniziare.
• Modello di contribuzione.
• Fondamenti;
• Componenti.

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 Figma e definito in maniera aperta e collaborativa su GitHub insieme alla community dei designer. Le release dello UI kit sono esportate in Sketch per mantenere la compatibilità con formati aperti. 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. In partiocolare, il design system del Paese è utilizzato nei modelli per i siti e servizi dei Comuni e per i siti delle scuole, delle aziende sanitarie locali (ASL) e dei musei civici.

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

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 5. Tutte le librerie sono state incluse come parte del design system del paese a partire dal 2022.

Bootstrap Italia

Il kit basato su Bootstrap 5 è 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 per i siti internet e i servizi digitali della PA emanate, ex art.53 del CAD, la sintassi, gli strumenti, il parco di plugin e le convenzioni tipiche di uno strumento già conosciuto e utilizzato, quale appunto Bootstrap 5.

• 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 del Paese: 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, almeno in questa fase iniziale, sono le web app e/o le applicazioni mobile ibride basate su React Native. Il React Kit è a guida community, e non è completo in quanto alcuni dei componenti presenti su Bootstrap Italia non sono ancora stati implementati.

• Documentazione del Design React Kit;
• repository GitHub.

Design Angular Kit

il progetto ha come obiettivo quello di costruire un set di componenti ed un layer di presentazione comune basato su Angular. Il kit è sviluppato dalla community.

• Design Angular Kit Documentation
• GitHub Repository

Ogni contributo a questi kit è benvenuto ed importante, anche se piccolo. Scopri come contribuire {:target=”_blank”}con feedback, informazioni utili, segnalazioni di bug.

Kit deprecati

Il Web Toolkit è stato il primo progetto volto a supportare la creazione di siti della PA: diversi siti di ministeri lo stanno utilizzando. I feedback ricevuti sull’utilizzo di questo toolkit da enti e fornitori sono stati alla base della definzione tanto delle evoluzioni di Bootstrap Italia, quando del design system del Paese.

Per questa ragione non è più aggiornato dal 2017.

• Web Toolkit Documentation
• GitHub Repository

Altri kit utili

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 strumenti 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

• Il design system del Paese

  L’insieme di indicazioni e risorse per realizzare siti e servizi pubblici di qualità, efficienti e accessibili

• Come iniziare

  Dai primi passi da compiere per progettare con il design system e lo UI kit in Figma e Sketch, alle librerie di sviluppo

• UI kit

  È disponibile la libreria Figma e la conversione in Sketch

• Anteprima UI Kit su Figma

  Se vuoi vedere tutti i componenti prima di usarli

• Repository Bootstrap Italia

  La libreria Bootstrap Italia è il modo più semplice e sicuro per costruire interfacce web moderne, inclusive e semplici da mantenere.

• Repository React Design Kit

  Un set di componenti open-source per React, costruito sulle basi dello UI Kit e della libreria Bootstrap Italia

• Repository Angular Design Kit

  Un set di componenti open-source per Angular, costruito sulle basi dello UI Kit e della libreria Bootstrap Italia

• Modello di sito di un Comune su Designers Italia

  Modello di sito web, l'architettura dell'informazione, i template grafici e HTML, i CMS gratis e a disposizione di tutti

• Template HTML per il sito del Comune

• Repository completa del progetto sito web per i Comuni

• Documentazione del progetto sito web per i Comuni

• Il sito web di una scuola su Designers Italia

  Modello di sito web e template CMS per i siti scolastici, gratis e a disposizione di tutti

• Tema Wordpress per il sito web della scuola

• Template HTML per il sito web della scuola

• Documentazione del progetto sito web per le scuole