Menu

Developers Italia Sviluppiamo i servizi pubblici, insieme

Seguici su

Designers Italia

Il design system della Pubblica Amministrazione italiana

Designers Italia è il punto di riferimento per la progettazione dei servizi pubblici digitali: guide, strumenti, un design system e una community per facilitare processi di design centrati sui bisogni delle persone

Designers Italia

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:

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:

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.

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.

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.

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.

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.

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

torna all'inizio dei contenuti