# Il design system del Paese

La video lezione illustra il design system del Paese, l’insieme di risorse per la realizzazione di interfacce ed esperienze utente per siti e servizi digitali della PA.

{% embed url="<https://youtu.be/nfARBZU7ZQ4>" %}

## Introduzione&#x20;

Progettare servizi digitali non significa solo disegnare l'architettura delle informazioni e sviluppare interfacce digitali, ma anche garantire l'uguaglianza di accesso a tutti gli utenti, indipendentemente dalle loro capacità, caratteristiche, conoscenze, o condizioni di disabilità, temporanee o meno. Tutti i cittadini devono poter avere un’esperienza d’uso piena e soddisfacente, potendone usufruire in modo semplice e chiaro, senza discriminazione e senza lasciare indietro nessuno.&#x20;

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2F4lSSwGHKRlqHmVXciPqm%2Fimage.png?alt=media&#x26;token=02b83479-6724-44f3-b2d5-6ecc18aee94f" alt=""><figcaption></figcaption></figure>

Il design system del Paese nasce proprio per aiutare la Pubblica Amministrazione a soddisfare tutti i requisiti richiesti dai servizi pubblici digitali, in primis il rispetto delle Linee guida di design e quelle di accessibilità; consente quindi la progettazione e lo sviluppo di interfacce ed esperienze d’uso coerenti, usabili e inclusive, su una pluralità di dispositivi. In una parola, aiuta a realizzare progetti di qualità.

## Il design system del Paese: una panoramica

Il **design system** del Paese è l’insieme di strumenti per la realizzazione di interfacce ed esperienze utente, per siti e servizi digitali della PA, dedicato al mondo delle amministrazioni pubbliche e dei loro progettisti e sviluppatori, interni o esterni.&#x20;

Consente la creazione e la condivisione di indicazioni e risorse pratiche: è infatti aperto, a disposizione di tutti, e permette di realizzare progetti che risultano inoltre più economici, grazie al riuso e alla condivisione di buone pratiche.

Possiamo pensare al design system del Paese come ad un insieme di scatole di costruzioni pronte da assemblare, per realizzare, con facilità e risparmio, interfacce ed esperienze digitali di qualità.&#x20;

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FmiLwky5HNQbDsndVVRxW%2Fimage.png?alt=media&#x26;token=2a08456d-ed63-49d0-b2b2-c8b3fbd641e5" alt=""><figcaption></figcaption></figure>

Ogni pezzo è:

* accessibile by design, ovvero progettato curandone l’accessibilità per consentire la fruizione del servizio a tutte le persone, senza discriminazioni;
* pronto al riuso, consente di utilizzare elementi già sviluppati e correttamente funzionanti, abilita quindi per definizione (by default) una migliore qualità del sito o servizio;
* aperto e collaborativo, sviluppato con licenze aperte in collaborazione con la community di amministrazioni e fornitori che ruota intorno al progetto Designers Italia, per un approccio di miglioramento continuo (open source e open design).

## Le risorse disponibili

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2F1b1Ohbk8LhHaVmmdAO7v%2Fimage.png?alt=media&#x26;token=9137f19c-2d9c-4a9d-9672-43cdaf95ce44" alt=""><figcaption></figcaption></figure>

Le principali scatole di mattoncini presenti nel design system del Paese sono:

* il **Kit di progettazione dell’interfaccia (UI Kit)**, punto di riferimento dei componenti per gli aspetti visivi e di resa dell’esperienza utente;
* il **Kit di sviluppo dell’interfaccia (Bootstrap Italia)**, la libreria di componenti usata su migliaia di esperienze della Pubblica Amministrazione italiana;
* i **modelli standard per siti e servizi di scuole e Comuni**, scatole premontate complete, già testate con utenti, contenenti le istruzioni per adattarle al proprio contesto.

### Il Kit di progettazione dell’interfaccia - UI Kit

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FLuGLxytpjsp7Vvhupcvg%2Fimage.png?alt=media&#x26;token=8358c1ef-3785-4eae-becb-e7a20b139b18" alt=""><figcaption></figcaption></figure>

Il Kit di progettazione dell’interfaccia serve per progettare e testare interfacce ed esperienze utente.&#x20;

Consente di visualizzare le pagine che compongono il sito o il servizio e i flussi del loro utilizzo, in alta qualità, assemblando i componenti sullo schermo come fosse un puzzle, con soluzioni che si adattano alle diverse dimensioni dei dispositivi.&#x20;

Permette di costruire prototipi di siti e servizi, o parti di questi, che è possibile rendere interattivi, personalizzare, testare e aggiornare.&#x20;

Si integra facilmente con i processi di sviluppo, e contiene indicazioni per l’accessibilità nella documentazione dei singoli componenti.

### Il Kit di sviluppo dell’interfaccia - Bootstrap Italia

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FOXh0WLMW4wu4MSKNLyDe%2Fimage.png?alt=media&#x26;token=2fea3d20-3444-48f2-b2c8-b9abf31d96d7" alt=""><figcaption></figcaption></figure>

Complementare al Kit di progettazione, il Kit di sviluppo contiene soluzioni per sviluppare e validare interfacce ed esperienze utente accessibili. Contiene cioè tutti i componenti già sviluppati e testati per montare le interfacce reali, per passare cioè dai prototipi al prodotto reale.

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FQ4D7p9gVPe0ZRhSLfiVw%2Fimage.png?alt=media&#x26;token=f3413e4a-acd6-4625-ac57-14cf6a0ded0d" alt=""><figcaption></figcaption></figure>

Le soluzioni offerte sono open source e validate per l’accessibilità e l’usabilità. Il Kit è corredato da documentazione utile ad accompagnare le attività di sviluppo software, in cui sono particolarmente curati gli aspetti di attenzione legati all’accessibilità.

### I modelli standard

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FwY52bHq4sazdoVkFaIzQ%2Fimage.png?alt=media&#x26;token=8cc89699-1d33-4189-bafd-3275c516022e" alt=""><figcaption></figcaption></figure>

La progettazione di esperienze digitali semplici ed efficaci richiede tempo, risorse e molta ricerca. I modelli di siti e servizi digitali per scuole e Comuni, promossi dal progetto Designers Italia, permettono di rispondere ai bisogni dei cittadini in modo rapido e a minor costo, sfruttando flussi e funzionalità validate dalla ricerca.&#x20;

Tornando alla metafora delle costruzioni, questi modelli sono scatole premontate complete, già testate con gli utenti e con le istruzioni per adattarle al proprio contesto. I modelli comprendono l’architettura dell’informazione, template per le pagine principali, temi per l’intero sito; tutte risorse realizzate con accessibilità come priorità, e sono corredati da una serie di guide pratiche a supporto per un corretto sviluppo.

## Dove si trova

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2F60toE1uYrrGy64gU2T2B%2Fimage.png?alt=media&#x26;token=ab247f67-3f15-4614-81fb-038764e2a1e2" alt=""><figcaption></figcaption></figure>

Il sito [**Designers Italia**](https://designers.italia.it/) è - diciamo così - la "casa" del design system del Paese, è un ambiente in continua evoluzione, che contiene istruzioni su come iniziare, fondamenti, componenti, esempi di flusso e di progetti realizzati con il design system del Paese, a disposizione di PA e fornitori.

### Fondamenti&#x20;

I fondamenti sono schede che comprendono le indicazioni necessarie per realizzare con qualità esperienze per tutte le persone, in modo inclusivo e accessibile: linguaggio, tono di voce, accessibilità; ma anche istruzioni operative su griglie di impaginazione, dimensioni degli elementi, immagini e illustrazioni, per elevare l’esperienza e per produrre contenuti comprensibili per tutti.

### Componenti&#x20;

I componenti sono gli elementi per realizzare l’interfaccia, i pezzi del puzzle; il sito documenta una libreria completa di elementi pronti per essere utilizzati, sia lato design usando il Kit di progettazione dell’interfaccia, che lato sviluppo con il Kit di sviluppo dell’interfaccia.

## Conclusioni&#x20;

<figure><img src="https://235370580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN7makNX174JjL8eUXQES%2Fuploads%2FV2XS9kuBP13UFzn2MiiM%2Fimage.png?alt=media&#x26;token=d34bde97-526b-4e47-b9db-cd7cdd648c40" alt=""><figcaption></figcaption></figure>

Il design system del Paese abilita la progettazione di siti e servizi digitali pubblici di qualità, con esperienze d’uso più armoniose e coerenti, accessibili, inclusive e fondate sulle reali necessità delle persone. L’uso delle risorse del design system permette di semplificare la realizzazione di siti e servizi, a partire da soluzioni già validate (by default) che possono essere curate nel corso di un progetto (by design). L’uso del design system del Paese consente inoltre di rispettare i requisiti previsti dalle Linee guida di design per i siti internet e i servizi digitali della PA, emesse secondo quanto definito dall’articolo 53 del Codice dell’amministrazione digitale.

\_\_\_

Anno di riferimento: 2023&#x20;

Seguici su Open Gov <https://open.gov.it/> e su twitter @opengovitaly