Tre generazioni di linee guida, strumenti e processi per portare accessibilità, usabilità e qualità nei servizi pubblici digitali

Premessa

Un’esperienza d’uso semplice e di qualità è un diritto in quest’epoca di trasformazione digitale della Pubblica Amministrazione (PA). I siti internet e i servizi digitali pubblici devono essere progettati tenendo conto delle esigenze di tutte le persone, garantendo l’accesso senza discriminazioni basate su caratteristiche personali, conoscenze o condizioni di disabilità, temporanee o permanenti.

Le interfacce digitali della PA devono essere semplici e utili, sia che siano rivolte alla cittadinanza per erogare servizi e fornire informazioni, sia che siano ad uso interno di chi lavora nel settore pubblico. In entrambi i casi, devono consentire a tutte le persone un’esperienza di cittadinanza piena, equa e inclusiva.

Design system .italia è nato proprio per agevolare le PA e i loro fornitori nel raggiungere questo obiettivo, rispondendo al requisito 4.5 delle Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione del 2022 che prescrive interfacce coerenti nello stile e nell’esperienza d’uso privilegiando quanto previsto su Designers Italia.

Design system .italia è il sistema di progettazione open source dello Stato che fornisce indicazioni e strumenti per realizzare interfacce ed esperienze digitali pubbliche di qualità.

Ma come è stato il processo che ha portato al design system del Paese, .italia?

Design system generation: a stable and sufficient core library of assets, docs, tools and practices delivered for use by designers […] and/or developers […] (Curtis, 2024)

Prendendo come riferimento questa definizione di “generazione di un design system” — una libreria stabile e sufficiente di risorse, documentazione, strumenti e pratiche rilasciate per designer e sviluppatori — possiamo individuarne tre evoluzioni dal 2015 ad oggi.

Indice dei contenuti

• La nascita del design system: la versione alfa (2015–2017)
• Consolidamento e crescita: la seconda generazione (2017–2021)
• L’innovazione di .italia: la terza generazione (2021–oggi)
• Prospettive future per il design system .italia
• Cronologia delle risorse del design system .italia
• Alcune fonti per la storia del design system .italia

La nascita del design system: la versione alfa (2015–2017)

In sintesi: prime linee guida di design, approccio open e sforzi iniziali per la coerenza dei siti web della PA.

Sebbene non fosse ancora un vero e proprio design system, questa generazione fu il primo tentativo di rendere coerenti per identità visiva, usabilità ed esperienza utente migliaia di siti web della Pubblica Amministrazione, ripensando un approccio responsabile e olistico, come si diceva allora, al progetto digitale per la pubblica utilità.

Nell’ambito dell’iniziativa “Italia Login”, promossa dal Governo Italiano e curata da AGID, furono redatte le prime Linee guida di design per i siti web della PA (2015) con il contributo di un ampio steering committee di esperti ed esperte. In quella versione alfa, pubblicata sul sito design.italia.it, c’erano i primi elementi di un’identità visiva “ridotta ai minimi termini” (Sinni, 2016) per l’Italia digitale, in uso ancora oggi: il colore istituzionale Blu Italia #0066cc, le griglie Bootstrap e il carattere tipografico open source Titillium Web. Inoltre, il processo aperto e partecipato per la loro stesura, segnò l’inizio per la PA dell’uso di repository sulla piattaforma GitHub per discutere e collaborare.

“With a technological system not updated for almost sixteen years, a geological era from a digital point of view, it was immediately clear that it would not be possible to continue updating the site only at the interface level as had been done until then.” (Sinni-Ruggeri, 2022)

Il redesign del sito governo.it (2015) fu il primo progetto pilota d’applicazione, cui ne seguirono molti altri, centrali e locali, rappresentando allora una risposta all’obsolescenza con un approccio radicale e non solo aggiornamenti dell’interfaccia.

Dal 2016, la governance del progetto passò al Team per la trasformazione digitale, struttura dell’allora Commissario straordinario per l’attuazione dell’agenda digitale.

Consolidamento e crescita: la seconda generazione (2017–2021)

In sintesi: rilascio della prima versione stabile delle linee guida di design; consolidamento di Designers Italia; prime versioni di strumenti operativi e modelli.

Con la guida del Team per la trasformazione digitale e la collaborazione di AGID, si consolidarono la community e i progetti Designers Italia e Developers Italia. Nel 2017 fu rilasciata la prima versione stabile delle Linee guida di design per i siti web della PA, dando il via a una riscrittura completa che ne estese la portata all’intero ciclo di progettazione dei servizi digitali, accogliendo fin dalla versione 2018.1 anche il protocollo eGlu per i test di usabilità. Le indicazioni e gli strumenti su Designers Italia iniziarono ad essere raccontati come il “design system della PA”.

Il digitale non è di destra o di sinistra, non è Real Madrid o Barcellona: un buon digitale è trasparenza, efficienza, inclusione, lotta alla corruzione, una sanità e una scuola migliori, occupazione e soprattutto futuro. (Attias, 2018)

Furono definiti molti nuovi strumenti (es. Docs Italia per ospitare le linee guida) e processi, come le consultazioni pubbliche su Forum Italia per rilasciare nuove linee guida tecniche. Tra queste ultime, le Linee guida per l’acquisizione e il riuso di software per la PA, ancora oggi riferimento fondamentale a supporto degli art. 68 e 69 del Codice dell’amministrazione digitale (CAD) che prescrivono alle pubbliche amministrazioni di rilasciare con licenza aperta il software da esse sviluppato o commissionato.

Sul sito designers.italia.it, la cui architettura dell’informazione fu evoluta nella seconda metà di questa generazione per divulgare un processo ideale di progettazione a 5 fasi a supporto delle linee guida di design, furono rilasciati kit e nuovi strumenti per la prototipazione e la progettazione (UI Kit) e lo sviluppo (Bootstrap Italia) delle interfacce. Vennero inoltre rilasciate per il riuso le prime versioni complete dei modelli di sito istituzionale per le scuole e per i Comuni: dalla ricerca quantitativa e qualitativa al service design, dai contenuti agli scenari d’uso, dal design fino allo sviluppo delle interfacce, utilizzando ed estendendo a ogni lavorazione gli strumenti stessi di Designers Italia. La community cominciò, inoltre, a guidare la produzione di ulteriori strumenti aperti, come ad esempio il kit di sviluppo per React.

L’idea, i cui semi si potevano trovare fin dalla prima generazione, di un unico punto di accesso per tutti i servizi digitali del Paese, cominciò a diventare realtà con l’uscita di app IO (2020), a guida PagoPA, vincitrice negli anni seguenti della XVII edizione del Premio Compasso d’Oro (2022).

Nel 2019 fu istituito il Dipartimento per la trasformazione digitale, che ereditò la governance del progetto Designers Italia.

L’innovazione di .italia: la terza generazione (2021–oggi)

In sintesi: revisione completa per definire il design system nazionale, accessibile by design; nuovo sito Designers Italia e PNRR; rilascio di risorse e modelli aggiornati in collaborazione con la community.

Dopo il redesign di innovazione.gov.it (2021), la casa digitale del Dipartimento per la trasformazione digitale, che mostrò una rinnovata attenzione a usabilità, accessibilità e privacy, questa generazione entrò nel vivo con l’avvio di una completa revisione delle risorse per le interfacce, progetto ambizioso di ammodernamento tecnologico e di accessibilità, ma anche di visione e gestione del progetto, per arrivare a definire e mettere a sistema il design system nazionale, accessibile by design.

La pubblicazione di un decalogo per la qualità dei servizi pubblici digitali e l’uscita delle Linee guida di design per i siti internet e i servizi digitali della PA (2022) emesse da AGID ai sensi del CAD, che prevedono le indicazioni e gli strumenti operativi disponibili su Designers Italia come supporto evolutivo per la loro applicazione, fissarono l’orizzonte delle lavorazioni. Arrivarono nuove versioni di UI Kit Italia, Bootstrap Italia (aggiornato a Bootstrap 5), e il nuovo Design Tokens Italia, in tempo per abilitare le interfacce delle nuove versioni dei modelli di siti e servizi digitali di Designers Italia promossi dal PNRR su una platea di circa 16.000 scuole e Comuni con la misura M1C1.1.4.1 “Esperienza del cittadino nei servizi pubblici”.

Progettare con qualità: l’accessibilità al centro del design system del Paese

Nella primavera 2023, dopo una fase beta dal nome in codice “Prossima”, fu lanciato il nuovo sito Designers Italia, rinnovato nei contenuti e nello stack tecnologico, “mette a disposizione conoscenza e strumenti per creare i servizi digitali” della PA. Costruito anche per essere un buon esempio di applicazione del design system del Paese, seguendo tutto il processo dalla ricerca fino alla validazione con le persone, ne ospita la documentazione nella sezione /design-system/.

Si consolidò così anche l’uso di versionamento semantico e del changelog. La documentazione divenne la fonte di verità, presentando i componenti come un tutt’uno: istruzioni, design e codice. Nacque quindi il design system .italia come lo conosciamo oggi, un vero e proprio design system pubblico per il Paese, dai princípi alle indicazioni operative, dai fondamenti di scrittura per l’esperienza utente fino ai componenti per realizzare prototipi e prodotti finali.

L’open source si conferma una scelta di campo, con processi di miglioramento continuo del design system gestiti con trasparenza e coinvolgimento della community, nel contesto del nuovo modello di contribuzione, nelle lavagne pubbliche di gestione del progetto dove è possibile seguire e discutere segnalazioni, priorità e attività in lavorazione.

Per cambiare la visione dell’accessibilità digitale, da adempimento a opportunità, in questa generazione è stato scelto di metterla al centro del progetto considerando “l’accessibilità by design parte di ogni processo e risorsa del design system del Paese, non solo come un orizzonte ideale o una risposta alle norme. Nel design system trovi risorse quindi accessibili by default per PA e fornitori, da cui partire per realizzare siti e servizi facili da usare e inclusivi, con più efficacia, minor tempo e costi” (dal fondamento Accessibilità).

Verso Design system .italia: come è nato il nome del design system del Paese

Tra le novità di questi primi mesi del 2024, segnaliamo il consolidamento del fondamento Identità, l’inizio di una fase di sperimentazione del nuovo carattere Titillium Sans Pro (descritto nel fondamento Tipografia) e l’arrivo dei nuovi kit di sviluppo per Angular e React in collaborazione con la community. Senza contare la pubblicazione su Designers Italia dei modelli per le Aziende sanitarie locali (ASL) e i Musei civici che usano ed estendono anch’essi il design system .italia.

La diffusione di questa terza generazione del design system .italia è oggi testimoniata da numeri significativi:

• 3 schede “Come iniziare” e 4 schede “Come contribuire” rivolte a responsabili di progetto, designer e sviluppatori;
• 16 “Fondamenti” e 54 “Componenti”, con 1 kit per designer e 3 framework per sviluppatori;
• UI Kit Italia usato da oltre 4.000 persone della community Figma nell’ultimo anno;
• Bootstrap Italia usato come dipendenza in più di 390 progetti software open source su GitHub;
• nell’ambito del PNRR, l’84% dei Comuni e l’81% delle scuole italiane, per un totale di più di 13.000 amministrazioni, hanno aderito per realizzare i loro siti e servizi basandosi su .italia, con circa il 38,5% di questi che oggi ha già adottato il design system .italia nel nuovo sito (pari al 32% del totale dei Comuni e delle scuole italiane);
• il nuovo sito designers.italia.it, basato sul design system .italia, visitato da più di 10.000 persone al mese a (+56,5% rispetto allo stesso periodo nel 2023) per un totale di oltre 16.000 visite (+69,4%) e 45.000 pageview (+102,7%), con una durata media della visita di circa 3 minuti e mezzo (+220,9%) e un bounce rate (persone che lasciano il sito dopo una sola pagina) del 4% (-90%).

Prospettive future per il design system .italia

Nell’ottica del miglioramento continuo tipico dei progetti open source, il design system .italia è ora in una nuova fase di validazione che prevede la verifica di accessibilità e coerenza dei 54 componenti esistenti, che porterà al rilascio della versione 1.0.0 della documentazione.

A seguire, saranno messe in campo nei prossimi mesi azioni di ricerca per creare occasioni di confronto con chi queste risorse le utilizza in prima persona, per continuare a plasmare il futuro di .italia insieme all’intera community di Designers Italia che si è costituita in questi anni e che, ad oggi, conta più di 24.000 persone.

Infatti, se possiamo oggi raccontare questa storia è grazie al lavoro e alla passione della community, moltissime persone che lavorano per la PA e per i suoi fornitori, nell’ambito della progettazione e dello sviluppo, persone del settore o appassionate, responsabili progetto o docenti, anche studenti, che in questi anni ci hanno messo pezzi, idee e qualità. Non potendo citarle tutte, le ringraziamo qui in un enorme abbraccio collettivo.

Se vuoi dare il tuo contributo a questo progetto aperto e in costante evoluzione, prendi parte alla community di Designers Italia.

• Scopri come usare Design system .italia 🇮🇹
• Scopri come contribuire a Design system .italia 🇮🇹

Cronologia delle risorse del design system .italia

Una panoramica dei principali rilasci e risorse del design system .italia nelle tre generazioni, per documentazione 📚 , design 📐 e sviluppo 💾 .

Le risorse correnti fanno riferimento alla terza generazione.

Documentazione 📚

Terza generazione .italia (2021–oggi):

• Design system .italia vive in una sezione del sito Designers Italia. Da privilegiare per realizzare interfacce coerenti nello stile e nell’esperienza d’uso come prescritto dalle Linee guida di design (2022), emesse ex Art 53 del CAD. Versioni da 1.0.0-alpha.1 (2022) a 1.0.0-beta.2 del 29 marzo 2024 (changelog documentazione).

Seconda generazione (2017–2021):

• Capitolo “User interface” delle Linee guida di design, consultabili su Docs Italia. Superate dalle Linee guida di design (2022) emesse ex Art 53 del CAD e dalla pubblicazione del Manuale operativo di design. Versioni da 2017.1 a 2020.1.

Prima generazione (2015–2017):

• Linee guida di design per i siti web della PA alfa (2015), consultabili allora sul sito design.italia.it.

Design 📐

Terza generazione .italia (2021–oggi):

• UI Kit Italia v3, nativo Figma, è disponibile dalla community Figma e, anche convertito nel formato aperto Sketch*, dalla repository /italia/design-ui-kit/. Versioni da 3.0.0-alpha.1 (2023) a 3.4.0 del 7 marzo 2024 (changelog UI Kit Italia).
  * La conversione è automatizzata, lanciando il tool fig2sketch al rilascio con un’azione GitHub anch’essa messa a disposizione della community.
• Design Tokens Italia, esportati da UI Kit Italia, i design tokens di .italia sono pubblicati nella repository /italia/design-tokens-italia/ a disposizione di designer e sviluppatori. Versioni da 1.0.0 (2023) a 1.2.0 del 12 dicembre 2023 (changelog Design Tokens Italia).
• I layout ad alta definizione, i prototipi e le librerie componenti del modello Comuni v2 (changelog UI Kit Comuni), e dei modelli ASL (changelog UI Kit ASL) e Musei civici (changelog UI Kit Musei civici) v1 sono rilasciati nella community Figma e, anche convertiti nel formato aperto Sketch, nelle rispettive repository. Usano ed estendono UI Kit Italia v3.

Seconda generazione (2017–2021):

• UI Kit v2, nativo Sketch, era disponibile dalla repository GitHub /italia/design-ui-kit/ e in anteprima su Invision. La versione “2”, scelta allora senza un precedente rilascio “1”, indicava la consapevolezza di un cambiamento generazionale significativo. Deprecato dall’uscita della v3 nel 2023, è disponibile per fini di archiviazione dal ramo “2.x” e dalla repository dei prototipi storici archiviati.
• I layout hi-fi e i prototipi per le v1 dei modelli delle scuole e dei Comuni, nativi Sketch, vengono rilasciati su GitHub e in anteprima su Invision. Usano ed estendono UI Kit v2. Oggi deprecati, sono disponibili per consultazione dalla repository dei prototipi storici archiviati.

Prima generazione (2015–2017):

• Non esistevano kit dedicati, specifiche di design di alcuni componenti erano indicate nelle Linee guida di design alfa.

Sviluppo 💾

Terza generazione .italia (2021–oggi):

• Bootstrap Italia v2 viene portato a Bootstrap 5 con un ampio refactoring di componenti, codice e stack tecnologico. Il focus delle lavorazioni è sull’accessibilità. Vengono aggiunti nuovi componenti (eg. nuovo Megamenu e Video player). Versioni da 2.0.0-rc.1 (2022 su repository dedicata -next) a v2.8.5 dell’8 maggio 2024 (changelog Bootstrap Italia).
  All’inizio della terza generazione viene aggiornata inoltre la v1, con fix di accessibilità e dipendenze oltre a prime evolutive. Versioni da 1.5.0 (2022) a 1.6.4 del 13 luglio 2022, deprecata dal 2023 a favore della v2.
• I template HTML per le v2 dei modelli delle scuole (changelog template scuole) e dei Comuni (changelog template Comuni) vengono rilasciati su GitHub, usano ed estendono Bootstrap Italia.
• React Kit v5 viene aggiornato a Bootstrap Italia v2, con un importante refactoring a cura anche della community. Versioni da 5.0.0-7 (2023) a v5.0.4 del 2 maggio 2024 (changelog).
• Angular Kit v1, viene aggiornato a Bootstrap Italia v2, con un importante refactoring a cura della community. Versioni da 1.0.0-0 (2022) alla 1.0.2 dell’8 aprile 2024 (changelog).

Seconda generazione (2017–2021):

• Esce Bootstrap Italia v1, basato su Bootstrap 4, con il sito di documentazione dedicato. Raccoglie da subito una nutrita comunità di contributori. Versioni da 0.0.1 (2018) a 1.4.3 del 28 maggio 2021.
• I template HTML per le v1 dei modelli delle scuole e dei Comuni vengono rilasciati su GitHub, usano ed estendono Bootstrap Italia.
• In parallelo la community porta avanti ulteriori progetti open, tra cui si segnala il React Kit, con la propria documentazione su Storybook. Versioni fino a 4.0.2 del 27 dicembre 2021. Inoltre, in questa generazione, le prime idee per un Angular Kit con versioni fino a 0.13.0 del 14 settembre 2018.

Prima generazione (2015–2017):

• Il codice HTML (e CSS) di alcuni componenti era scaricabile dalle Linee guida di design alfa.
• A valle delle prime applicazioni avviene un primo tentativo di astrarre un kit di sviluppo, il Design web toolkit, con il sito di documentazione dedicato. Manutenuto da una piccola community di pratica, viene deprecato nel 2019 a favore di Bootstrap Italia. Versioni fino a 1.0.0-alpha del 24 maggio 2017.

Alcune fonti per la storia del design system .italia

Terza generazione .italia (2021–oggi):

• Vabanesi, M. & Tabellini D. , Zaia, F. Dietro le quinte del sito MITD, dalla ricerca alla pubblicazione online (2a parte), 16 marzo 2021, Medium
• Zaia, F. & team Designers Italia. Ripartire da approccio e processo: la progettazione di servizi pubblici digitali, 21 agosto 2021, Medium
• Al via l’aggiornamento del design system del Paese, 23 dicembre 2021, Designers Italia
• Tabellini, D., & Caccavello, F. Progettare con qualità: l’accessibilità al centro del design system del Paese, 5 luglio 2022, Medium
• Stagi, A. Bootstrap Italia per il design system del Paese, 6 luglio 2022, Medium
• Design system: pubblicata la versione ufficiale dello UI Kit Italia, 4 maggio 2023, Designers Italia
• Designers Italia si rinnova!, 15 maggio 2023, Designers Italia
• Prendi parte anche tu all’evoluzione del design system del Paese, 25 settembre 2023, Designers Italia
• Ciao .italia: la terza generazione del design system ha un nome ed entra in fase beta, 8 marzo 2024, Designers Italia

Seconda generazione (2017–2021):

• Fabbri, L., & De Santi, M. Servizi pubblici a misura di cittadino, nasce la community dei designer, 1 giugno 2017, Medium
• De Blasis, D. Le griglie: alla scoperta dello UI kit di Designers Italia, partendo dalle basi, 14 febbraio 2018, Medium
• De Santi, M. & Fabbri, L. Towards a new generation of public services: Designers Italia’s design kits, 23 aprile, 2018
• Lucci, G. & Tabellini, D. Un progetto non comune: un prototipo di sito web per i Comuni italiani, 15 gennaio 2019, Medium
• De Santi, M. Diario di bordo #1: l’app IO prende il largo, 28 aprile 2020, Medium

Prima generazione (2015–2017):

• Online le Linee guida di design per i siti web della PA, 21 novembre 2015, AGID
• Maggio, R. Presentazione del nuovo sito governo.it, Reggia di Venaria, video su YouTube del 21 novembre 2015
• Sinni, G. Un carattere per l’identità italiana, 18 gennaio 2016, Medium
• Quaratino, F. Eppur si Muove. Perché non è solo una questione di linee guida e perché è importante avere delle linee guida, 4 aprile 2016, Medium
• Sinni, G. La pubblica utilità è open source, autunno 2016, rivista Progetto Grafico n. 30 “Tecnologie aperte”

Altri riferimenti utili

• Letture propedeutiche in .italia: il fondamento Princìpi e intenzioni per i perché; Identità e Accessibilità per i riferimenti minimi; Come iniziare per portarti avanti, in particolare se sei designer, sviluppatore e/o responsabile di progetti per la PA.
• Le persone sono al centro del progetto: per creare esperienze utili ed efficaci si parte sempre dalla ricerca e dai bisogni delle persone. Puoi usare le Risorse per progettare e il Manuale operativo di design di Designers Italia per allargare l’orizzonte all’intero processo di progettazione, oltre l’esperienza d’uso e l’interfaccia.
• Il design system .italia si rivolge a due target: le persone che realizzano esperienze, in amministrazioni e loro fornitori; le persone che fruiscono esperienze, cittadinanza e dipendenti pubblici, da considerare al centro del progetto.
• La “materia” del digitale è codice, pixel, contenuti, semantica, buone pratiche e rispetto degli standard, da curare costantemente con approccio di miglioramento continuo. Design system .italia si occupa proprio di questa materia, fino al codice dei componenti per comporre le interfacce, disponibile per più framework di sviluppo.
• L’approccio aperto (open) è una scelta di campo: non solo un obbligo per la PA, open source, open design e le corrette licenze aperte sono una scelta per trasparenza, condivisione, riuso e apertura ai contributi di tutta la community. Design system .italia è un bene pubblico.
• Questa storia è legata a doppio filo a quella di normativa e riferimenti: all’evolversi di Linee guida di design, Linee guida sull’accessibilità, CAD, European Accessibility Act, GDPR, Piani triennali, indici europei sulla qualità dei servizi pubblici e norme tecniche o standard di riferimento EN, UNI, WCAG.

Copertina: rielaborazione di un’immagine di Tara Evans su Unsplash

Verso Design system .italia: dalle origini al design system aperto della PA was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Un percorso iterativo tra branding, linguistica e proprietà intellettuale, con il coinvolgimento della community di Designers Italia

La cosa e il suo nome

Che cosa c’è in un nome?
Ciò che noi chiamiamo con il nome di rosa,
anche se lo chiamassimo con un altro nome,
serberebbe pur sempre lo stesso dolce profumo.

William Shakespeare, Romeo e Giulietta

Fuori dal suo celebre monologo d’amore, Giulietta aveva ragione solo in parte. Se cambiassimo nome a una rosa, il fiore in sé non perderebbe certo la sua dolcezza olfattiva. Tuttavia, se provassimo a descriverlo a qualcuno che non l’ha mai visto con un nome diverso, magari più ruvido nel suono o più complicato da pronunciare, risulterebbe modificata anche la sua percezione: prima del profumo, forse si noterebbero le spine.

Le parole che usiamo per nominare le cose impattano sui nostri giudizi e sulla nostra esperienza del mondo. Restringendo la lente al campo dei prodotti e dei servizi, questo impatto appare ancora più determinante: un nome “giusto” (o un nome “sbagliato”) può scrivere il primo capitolo del successo (o dell’insuccesso) di un prodotto o di un servizio presso il pubblico. Nomen omen, dicevano nella Roma antica, cioè il nome è presagio del destino. E chi oggi si occupa di branding non potrebbe essere più d’accordo.

Spingendoci oltre, se la rosa non avesse alcun nome, non potremmo identificarla e, di conseguenza, comunicarla. Attribuirle un nome, il suo nome, significa far esistere la rosa all’interno del nostro orizzonte degli eventi. In questo senso, l’atto di nominare completa il processo di creazione.

Nessuna cosa è dove la parola, cioè il nome, manca. È la parola che procura l’essere alla cosa.

Martin Heidegger, Essere e tempo, 1927

Quando, nel 2021, abbiamo iniziato a riflettere in modo strutturato sulla questione del suo nome, il design system per progettare e costruire le interfacce di siti e servizi digitali della Pubblica Amministrazione esisteva già, le lavorazioni per definire una terza generazione delle risorse dell’ecosistema erano in pieno fermento, ed esisteva un nome per identificarlo e comunicarlo: Design system del Paese, un’etichetta utile ma pronta da sostituire. Rappresentava un nome, appunto, non il suo nome. Mancava l’omen: la visione di cui il design system è portatore, il seme del suo destino open a servizio dei progetti di tutte le persone per tutte le persone.

Progettare il nome

Cose e nomi, ciascuno nella propria
desolata orfanità
si cercano,
dove,
nella mente
che li tenne uniti
o in quale
altra unicità?

Mario Luzi, Nominazione, in Frasi e incisi di un canto salutare, 1990

Come si trova il nome, quello “giusto”? È possibile progettarlo, seguendo una metodologia?

Spesso si tende a pensare che la competenza essenziale per la riuscita di un nome sia la creatività. In realtà, procedere a mano libera rappresenta un rischio, se non addirittura una trappola.

Il naming, cioè l’insieme delle attività che portano alla scelta del nome, è un processo iterativo, che nasce dall’incontro tra tre discipline molto diverse, ma tra loro complementari: il marketing, la linguistica e la proprietà intellettuale.

Nel nostro caso, certamente peculiare rispetto a quello di una realtà aziendale, il percorso che ha condotto al traguardo del nome del design system ha assunto le caratteristiche della staffetta: una lunga corsa basata sul lavoro di squadra e sui ripetuti passaggi di testimone tra designer, figure esperte di comunicazione e altre specializzate in affari legali del Dipartimento per la trasformazione digitale. Soprattutto, ha coinvolto le persone della community di Designers Italia: a loro, prime contributrici e utilizzatrici del design system, è stato affidato l’ultimo miglio, quello decisivo, che resta memorabile con l’onore del fotofinish.

Primo passo: definire i bisogni di comunicazione

Fermi ai blocchi di partenza, ci siamo chiesti: a quali esigenze deve rispondere il nome del design system dei siti e dei servizi digitali pubblici, e quali caratteristiche deve avere? Per rispondere, abbiamo unito marketing e linguistica alla conoscenza del contesto specifico della Pubblica Amministrazione.

Il nome “che funziona” è distintivo.

Appartiene solo a questo design system e ne esprime i valori: apertura, pluralità e responsabilità nel progettare uno strumento di qualità al servizio del Paese.

È breve.

Più il nome è breve, più facilmente può essere ricordato. Come regola pratica, conviene attenersi al limite di quattro sillabe.

È semplice.

Deve essere utilizzabile da tutte le persone. Al contrario, se il nome fosse difficile da pronunciare o da scrivere, sarebbe difficile da comunicare e potrebbe generare confusione o frustrazione in chi vorrebbe usarlo.

È piacevole.

Se ci piace pronunciarlo e scriverlo, lo ricorderemo e lo useremo volentieri.

È in italiano.

È il nome di uno strumento al servizio della Pubblica Amministrazione italiana.

Ma è anche internazionale.

Ha l’ambizione di essere riconoscibile all’interno di una “famiglia”, quella dei design system per i servizi governativi, che conta diversi omologhi all’estero: GOV.UK Design System nel Regno Unito, Système de Design de l’État in Francia, U.S. Web Design System negli Stati Uniti, Aurora in Canada o Poncho in Argentina, per citarne solo alcuni.

Secondo passo: esplorare in creatività attraverso il design thinking collaborativo

Fissate le coordinate sulla mappa, la corsa è partita con la sua fase più libera e creativa, quella della generazione di idee. Le attività hanno seguito un processo di co-progettazione interna tra designer e specialisti di comunicazione, suddiviso in due sessioni:

1. la generazione di idee vera e propria si è ispirata alla tecnica del “lotus blossom”, cioè della fioritura del loto: un framework evocativo nel nome tanto quanto efficace nei numeri, che ha consentito di dispiegare sul tavolo oltre settanta parole;
2. le idee generate sono state, quindi, raccolte e organizzate in gruppi, che hanno portato all’elaborazione di tre proposte di concept.

Concept 1 — Design system Italia

Definisce l’oggetto “design system” nel modo più diretto. È neutro, facile da memorizzare e ricercare. È coerente con gli standard internazionali e con l’ecosistema .italia, come ad esempio Designers Italia, Cloud Italia e Developers Italia.

Concept 2 — Insieme Italia

Evoca i valori che ispirano il design system del Paese: partecipazione, apertura e servizio per la Pubblica Amministrazione. D’altra parte, il design system è esso stesso un “insieme” di regole e componenti.

Concept 3 — Studio Italia

È il luogo in cui sono raccolte le regole e i componenti per i siti e i servizi digitali della Pubblica Amministrazione. Uno spazio-laboratorio aperto per progettare e sviluppare concretamente.

Terzo passo: validare e scegliere. Il coinvolgimento della community

Quando l’esplorazione nello spazio s’intensificherà, saranno le società a dare il nome a tutto: la sfera stellare IBM, la galassia Microsoft, il pianeta Starbucks…

Dal film Fight Club, 1999

Nel sistema solare di Designers Italia, la community ha da sempre il ruolo di una forza gravitazionale, capace di sospingere il moto dei pianeti, cioè dei progetti, e di aggregare nuova materia stellare, attraverso i contributi diretti e le occasioni di confronto.

Il design è un processo di comunità, aperto e collaborativo. Quando gli elementi e gli attori coinvolti in un servizio sono numerosi, come nel caso della Pubblica Amministrazione, i problemi da risolvere possono diventare complessi. Molte pubbliche amministrazioni condividono problemi comuni: allo stesso modo, possono esserlo le soluzioni. Per questo motivo, ispirandoci agli articoli 68 e 69 del Codice dell’amministrazione digitale, adottiamo un approccio open source che promuove il riuso e valorizza il lavoro degli altri anche nella progettazione dei servizi pubblici digitali.

Nella staffetta per il nome del design system del Paese, giunti alla tappa della selezione del concept, ci è sembrato naturale affidare il testimone alla community attraverso una chiamata diretta. Lo abbiamo fatto su Forum Italia, pubblicando un sondaggio che ha in breve collezionato oltre 4 mila visite, 403 votanti e 94 commenti, tra i quali abbiamo raccolto ulteriori alternative alle tre proposte iniziali. Con il 66% delle preferenze, il concept più votato è stato Design system Italia. Fine della corsa? Sì, o meglio, quasi.

Il traguardo: da “Design system Italia”​ a “Design system .italia”

Ci siamo accorti che, in realtà, il nome del design system si trovava davanti ai nostri occhi fin dall’inizio. È sempre stato presente in ogni riferimento all’ecosistema digitale di cui il design system fa parte: nelle estensioni degli url designers.italia.it e developers.italia.it, tra gli altri. Eccolo, allora, il nome tanto atteso: Design system .italia, preceduto dal punto e con l’iniziale minuscola, segno inconfondibile della sua unicità e della sua natura digitale. Il suo omen è nella coerenza del sistema che contribuisce a creare: è l’idea stessa che il Paese sappia convergere per creare prodotti e servizi di qualità, nonostante le risorse limitate. E che questa missione conti più di ogni ornamento narrativo, specialmente nel servizio pubblico.

Scopri come usare Design system .italia
Scopri come contribuire a Design system .italia

Copertina: rielaborazione di un’immagine di Hans Eiskonen su Unsplash

Verso Design system .italia: come è nato il nome del design system del Paese was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Il dibattito sull’accessibilità è sempre più cruciale, ma persistono ancora alcuni pregiudizi.

In quest’articolo che suggeriamo, l’autrice parte dal preconcetto spesso diffuso che “un sito accessibile non sarà tanto bello” proprio con l’obiettivo di sfatare il mito che l’accessibilità comprometta l’aspetto visivo ed estetico.

Un sito accessibile va oltre l’individuazione di soluzioni per chi ha limitazioni visive, ma considera anche le disabilità uditive, motorie o cognitive. Include per esempio sottotitoli, tempi di azione adeguati e testi chiari, ed altri aspetti non legati all’estetica.

L’accessibilità migliora l’esperienza per tutte le persone, non solo per coloro che presentano disabilità temporanee o permanenti. È un segno di rispetto e empatia per chi utilizza il sito e rappresenta spesso anche una buona strategia di marketing.

Ma è possibile unire accessibilità e attrattività? La risposta è sì.

Tanti sono gli aspetti su quali ci si deve concentrare per progettare un sito accessibile, a partire dall’uso del colore e contrasto per favorire l’accesso a diverse tipologie di persone, la scelta del font e della dimensione del testo, per garantire la leggibilità. E ancora: esaminare l’organizzazione delle sezioni (heading) per una migliore comprensione e navigazione; affrontare l’accessibilità delle immagini, icone e contenuti multimediali con suggerimenti per alt-text e descrizioni; evidenziare il focus per utenti che navigano via tastiera. Tutti questi aspetti sono inclusi e descritti nello standard WCAG, appena giunto alla versione 2.2 e considerato obbligatorio dalla normativa italiana nella versione 2.1.

Nella progettazione, è essenziale rendere accessibile un sito sin dall’inizio, seguendo il principio “by design”. Dobbiamo evitare di affrontare questa sfida solo alla fine e abbracciare un approccio che la ponga al centro del processo creativo fin dall’inizio.

È quello che abbiamo provato a fare nel grande lavoro di aggiornamento del design system del Paese, cercando di garantire un accesso equo e inclusivo a tutta la cittadinanza attraverso linee guida chiare e pratiche per la creazione di siti web accessibili.

Approfondisci in quest’articolo alcuni spunti per rendere un sito accessibile e bello:

“Un sito accessibile non sarà tanto bello”… davvero?!

Accessibilità: il bello del design inclusivo was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Daniele Tabellini del Dipartimento per la trasformazione digitale
Fabrizio Caccavello di AGID - Agenzia per l'Italia Digitale

Caselle di testo, spunte, pulsanti, menù a tendina: a prima vista un form, una scheda da compilare online, è quanto di più elementare il web possa offrire. Eppure nel contesto della trasformazione digitale, in particolare nella progettazione e nello sviluppo di servizi pubblici digitali, i componenti dell’interfaccia digitale che permettono di costruire moduli per lo scambio di informazioni tra utente e Pubblica Amministrazione svolgono una funzione fondamentale: abilitano esperienze di cittadinanza, ovvero consentono alle persone di esercitare i propri diritti e adempiere ai propri doveri completamente online, senza alcuna preclusione.

L’accessibilità è prima di tutto una questione di attenzione: al significato delle scelte, ai dettagli tecnologici, ma anche e soprattutto agli altri, alle persone e ai loro bisogni. In quest’ottica, un progetto digitale accessibile è un progetto digitale di qualità, un progetto “fatto bene”. Ed è per questo che, negli ultimi mesi, per tornare ai form ad esempio, nell’aggiornamento del design system del Paese sono state fatte scelte tecniche che favoriscono l’utilizzo di codice markup HTML semantico standard, anziché sovrascrivere i componenti con oggetti più “eleganti”, al solo scopo decorativo. Questo per garantire che le interfacce, che sono tra le più importanti per l’interazione con i servizi digitali, siano il più possibile compatibili con qualunque ambiente, e con il maggior numero di casi d’uso.

Ma si tratta solo di un dettaglio dell’approccio e di quanto realizzato nei mesi scorsi: come, e soprattutto perché, siamo arrivati fino a qui? E che direzione abbiamo intrapreso? Quello che segue è il racconto di una parte dell’avventura, iniziata a dicembre 2021, dal Dipartimento per la trasformazione digitale e AgID per aggiornare il design system del Paese. Un’iniziativa che mira a ottimizzare le risorse digitali messe a disposizione dei cittadini da parte della Pubblica Amministrazione, rendendole semplici, accessibili e inclusive.

Indice dei contenuti

• Progettare interfacce è un atto di responsabilità
• Dieci punti per fare meglio
• Il futuro appartiene alle persone
• Il futuro è una questione culturale

Progettare interfacce è un atto di responsabilità

Progettare e sviluppare interfacce digitali significa decidere continuamente chi includere, o escludere, dall’esperienza d’uso e fruizione, a seconda delle proprie caratteristiche, conoscenze, capacità o condizioni di disabilità, temporanee o meno. Nel caso di servizi pubblici digitali, è una scelta che porta con sé una grande responsabilità: tutte le cittadine e 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. Non solo perché lo dicono le norme sull’accessibilità, le linee guida o perché ci sono tecniche e tecnologie che lo permettono.

L’aggiornamento del design system del Paese, uno strumento open, aperto, sia come codice sorgente sia come progetto, ha così l’obiettivo di aiutare la Pubblica Amministrazione italiana a soddisfare i requisiti normativi, ma soprattutto a progettare e sviluppare interfacce ed esperienze d’uso dei servizi pubblici digitali coerenti e inclusive, su una pluralità di dispositivi. In una parola a realizzare progetti di qualità.

Ma cosa si intende quando parliamo di qualità?

“La Qualità… sappiamo cos’è, eppure non lo sappiamo. Questo è contraddittorio. Alcune cose sono meglio di altre cioè hanno più Qualità. Ma quando provi a dire in cosa consiste la Qualità astraendo dalle cose che la posseggono, paff, le parole ti sfuggono di mano. Ma se nessuno sa cos’è, ai fini pratici non esiste per niente. Invece esiste eccome. Su cos’altro sono basati i voti, se no? Perché mai la gente pagherebbe una fortuna per certe cose, e ne getterebbe altre nella spazzatura? Ovviamente alcune cose sono meglio di altre… Ma in cosa consiste il “meglio”?

— Lo zen e l’arte della manutenzione della motocicletta, Robert M. Pirsig

L’accessibilità è un tema di cultura del fare, e fare bene. Non è solo considerare l’accessibilità tra le priorità progettuali, ma “fare”, perché è solo così che si scoprono le necessità reali e i compromessi necessari della qualità manifesta di cui parla Robert Pirsig. È il cambio culturale che stiamo cercando di affermare: non ratificare a valle uno stato di conformità, ma fare accessibile. Semplificare, togliere un passaggio, partire da soluzioni già validate (by default) che possano essere curate nel corso di un progetto (by design), per poi scoprire, paradossalmente, che si tratta di opzioni economiche ed efficaci.

Dieci punti per fare meglio

Per definire cosa sia la qualità, che cosa voglia dire “fatto bene” nel contesto di oltre 22.000 enti pubblici, in particolar modo sul tema accessibilità, il Dipartimento per la trasformazione digitale e AgID, supportati dai progetti Designers Italia e Developers Italia, oltre che da un fornitore tecnico ad hoc, hanno definito una serie di principi, un’agenda in 10 punti, per collegare l’ideale con il pratico. Principi all’interno dei quali il design system del Paese si colloca in maniera importante e trasversale.

1. Fatto bene guarda oltre l’oggi

Se noi prendessimo un sito internet accessibile nel ‘95/’96 (ovvero rispetto ai pochi standard disponibili all’epoca), probabilmente ancora oggi sarebbe accessibile. Ecco perché bisogna fare bene, e fare accessibile, perché significa progettare servizi pubblici digitali pronti per il futuro.

Progettando il sito innovazione.gov.it, ad esempio, abbiamo provato a prevenire criticità futuribili di accessibilità, fin dai requisiti del progetto. Un’attenzione che ci ha permesso di approfondire l’esperienza d’uso della redazione che ne avrebbe curato i contenuti, e scegliere quindi di predisporre automatismi, come quello a supporto dell’inserimento corretto dei collegamenti esterni (poche righe di codice), che contribuissero ad aumentare accessibilità e qualità generale del progetto nel tempo.

2. Fatto bene è by design e by default

Il tema accessibilità non può rispondere solo a meri, anche se necessari, adempimenti burocratici. Dall’inizio e per tutte le fasi del progetto se ne deve tener conto, by design: dalla raccolta requisiti al progetto di contenuti e dell’esperienza utente, dalla prototipazione e sviluppo software fino all’uso, alla validazione e alla manutenzione, e per tutti i profili coinvolti.

E ogni fase del progetto deve avere i suoi automatismi predefiniti, by default: è importante l’uso di kit, componenti, template, framework, documentazione, come le risorse messe già a disposizione grazie al design system del Paese, che permetta di risparmiare tempo e soldi pubblici, partendo con delle componenti già accessibili.

L’accessibilità costa? Aspettare segnalazioni e sanzioni per correggere progetti in corsa, oppure ampiamente conclusi, è sicuramente più oneroso per una Pubblica Amministrazione, mentre fare le cose bene è un investimento che si ripaga da solo nel breve e medio periodo. “Fare accessibile” deve essere il mantra della PA e dei suoi fornitori, sulla falsariga del principio che si applica alla sicurezza e alla privacy, altri due temi della progettazione dei servizi digitali da affrontare by design e by default.

3. Fatto bene è open e partecipazione

Mettere attenzione nel progettare per il pubblico significa prima di tutto aprirsi: ricerca e ascolto dei bisogni dell’utente, ma anche sviluppo open source e licenze aperte, open data, open design, apertura alla partecipazione e ai feedback.

Soldi pubblici, codice e progetto pubblico.

Non solo codice pubblico, come chiede ad esempio la campagna omonima della FSFE (Free Software Foundation Europe), e come portato avanti da anni nella Pubblica Amministrazione con il Catalogo e le linee guida sul riuso e sulle licenze dal progetto Developers Italia; non solo codice pubblico, dicevamo, ma anche iniziare a porsi il problema di come nel mondo del design, del progetto, si debba fare open design e partecipazione con modalità più strutturali.

Il concetto e le strategie dell’accessibilità nascono nell’organizzazione internazionale W3C (World Wide Web Consortium), che stabilisce le regole tecniche con cui si fanno i prodotti accessibili. Il processo di lavoro del W3C è un ottimo esempio di open by default, un processo che prevede il coinvolgimento di gruppi di lavoro eterogenei e contributori esterni, e che è reso possibile solo grazie alla partecipazione e al miglioramento continuo. Non c’è un punto di arrivo ultimo, se non ideale, ma un processo in divenire, iterazione dopo iterazione, aprendo a cercare feedback e contributi, verso il meglio.

La scelta di usare strumenti aperti e collaborativi per l’aggiornamento del design system del Paese va esattamente in questa direzione: repository GitHub per le lavorazioni di sviluppo, e rilasci delle versioni intermedie di lavorazione dei kit di progettazione interfaccia, per cercare commenti, segnalazioni e contributi. Nelle prossime settimane saranno inoltre rilasciati su Designers Italia diversi altri strumenti di questo aggiornamento: documenti di analisi, liste di cose da fare, censimenti e report che vogliamo far diventare patrimonio della community.

4. Fatto bene è a norma

L’Italia è all’avanguardia rispetto alla normativa sull’accessibilità, la Legge n. 4/2004 fu promulgata quando a livello europeo l’accessibilità era un tema ancora poco rilevante, e il recente European Accessibility Act non era nei sogni dei legislatori. Gli aggiornamenti successivi, così come le linee guida sull’accessibilità degli strumenti informatici, messe a disposizione da AgID rispetto alla Direttiva UE 2016/2012, sono i riferimenti normativi da tener presenti quando si parla di accessibilità.

Il livello di conformità richiesto per i siti della Pubblica Amministrazione italiana, dalla norma tecnica europea armonizzata UNI EN 301 549, corrisponde ai livelli “A” e “AA” della W3C Recommendation WCAG 2.1. La specifica WCAG 2.1 è disponibile in lingua italiana.

Ma la normativa sull’accessibilità, con il Decreto Legge 76/2020, è stata estesa anche ai soggetti privati che offrono servizi al pubblico attraverso siti web o applicazioni mobili e che abbiano un fatturato medio superiore a cinquecento milioni di euro negli ultimi tre anni di attività. Si è voluto insomma anticipare alle grandi organizzazioni private il percorso verso l’accessibilità che comunque verrà attivato per tutti i soggetti privati con l’European Accessibility Act a partire dal 2025.

Sono inoltre prossime alla pubblicazione anche le nuove linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione, previste ai sensi dell’art. 53 del CAD (Codice Amministrazione Digitale), dove ad esempio i concetti di by default e by design saranno ben evidenti. Contestualmente alla loro uscita verrà rilasciato un corposo “Manuale operativo di design”, tramite Designers Italia, con casi d’uso e indicazioni a supporto.

5. Fatto bene è aiutato dal design system del Paese

Il design system del Paese è un insieme di principi, risorse e «pezzi già pronti», pensato per progettare e sviluppare esperienze utente, di cittadinanza. A parità di qualità, grazie al riuso e alla condivisione di buone pratiche, è possibile anche raggiungere l’obiettivo del minore costo. Da dicembre 2021 stiamo aggiornando questa risorsa dalle fondamenta, in termini tecnologici e di accessibilità, ma anche di visione e gestione. Abbiamo infatti affiancato al cuore delle attività pratiche una serie di attività di più alto livello, come l’inizio di un’articolata ricerca utente su utilizzatori e contributori, e una pianificazione di epiche e obiettivi di medio-lungo periodo.

Il design system del Paese è oggi composto da un kit per progettare interfacce (kit UI), un kit per sviluppare interfacce (il framework Bootstrap Italia in primis) e un insieme di modelli standard per progettare e realizzare siti web e servizi digitali per diverse tipologie di Enti. Queste risorse aggiornate, man mano che le nuove versioni diventeranno stabili nelle prossime settimane, saranno messe a disposizione di tutti tramite il sito web Designers Italia, che ci auspichiamo ospiti presto, come riferimento ufficiale, la documentazione di tutto il design system del Paese: dai principi al design, dallo sviluppo alle indicazioni sull’accessibilità, dai componenti ai pattern validati con gli utenti.

6. Fatto bene è immaginato con il kit UI

Il kit per la progettazione di interfacce del design system del Paese lo abbiamo ricostruito da zero usando le ultime tecnologie disponibili e in coordinamento con il kit di sviluppo, con un occhio attento al tema open design. Fin dai primi rilasci ha indicazioni di accessibilità utili ai designer per comprendere le caratteristiche legate alla specificità della prototipazione, come ad esempio l’uso dei colori. Stiamo anche immaginando di integrare strumenti per favorire l’utilizzo della semantica corretta degli oggetti e per etichettare i mockup.

Questa nuova versione, costruita utilizzando Figma e cercando di sfruttare tutte le potenzialità di collaborazione e automazione, ha numeri importanti: si tratta di oltre 600 componenti, comprese le varianti, divisi nelle tre macrocategorie foundations (fondamenta intese per esempio come griglie, tipografia e icone), components (componenti intesi come “pezzi” dell’interfaccia come pulsanti, liste e testata) e forms (tutti i componenti utili allo sviluppo di moduli).

Un occhio di riguardo è stato messo nel sincronizzare tutti i componenti con i kit di sviluppo, per avere prototipi più realistici e per semplificare il passaggio agli sviluppatori. In prospettiva, e in un’ottica open, è previsto che avvengano rilasci interoperabili verso altri strumenti, come Sketch o Adobe XD, con esportazioni sulla repository GitHub dedicata.

Una parte importante delle lavorazioni è stata dedicata all’integrazione di design token: piccoli elementi “di verità” utili a rappresentare decisioni di stile applicabili in modo coerente tra diversi progetti, framework e strumenti — un esempio di design token: color-blue-a06: #0066cc (valore) e color-primary:color-blu-a06 (decisione) — , che nelle prossime versioni di tutte le risorse afferenti al design system del Paese, siano di design o di sviluppo, ci auspichiamo rendano tutto più coerente, più facilmente aggiornabile, migliorabile e scalabile. I design token rispondono inoltre alle esigenze di personalizzazione emerse dalla ricerca.

Si tratta di un lavoro aperto, ed è possibile partecipare alle attività in corso, commentando o provando l’ultima versione rilasciata nella community Figma; vi invitiamo ad approfondire alcune caratteristiche guardando il video del Community lab dedicato; o seguire gli aggiornamenti sui canali e sul piano attività di Designers Italia, dove scoprire in anteprima quando avverranno i primi rilasci di kit e design token su repository GitHub dedicate, in special modo se interessati a provarli su altri strumenti come Sketch o Adobe XD.

7. Fatto bene è realizzato con Bootstrap Italia

Bootstrap Italia è il kit per lo sviluppo di interfacce del design system del Paese. A distanza di anni, da quando fu rilasciata una prima versione, è evidente quanto sia stato importante pensare a un framework unico di sviluppo, basato sulle esigenze della Pubblica Amministrazione. Fu realizzato con quello che allora era il riferimento, il più utilizzato ma anche il più vicino ai requisiti di accessibilità: Bootstrap. E oggi, dopo aver inizialmente tolto la ruggine all’ultima versione basata su Bootstrap 4, anche integrando molti contributi della community, è in dirittura d’arrivo la nuova versione 2.0 portata su Bootstrap 5.

In questa nuova versione, oltre ad ereditare tutte le nuove caratteristiche di Bootstrap 5, Bootstrap Italia è ottimizzato per molti aspetti che riguardano specificatamente la Pubblica Amministrazione e l’accessibilità. Abbiamo validato, o per meglio dire, stiamo validando e continueremo a migliorare ogni componente, cercando anche di fornire documentazione con indicazioni per l’implementazione laddove necessario.

Durante queste lavorazioni sono state fatte scelte di rottura, consapevoli che la semplicità sia un valore, che sia più facile cioè da manutenere e realizzare, come il dettaglio con cui si apre l’articolo sull’usare markup HTML semantico standard per molti componenti dei form o, altro esempio interessante, come scegliere di integrare la soluzione dei colleghi inglesi Accessible autocomplete, un plugin che permette di cercare e scegliere risposte da una lunga lista, progettato e sviluppato per l’accessibilità.

Bootstrap Italia 2.0 è stato progettato per essere scalabile come richiesto dalle risultanze della ricerca: basti citare come esempi l’uso di Javascript puro per tutte le funzionalità, e l’integrazione di Rollup, che permette di integrare nel proprio progetto solo le parti necessarie del framework, con vantaggi di peso e velocità come si può approfondire in questo articolo. Anche in questo caso si tratta di un lavoro aperto, e vi invitiamo a partecipare ai lavori in corso provando o contribuendo all’ultima versione rilasciata di Bootstrap Italia 2.0 su GitHub.

8. Fatto bene segue modelli standard

La progettazione di esperienze digitali semplici ed efficaci richiede tempo, risorse e molta ricerca. I modelli di siti e servizi digitali per gli enti (oggi scuole e Comuni) permettono di rispondere ai bisogni dei cittadini in modo rapido e a minor costo, sfruttando flussi e funzionalità validate dalla ricerca.

I modelli proposti da Designers Italia, comprendono l’architettura dell’informazione, i template HTML e i temi per CMS (Content Management System), su cui sono stati effettuati in questi mesi importanti lavori, anche per migliorarne l’accessibilità, corredati da una serie di guide pratiche a supporto. I modelli rappresentano precisamente il concetto della creazione di servizi digitali accessibili by default: partire con un intero modello validato e radicato nella ricerca utente.

I modelli per le scuole e i Comuni sono oggetto della misura 1.4.1 del PNRR “Esperienza dei servizi pubblici”. Seguire un modello non significa creare siti uniformi, ma coerenti. Il modello infatti nasce nel rispetto delle esigenze del cittadino e delle necessità di flessibilità degli enti, in questo ordine. Gli enti possono adattare il modello al contesto specifico rispettando comunque i criteri di conformità.

9. Fatto bene a volte… non basta

I «pezzi» del design system del Paese non sono tutto: l’accessibilità è principalmente una questione semantica, di significato degli elementi e dei comportamenti. L’utilizzo di componenti accessibili non rende automaticamente un applicativo accessibile, tuttavia sono un aiuto fondamentale per compiere by default un processo nel modo più ottimale possibile.

Il percorso costruito attraverso il design system è proprio incentrato sul concetto di accessibilità by default. Per ogni attività devono essere utilizzabili elementi, strutture, procedure, che sono già passati attraverso i necessari processi di validazione (documentazione, mockup, framework, template, ecc). Al termine del processo le attività di verifica e di ottimizzazione potranno essere più limitate, per poi liberare risorse per la gestione di casi più complessi o attivare supporti più innovativi.

10. Fatto bene ha bisogno di test e feedback

Nei prossimi anni ci aspettano molte sfide per scalare, dare governance chiara, rendere sostenibile e curare con efficacia il design system del Paese. Per raggiungere questo obiettivo abbiamo bisogno di tutta la community: l’ambiente in cui si muovono e vivono le persone non è quello ideale di utilizzo di un applicativo. Tutti noi utilizziamo applicativi in ambienti i più strani, mentre camminiamo, con il gelato in mano, con tecnologie assistive, magari con tecnologie assistive che oggi neanche immaginiamo.

Durante la partecipazione agli Accessibility Days, ci è stato ricordato il motto dei diritti delle persone con condizioni di disabilità: “Niente su di Noi, senza di Noi”. In autunno, proprio con l’aiuto del team degli Accessibility Days, ci siamo ripromessi di creare occasioni di confronto e test di usabilità, con particolare attenzione all’accessibilità, per raccogliere dati e migliorare piattaforme, siti e servizi pubblici digitali che utilizzano il design system del Paese. Con l’auspicio di riuscirci, e che diventi un’abitudine, per migliorare continuamente, insieme, con partecipazione e responsabilità.

Il futuro appartiene alle persone

Il design system del Paese è un progetto di interesse pubblico, aperto e partecipato. Ci piace pensare che questo progetto appartenga soprattutto a voi che state leggendo, che possiate farlo vostro, ognuno con le proprie competenze e livello di coinvolgimento, nella Pubblica Amministrazione centrale e sul territorio, e nei suoi fornitori. Partecipando alle lavorazioni, segnalando o proponendo miglioramenti, provandone le risorse e partecipando a test e presentazioni, rilasciando soluzioni alternative o analisi e revisioni, allo stesso modo pubbliche e open con le licenze aperte corrette, facendo domande e aiutandoci a diffondere consapevolezza sul progettare e sviluppare interfacce di cittadinanza di qualità, a tutti i livelli.

Il futuro è una questione culturale

C’è ancora una domanda, però, che rimane forse irrisolta: chi sta insegnando a “fare accessibile” alla prossima generazione di designer e sviluppatori? Non vorremmo aprire un piccolo vaso di Pandora, ma nelle Università italiane dedicate all’ITC, alle discipline informatiche, o al design, quanti e quali corsi sono dedicati all’accessibilità? Siamo sicuri che in Italia ci siano molte eccellenze, ma la domanda, e la questione culturale che porta con sé, rimane d’importanza capitale: nei prossimi mesi troviamo un’occasione per parlarne, valorizzare esperienze virtuose e rilanciare?

Progettare con qualità: l’accessibilità al centro del design system del Paese was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Iniziata una nuova fase di consolidamento del design system a disposizione delle Pubbliche Amministrazioni italiane

Revisione in vista per Designers Italia: a tre anni dalla presentazione ufficiale, anche per rispondere all’accelerazione dei processi digitali a seguito della pandemia di Covid-19, la piattaforma nata con l’obiettivo di diventare il punto di riferimento per la progettazione dei servizi digitali della Pubblica Amministrazione intende consolidare l’efficacia della propria azione di supporto. Una verifica in linea con i principi del design thinking e del miglioramento continuo dell’offerta di servizi, pensata per mettere alla prova quanto realizzato da Designers negli anni e per capire, con uno sguardo rivolto al futuro, le necessità delle PA di fronte alle sfide della trasformazione digitale.

Dopo una serie di workshop interni, l’esperienza d’uso, in particolare il grado di soddisfazione rispetto alle risorse fornite dal sito di Designers Italia e dai singoli strumenti per la progettazione di servizi digitali, è al centro dell’analisi che si articolerà nelle prossime settimane. Il piano di ricerca, costruito secondo quanto previsto dalle Linee guida di design sulla user research grazie all’utilizzo dei kit dedicati alle user interviews, è composto con una modalità che intreccia ricerca primaria e secondaria, alle quali si affianca un approccio quanti-qualitativo.

Da un lato, verranno quindi messe in campo una serie di attività per comprendere l’esperienza degli attori coinvolti (ricerca primaria), da comparare con un benchmark delle migliori pratiche internazionali (ricerca secondaria); dall’altro i dati raccolti saranno supportati da approfondimenti realizzati tramite delle interviste con gli utenti. L’indagine verrà così suddivisa in base a tre linee d’azione principali:

1. mappare i soggetti che hanno utilizzato le risorse messe a disposizione da Designers Italia;
2. esplorare la community di Designers organizzata sul canale Slack e su Forum Italia;
3. analizzare l’ecosistema di attori coinvolti nello sviluppo di servizi digitali per la PA.

Nel primo caso, l’obiettivo è verificare l’efficacia degli strumenti offerti e la fruibilità dell’intera “cassetta degli attrezzi” così come proposta nel sito. Vorremmo infatti essere sicuri di continuare a rispondere in maniera efficace ai bisogni delle Pubbliche Amministrazioni, cercando il più possibile di adattarsi a esigenze che possono rivelarsi peculiari e, allo stesso tempo, di rimanere coerenti con l’impostazione generale del design system, che risulta, in ogni caso, in continua evoluzione.

Per quanto riguarda la community, invece, la ricerca punta a comprendere in maniera approfondita la composizione dei frequentatori abituali e di quelli occasionali dei canali di contatto, per migliorare così la qualità delle risposte e l’engagement del pubblico. Slack e Forum Italia sono di fatto dei luoghi di scambio privilegiati per Designers Italia e Developers Italia, che permettono anche di agire attivamente in funzione di richieste specifiche, oltre che rappresentare, grazie alla propria capillarità, un veicolo fondamentale per promuovere senso di appartenenza e cultura di progetto. Un processo orizzontale, tipico delle piattaforme, dove condividere una finalità comune: mettere i cittadini al centro dei processi di digitalizzazione del Paese.

Il terzo filone di ricerca si concentra, infine, sull’analisi di contesto, certi della necessità, in un ambito come quello italiano, formato da oltre 22 mila Amministrazioni differenti per natura e ampiezza, di agire in un’ottica sistemica per superare la frammentazione delle soluzioni singolari, in grado magari di risolvere esigenze immediate, ma che sul medio/lungo periodo producono come conseguenza un aumento dell’entropia. Non esattamente un risultato ottimale, di fronte alla possibilità, grazie a un’azione di sistema, di generare economie di scala, semplificare, favorire l’interoperabilità (la condivisione) dei servizi a livello locale e nazionale.

Ai dati quantitativi da raccogliere con la ricerca primaria, Designers Italia intende inoltre affiancare degli approfondimenti qualitativi dedicati in particolare alla community, insieme a un’analisi sistematica (benchmark) dei casi di successo e delle migliori pratiche di progettazione dei servizi per la Pubblica Amministrazione. Letteratura sul design dei servizi pubblici, raccolta dati, sondaggi e interviste saranno la base dalla quale ripartire, per verificare lo stato dell’arte di Designers Italia e soprattutto per cogliere tutte le opportunità di strutturare un’azione sempre più efficace.

Mettersi in gioco, infatti, è il nostro modo per farsi trovare pronti.

• Partecipa alla trasformazione digitale della PA, iscriviti a
  - Slack ed entra nei canali dedicati al design
  - Forum e condividi la tua esperienza
• Scopri gli strumenti messi a disposizione da Designers Italia:
  Il kit per i Comuni
  Il kit per le scuole
  A/B test
  Co-design workshop
  Content kit
  Ecosystem map
  Information architecture
  Personas
  Search engine optimization
  UI kit
  Usability test
  User interviews
  User journey
  User stories
  Web analytics
  Web development
  Wireframe kit
• Hai ulteriori domande? Scrivici all’indirizzo contatti@designers.italia.it

Sondaggi e interviste sono state sviluppate nel pieno rispetto della privacy. Al termine del questionario, ai partecipanti che intendono continuare a fare parte del nostro progetto di ricerca saranno fornite le indicazioni sulle modalità di contatto e sul trattamento dei dati personali. Per la raccolta dei contributi viene utilizzata la piattaforma EUSurvey, un’applicazione sviluppata dalla Commissione Europea alla quale si rimanda per ogni informativa sulla privacy. I cookie della piattaforma EUSurvey vengono cancellati al termine della sessione. Le informazioni fornite saranno comunque eliminate dalla piattaforma alla scadenza del termine per l’invio dei singoli contributi.

Lavori in corso: Designers Italia si mette in gioco e riparte dalla ricerca was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Abbiamo usato i kit di Designers Italia per progettare un modello di sito comunale a misura di cittadino. Ecco come

di Daniele Tabellini e Giulio Lucci

Il Team Digitale ha ideato il progetto di creazione di un modello per i siti e i servizi digitali dei Comuni italiani con lo scopo di creare uno standard di qualità elevata, favorire le sinergie tra Comuni, ridurre gli sprechi e liberare risorse da dedicare a progetti di innovazione e a non reinventare ogni volta la ruota. Per gestire il progetto, ha utilizzato la piattaforma e la community Designers Italia, nata proprio per favorire l’introduzione di metodi di service design nei progetti della Pubblica Amministrazione italiana

Un modello per i siti dei Comuni italiani

Il progetto

Un progetto per creare un modello per i siti dei Comuni non poteva che vivere dentro la realtà dei Comuni italiani, e così è stato. In particolare, ha mosso i primi passi partendo dal progetto del sito del Comune di Firenze, grazie al lavoro di Gianluca Vannuccini, Barbara Tonetto e Leonardo Ricci; e ha preso forma nel Comune di Cagliari, il primo Comune italiano che sta realizzando quanto abbiamo progettato, e nel farlo ci restituisce consigli e indicazioni per migliorarlo grazie al lavoro di Riccardo Castrignanò, Antonio Pascalis e Francesco Sogos. In mezzo, tanto lavoro di analisi, interviste e progettazione.

Il progetto ha avuto un team di designer composto da Giulio Lucci, Daniele Tabellini, Roberta Tassi, Laura Toffetti e Lorenzo Fabbri, e ha beneficiato del wireframe kit, dello UI kit e del webtoolkit di Designers Italia, seguito tra gli altri da Francesco Zaia e Daniela De Blasis. Mentre progettavamo i siti dei Comuni abbiamo potuto condividere esperienze, metodo di lavoro e risorse con un progetto simile di Designers Italia, ma dedicato alle scuole: grazie quindi a Gianni Sinni (e all’agenzia LCD) e a Alessandro Pollini (e all’agenzia BSD) per aver indirettamente supportato anche il progetto dedicato ai Comuni.

Infine, abbiamo scambiato idee e condiviso risultati di ricerca con la Regione Veneto, che ha un progetto per standardizzare alcuni dei servizi comunali del Veneto diretto da Antonino Mola.

Il metodo

Abbiamo testato con mano l’utilità di Designers Italia: da un lato, molte delle persone che hanno lavorato al progetto si sono conosciute sulla community di Designers Italia; dall’altro, la disponibilità dei kit di design ha permesso di lavorare velocemente, parlando da subito la stessa lingua.

Grazie all’utilizzo di collaboration tool e dei kit di design è stato possibile ridurre la curva di apprendimento e accorciare i tempi di fine tuning tra membri del team che in molti casi non si conoscevano e seguivano il progetto da zone del Paese diverse.

Abbiamo utilizzato strumenti come il forum e Slack per favorire una gestione agile, “iterare” velocemente e coinvolgere persone in modo estremamente flessibile. Proprio da Slack, ad esempio, ha preso il via lo scambio di informazioni e la collaborazione con il Comune di Cagliari, prima sul canale pubblico #design-service su developers.italia.it poi successivamente nel canale dedicato al progetto.

Grazie a Sketch e Invision, e alla sincronizzazione con GitHub (anche via Plant) delle librerie di componenti messe a disposizione da Designers Italia, siamo riusciti a gestire un’attività di prototipazione molto ampia e articolata in tempi rapidi, e allo stesso tempo ad arricchire le stesse librerie.

Questo metodo di lavoro si sta diffondendo in una crescente comunità di designer, che riesce così a lavorare in modo più fluido e integrato, portando quel contributo che finora mancava a molti progetti della Pubblica Amministrazione.
Abbiamo toccato con mano come gli strumenti di collaborazione abbiano favorito la condivisione di idee e standard d’eccellenza, permettendoci di arrivare con più facilità a soluzioni efficaci.

Le fasi del progetto

La ricerca

Per capire a fondo il contesto e individuare le soluzioni più efficaci è stato fondamentale impostare una solida base di ricerca con cui abbiamo indagato le caratteristiche e i bisogni degli utenti, i benchmark più rilevanti e i processi della PA nella gestione del contenuto.

Ad esempio, i risultati della ricerca etnografica svolta dalla Regione Veneto per il progetto MyPortal ci hanno ispirato nella creazione dei nostri modelli di utente, i personas. Una serie di usability test hanno fatto emergere le aree d’attenzione per l’esperienza utente mentre un benchmark internazionale ci ha aiutato a vedere come altri hanno soddisfatto esigenze simili.

Le interviste agli utenti all’interno delle istituzioni, infine, ci hanno permesso di capire i processi di gestione dei contenuti e i vincoli organizzativi più importanti da tenere in considerazione nel progettare l’architettura e il layout del sito.

Gli scenari d’uso e l’architettura dell’informazione

Abbiamo cominciato mappando le esigenze dei cittadini da un lato e tutti i contenuti disponibili sul sito di un Comune dall’altro. Il nostro obiettivo non era progettare tutte le possibilità per tutti i servizi, quanto creare dei modelli, dei pattern di esperienza utente che fossero semplici, altamente usabili, replicabili e adattabili alla ricchezza di specificità riscontrabile in tutti i Comuni italiani.

Prima di metterci a disegnare schermate abbiamo immaginato l’esperienza d’uso del sito attraverso sei scenari.

Come iscrivo mio figlio all’asilo nido? Che incentivi ho a disposizione per far crescere la mia attività? Cosa succede negli uffici del Comune?

Ogni scenario ci ha permesso di arricchire e dare profondità alla struttura dei contenuti individuando criticità, necessità e potenzialità nel raggiungimento della piena soddisfazione d’uso.

Abbiamo usato il kit di architettura delle informazioni come base nella definizione delle sezioni principali e lo abbiamo arricchito con le peculiarità del progetto. Contributi fondamentali sono stati una lista preliminare di argomenti con cui organizzare i contenuti e la sezione di amministrazione trasparente che si basano sulla logica dei tag. Facendo leva su relazioni flessibili tra le pagine, abbiamo impostato un’architettura modulare, che offre punti d’ingresso differenti adattandosi al percorso di navigazione degli utenti.

I prototipi

Abbiamo lavorato fin da subito su un prototipo interattivo per dialogare con efficacia con i diversi stakeholder e fare test mano a mano che il progetto prendeva forma.

Prima di definire il dettaglio delle singole pagine, è stato importante capire come creare un’esperienza unitaria che integrasse tra loro funzionalità e contenuti eterogenei. Navigare tra le schermate dei wireframe ci ha premesso di condividere e validare i pattern di user experience.

Parallelamente abbiamo costruito un prototipo in alta definizione di una selezione dei layout. Oltre a comunicare visivamente il progetto costituisce un ponte per lo sviluppo del front-end: le schermate, visualizzate come se il sito fosse in produzione, forniscono tutte le indicazioni per declinare lo UI kit su tutto il sito e per estendere e gestire la visualizzazione delle pagine su diversi device.

I risultati

Le soluzioni che abbiamo proposto hanno l’ambizione di migliorare (di un po’ 😏) la vita dei cittadini attraverso soluzioni pragmatiche alle esigenze delle persone.

I servizi al pubblico sono organizzati a partire da esigenze concrete, come iscriversi, pagare o segnalare e sono esposti con una gerarchia che privilegia le informazioni chiave e scende via via verso i dettagli.

I flussi di interazione seguono pattern consolidati, familiari a chiunque già usa uno smartphone, e prevedono l’integrazione di piattaforme abilitanti come Spid e PagoPA.

Il cuore dell’area personale è un centro messaggi da cui essere aggiornati sulle scadenze e sull’evoluzione dei servizi di cui si usufruisce o delle pratiche in corso.

I contenuti sono organizzati prima di tutto pensando agli utenti, seguendo il modello mentale delle persone prima che l’organizzazione interna della Pubblica Amministrazione.

Allo stesso tempo, abbiamo fatto in modo che sia più facile informarsi e capire l’operato del Comune, dando spazio agli uffici che lo compongono e alle partecipate affinché possano comunicare con efficacia le proprie attività. Quest’ultimo aspetto è particolarmente importante per superare la necessità di realizzare un sito tematico, separato da quello istituzionale, per ogni iniziativa.

Infine, la sezione di amministrazione trasparente è integrata al sito e ne sfrutta i contenuti, rendendo più semplice la sua gestione e prevenendo la pubblicazione di informazioni ridondanti o incomplete.

Tutto il materiale prodotto, rilasciato in open source, ha permesso al Comune di Cagliari di avviare velocemente lo sviluppo del nuovo sito istituzionale in un progetto pilota. Un’occasione unica per stabilire una best practice nazionale e contribuire a migliorare il modello a beneficio di tutti i Comuni italiani (e di noi cittadini, designer e non 🚀 ).

Link utili

Discussione sul forum

Documentazione e prototipi

Un progetto non comune: il modello per il sito web dei Comuni was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

“Nelle more di” significa più o meno “in attesa di” ed è un termine molto usato nella Pubblica Amministrazione. Perché usarlo, visto che molte persone non ne conoscono il significato?

“Brif braf”, disse il primo. “Braf brof”, rispose il secondo. Così ha inizio la storia dei due bambini che avevano inventato la propria lingua “per poter parlare tra di loro senza far capire nulla agli altri”. Anche la Pubblica Amministrazione ha un proprio linguaggio, nato forse per lo stesso motivo, ma purtroppo molto meno divertente di quello inventato dai due bambini della favola di Gianni Rodari. La semplificazione del linguaggio è un valore in sé, perché introduce un rapporto più trasparente e diretto con il cittadino e questa direzione è stata sottolineata da diverse iniziative relative alla semplificazione amministrativa in Italia e all’estero, come il Plain Writing Act americano del 2010.

Ma c’è di più: un linguaggio semplice è anche un ingrediente indispensabile per rendere i servizi della Pubblica Amministrazione più efficaci e inclusivi. Questa è la prospettiva che abbiamo adottato all’interno del Team per la Trasformazione Digitale attraverso progetti come Docs Italia e Designers Italia.

Di recente, Designers Italia si è arricchito di un kit specifico dedicato alla progettazione, gestione e produzione di contenuti per i servizi della Pubblica Amministrazione. Il kit per i contenuti contiene alcuni strumenti operativi utili a tutta la Pubblica Amministrazione:

• una guida al linguaggio della Pubblica Amministrazione (criteri di inclusione, struttura dei contenuti, stile, lessico, tono di voce)
• template pronti per i documenti;
• strumenti per avviare processi di analisi, revisione e miglioramento, modelli per gestire processi operativi come la migrazione dei contenuti da un sito a un altro;
• revisione collaborativa dei contenuti;
• test con i cittadini per verificare la semplicità del linguaggio;
• uno strumento di analisi dei bisogni informativi del cittadino nel suo percorso di fruizione di un servizio (content journey).

Le parole sono importanti

Il kit è corredato da un set di linee guida, recentemente aggiornate

Linguaggio

Semplificare il linguaggio, quattro priorità

Complessità, assenza di standard, scarsa cura e burocratese: i problemi del linguaggio amministrativo sono noti a tutti e presenti nella maggior parte dei siti della Pubblica Amministrazione. Ma quali sono le priorità su cui lavorare per cambiare le cose?

1. Documenti semplici

Gran parte dei documenti (determine, circolari, atti, documenti di progetto) della Pubblica Amministrazione vengono scritti come se fossero ad uso interno, mentre in realtà quasi sempre (per dovere o per necessità) vengono poi pubblicati sul web. E allora perché non scriverli da subito seguendo le regole del web in modo da renderli più semplici e accessibili? Per questo motivo abbiamo creato dei template per la scrittura dei documenti, una guida linguaggio, delle nuove linee guida e anche una piattaforma per pubblicare documenti amministrativi (Docs Italia). Investiamo risorse non solo nella gestione e conservazione dei documenti, ma anche nella loro semplificazione

Versione alpha del nuovo Docs Italia, la piattaforma per i documenti dei progetti della Pubblica Amministrazione

Leggi anche Why GOV.UK content should be published in HTML and not PDF

2. Contenuti facili da trovare
Dobbiamo progettare i contenuti pensando ai bisogni delle persone che ci leggeranno. E dobbiamo creare sistemi che aiutino i cittadini nelle loro ricerche. Abbiamo codificato un modello (pattern) per la ricerca dei contenuti all’interno del wireframe kit di Designers Italia e, seguendo questo pattern, stiamo progettando un motore di ricerca che possa essere un punto di riferimento per la Pubblica Amministrazione. Il motore di ricerca (comprensivo di autocomplete, logiche filtering, criteri di sorting, sistema di tagging) vedrà la sua prima applicazione nel catalogo — in arrivo a settembre — per la ricerca di software open-source della Pubblica Amministrazione, all’interno del sito Developers Italia

Anteprima di un nuovo template standard di motore di ricerca con autocomplete e logica di filtering. Il prototipo verrà introdotto per la prima volta all’interno del sito Developers Italia

3. Standard di organizzazione dei contenuti
Abbiamo bisogno di standard, per evitare la dispersione di energie e la proliferazione di soluzioni di design poco efficaci. E’ possibile individuare standard nell’organizzazione dei contenuti a tre livelli:

• il primo livello è rappresentato da un set di best practice generali, per esempio relative agli standard per la scrittura del titolo e del sommario di una pagina web;
• il secondo è relativo alla tipologia dei contenuti (content type): ad esempio è possibile creare un modello di pagina per strutturare tutte le informazioni che ti servono quando devi usare un servizio della Pubblica Amministrazione (a cosa serve, a chi è rivolto, cosa devi portare con te, se puoi usufruire del servizio on line oppure solo allo sportello, ecc.). Stiamo codificando questi modelli di organizzazione dei contenuti all’interno del wireframe kit di Designers Italia in modo che tutte le amministrazioni possano seguirli.
• Il terzo livello è relativo alla standardizzazione dell’architettura dell’informazione per le principali tipologie di siti della Pubblica Amministrazione. Stiamo affrontando questo problema lavorando sulla creazione di modelli per i siti dei Comuni e delle scuole,

Design dei servizi digitali delle scuole

Alcune schermate del concept per creare un modello di siti scolastici

Un modello per i siti dei Comuni basato sul design system di Designers Italia

4. Microcopy, i testi come interfaccia

Il testo che ti aiuta a compilare un form di iscrizione, il bottone che ti invita a registrarti, la frase di benvenuto o il messaggio che ti invita ad approvare nuove norme legali, la notifica sullo smartphone che ti ricorda la scadenza di un pagamento. La classifica dei testi più letti (e più utili) del web viene vinta da quei piccoli testi che accompagnano le interfacce e i sistemi di navigazione (in gergo microcopy). Designers Italia è al lavoro da un lato per offrire i migliori esempi di testi per le interfacce e propone anche degli strumenti per analizzare e semplificare quelli esistenti; dall’altro per sensibilizzare l’intera Amministrazione a migliorare il microcopy dei propri siti web, revisionando e migliorando i testi già pubblicati: il consiglio è di utilizzare strumenti di annotazione on line, che permettono di valutare i testi all’interno del loro reale contesto d’uso e suggerire modifiche. I testi più importanti sono quelli più brevi: iniziamo da quelli per cambiare il linguaggio della Pubblica Amministrazione.

Esempi di microcopy nella versione alpha di uno dei progetti di Designers Italia

Rafforzare il design system della Pubblica Amministrazione

L’approccio che stiamo seguendo è quello di trattare il tema dei contenuti e del linguaggio amministrativo all’interno della progettazione del design system della Pubblica Amministrazione. Il Paese ha bisogno di una cornice, un metodo di lavoro e un set di strumenti organici per progettare i servizi amministrativi e creare standard più elevati per i cittadini: la semplificazione del linguaggio può contribuire in modo significativo a raggiungere questo obiettivo. Questo approccio è coerente con altri progetti internazionali in ambito pubblico.

Nello scorso mese di luglio abbiamo presentato i risultati del nostro progetto, denominato Designers Italia, nell’ambito della International Design in Government Conference di Londra, in un workshop congiunto con i nostri colleghi del Government Digital Service. Nell’ambito dell’incontro abbiamo formulato la proposta di rafforzare la collaborazione internazionale sul tema del design come strumento per creare standard qualitativi più alti e riprogettare i servizi della Pubblica Amministrazione.

Martin Jordan 🌈 on Twitter

Design systems can include: * Design principles * Style guides * Components * Pattern libraries * Design tools * Community forums" -@TimPaul in the joint @DesignersITA & @GDSteam workshop at Intl #GovDesign Conference

Siamo convinti che la creazione di un sistema per la progettazione che comprenda analisi dei bisogni degli utenti, prototipazione, standard per i contenuti e per le interfacce sia la chiave per creare una nuova generazione di servizi pubblici digitali più efficaci e inclusivi. Per arrivare a questo risultato serve la collaborazione di diverse figure professionali e la capacità di lavorare mettendo al centro i cittadini e non quelle degli enti.

Design dell’informazione: lavori in corso was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Nei giorni scorsi abbiamo raccontato il design system di Designers Italia a Londra, all’International Design in Government Conference. Si tratta di una conferenza internazionale che ha raccolto 260 professionisti del design dei servizi pubblici provenienti da 26 Paesi nel mondo. Vi raccontiamo come è andata raccogliendo una piccola serie di tweet e di immagini pubblicate direttamente da chi ha partecipato.

Due giorni dedicati al design dei servizi pubblici digitali

GDS on Twitter

Putting design at the centre of governments across the world. The afternoon workshops at day 2 of the international 🗺️ #govdesign conference are now in full swing with @FutureGov, @HODigital, @inlandDesign, @ParliDigital, @ITdigitalteam, @DWPDigital and @NHSDigital.

La sfida della conferenza era chiara: mettere il design al centro dell’azione dei governi di tutto il mondo.

Per questo nella due giorni di incontri e workshop ci siamo confrontati sull’obiettivo comune di offrire ai cittadini dei servizi sempre più user-centered, progettati mettendo al centro i loro bisogni, disegnati per essere semplici, intuitivi e piacevoli da utilizzare.

Diego Piacentini on Twitter

Proud of @ITdigitalteam presenting in London our work on user centered design for a new generation of digital public services. Thanks @gdsteam for inviting us #GovDesign https://t.co/HxrHgbWrV9

Durante un workshop abbiamo presentato il design system di Designers Italia, raccontando il nostro approccio a questa sfida: utilizzare una community di designer per proporre una nuova generazione di servizi digitali inclusivi ed efficienti.

Martin Jordan 🌈 on Twitter

Design systems can include: * Design principles * Style guides * Components * Pattern libraries * Design tools * Community forums" -@TimPaul in the joint @DesignersITA & @GDSteam workshop at Intl #GovDesign Conference

Lo stesso workshop è stato anche un’occasione per confrontare il nostro lavoro con il design system proposto dal governo inglese. A raccontarcelo è stato Tim Paul del Government Digital Service, l’agenzia che si occupa del digitale nel Regno Unito.

Condivisione, collaborazione

Laura Bordin on Twitter

govdesign An amazing opportunity to meet a huge number of designers working in Governments across the world. We all share a critical mission. Let's continue to share our experience and start to collaborate more! @DesignersITA @teamdigitaleIT @gdsteam

I concetti di condivisione e collaborazione sono stati il filo conduttore di tutti gli eventi in programma durante la conferenza, a cui hanno preso parte decine di designer provenienti da diversi Paesi nel mondo, spesso alle prese con le stesse sfide, gli stessi obbiettivi, gli stessi problemi da superare.

Lou Downe on Twitter

Wow what an epic few days International #govdesign was 🌍💥 I've made a Moment of some of the best tweets. Catch up if you missed it. https://t.co/ctIVfPD0WQ

Forse proprio questo spirito di collaborazione tra professionisti, provenienti da realtà molto diverse tra loro, ha spinto qualcuno — in questo caso Lou Downe, capo del design per il governo inglese — a parlare di “giornate epiche”.

Martin Jordan 🌈 on Twitter

238 amazing photographs from last week's International #GovDesign Conference by the magnificent @grahamhi are up on @gdsteam's Flickr account-have a look and feel free to use all material for blogging and reflecting on the event: 🗺🏛📸 https://t.co/zSz8AeUbUg

Di certo lo stesso spirito di collaborazione ha animato i momenti di pausa, che sono stati sempre pieni di occasioni di confronto e di condivisione di idee e soluzioni…

Marc O'Connor on Twitter

Day 2 of International Design in Gov @stradella and @philjhogg discuss, content strategy as part of service design in government #GovDesign @HMRCdigital

…la conferenza dedicata alla “content strategy come parte del service design dei governi”, che si è tenuta presso l’HM Treasury, ovvero il ministero dell’economia inglese…

Martin Jordan 🌈 on Twitter

My favourite meetup as closing event for Intl #GovDesign Conference: @Gov_Design No. 9 with a special global edition and fantastic talks from @designbyandrew @KaviH @msknee @UllyEnn 🤩

… e il meetup di chiusura, aperto a tutti, in cui sono intervenuti tre esperti del Digital Service degli Stati Uniti e un’esperta dell’Innovation Lab, l’agenzia per la trasformazione digitale dell’Estonia, per raccontare e condividere la loro visione di servizi digitali disegnati intorno agli utenti.

Designers Italia all’International Design in Government Conference, un racconto per tweet was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Negli ultimi sette giorni abbiamo avuto l’occasione di presentare Designers Italia a diverse platee di designer e altri professionisti del digitale, tra Milano e Rimini. Vi vogliamo condividere le esperienze e il confronto che ne è scaturito in un racconto fotografico di questi appuntamenti.

Meet Designers Italia a Milano

Siamo partiti da Milano, all’acquario civico, con Meet Designers Italia: un evento dedicato ai designer e alle agenzie che ha registrato in breve tempo il tutto esaurito. Per noi è stata un’occasione davvero utile per raccontare e raccogliere feedback sul design system su cui stiamo lavorando, confrontandoci direttamente con i professionisti cui è rivolto.

L’incontro è stato anche occasione di parlare di IO, il progetto per un’app dedicata ai servizi pubblici in Italia.

Tra i punti forti dell’incontro, il confronto che è stato davvero utile e pieno di spunti e feedback che abbiamo raccolto tra i professionisti presenti in sala. Un’esperienza per noi molto positiva, tanto che stiamo già pensando di replicare l’evento in un’altra città… ma su questo non vi diciamo altro.

ServDes. 2018

Sempre a Milano, stavolta al Politecnico, abbiamo presentato il design system di Designers Italia a ServDes. 2018, la conferenza internazionale dedicata al service design e all’innovazione.

Anche questo è stato un bel momento di confronto, con un pubblico internazionale e diversi interventi per discutere le nostre proposte per un design basato sugli strumenti collaborativi e sul dialogo tra tecnologia e design.

Designers Italia al Web Marketing Festival

Il bellissimo Palacongressi e una marea di biciclette parcheggiate fuori. Si presenta così il Web Marketing Festival di Rimini, dove da giovedì a sabato abbiamo parlato dei progetti del Team Digitale, di Designers Italia e di Developers Italia.

La particolarità dell’evento, dal nostro punto di vista, è stata la possibilità di presentare e discutere i progetti di Designers Italia e Developers Italia insieme a un pubblico variegato di professionisti del digitale.

Un’esperienza che ci ha confermato ancora una volta che il lavoro che stiamo facendo, come ad esempio le regole per la gestione dei contenuti o i kit sulla user research, non è utile solo per i servizi digitali della Pubblica Amministrazione, ma può essere un patrimonio a disposizione di tutti.

Anche in questo caso, un valore aggiunto per noi sono stati i feedback e i commenti per migliorare sempre di più gli strumenti che abbiamo raccontato e proposto al pubblico in sala, durante una lunga serie di incontri e workshop.

Oltre ovviamente alle persone che abbiamo incontrato, con le loro storie e le loro idee, che speriamo di rivedere presto su Designers Italia.

Designers Italia dal ServDes. 2018 al Web Marketing Festival: un racconto per immagini was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

La costruzione di un sistema di griglie è stata il primo passo verso il nuovo UI Kit di Designers Italia, uno strumento utile a chi disegna prototipi e applicazioni per i cittadini. In questo articolo vediamo come costruire un grid system e con quali criteri abbiamo realizzato quello contenuto all’interno del Kit.

di Daniela De Blasis

UI Kit: alle basi di un buon design per i cittadini

Stiamo lavorando a uno UI Kit più ampio e completo rispetto alla versione precedente (behance) e il sistema di griglie è il primo di una serie di file che contengono stili e componenti del nuovo Kit. I file, che verranno man mano implementati, si possono scaricare gratuitamente dal repository italia/design-ui-kit e utilizzare liberamente. Perché abbiamo cominciato dal grid system? Perché usare la griglia significa porre le basi per una buona user experience: fa parte di quel design “invisibile” che secondo Steve Krug evita di “dover pensare troppo”.

Leggi anche:

Il design collaborativo: dall’individuo al team, dal team al network: ecco come Designers Italia prova a ridefinire il ruolo del design nella trasformazione digitale della Pubblica Amministrazione.

Systemic design ≠ Design systems: che cos’è un design system? E perché è così importante? La risposta di Raffaele Boiano nel guest post per Designers Italia.

Cosa sono e perché avere le griglie

Una griglia è una rete di linee che si intersecano: è come un’armatura che il designer usa per creare forme, sistemare immagini, organizzare il testo. Così come scrivendo su un foglio le righe guidano la mano e l’occhio, allo stesso modo il designer si serve di linee orizzontali e verticali, colonne e margini per allineare gli oggetti gli uni agli altri.

La griglia è una struttura invisibile che serve non solo ad avere un processo efficiente di costruzione di un layout, ma anche a dare consistenza al design: è la griglia che permette a tutte le pagine, che siano su web o su carta, di avere una struttura uniforme. Attraverso la griglia organizziamo uno spazio vuoto e passivo, definendo il ritmo di tutto il progetto di design.

La griglia è uno strumento comune a molte discipline: architettura, tecnologia, topografia… Pensate all’organizzazione delle strade nelle città, alle facciate di moderni edifici o grattacieli che superano la simmetria e la staticità di quelli più antichi.

Oltre che all’estetica, l’uso della griglia è legato a una necessità di ordine e chiarezza: la visibile griglia rossa dell’elettrocardiogramma che ci aiuta a capire i valori dei nostri battiti cardiaci; le corsie di una piscina; le svariate funzioni dei meridiani e paralleli; il parcheggio di un centro commerciale; i divisori di un cassetto per separare forchette e cucchiai.

La presenza della griglia risponde al nostro bisogno di sistematizzare per capire, ricordare, rendere la vita meno complessa. Ecco perché la griglia è uno strumento fondamentale nel design: il designer deve rendere comprensibile quello che vuole comunicare, e l’utente deve trovare quello che sta cercando. La griglia serve a creare:

• ordine e comprensibilità;
• consistenza e armonia.

Vediamo più da vicino come questo sia possibile.

1. Ordine e comprensibilità

Le griglie sono uno strumento per organizzare lo spazio. Consentono di applicare i principi base del design e della percezione visiva (psicologia della Gestalt) e di realizzare una gerarchia visiva delle informazioni che faccia da guida all’utente che si trova davanti a molte informazioni.

Le griglie servono inoltre a far in modo che gli elementi e i testi siano ben allineati. Uno scorretto allineamento si nota subito, distraendo dalla funzione principale del sito: trasmette l’impressione di un design trascurato e poco professionale, e genera un rischioso senso di sfiducia.

2. Consistenza e armonia

Un design consistente è ciò che permette di navigare tra le pagine di un sito senza sentirsi disorientati: una volta costruita una mappa mentale della pagina, grazie alla consistenza è possibile ritrovare gli elementi principali anche in altre pagine, nella stessa forma e posizione. La consistenza, in altre parole, permette di riconoscere gli elementi ricorrenti e favorisce una maggiore comprensibilità dell’ambiente. Alcuni elementi diventano dei punti fermi con i quali orientarsi: pensate all’ header e al footer, o ai pulsanti che invitano a un’azione (call to action buttons). In un sito con una struttura complessa, le griglie fanno sì che tutte le pagine siano consistenti, mantenendo chiaro il filo conduttore e consentendo all’utente di orientarsi sempre con chiarezza.

Armonia significa equilibrio e ritmo: alcuni principi di design, come la regola dei terzi o la sezione aurea, trovano applicazione grazie alla costruzione di una griglia. I punti in cui si intersecano le linee di queste griglie specifiche sono i punti focali su cui inserire gli elementi principali del layout per avere un risultato piacevole, armonico. Nella figura seguente vedete a sinistra la regola dei terzi e a destra la sezione aurea: nelle immagini d’esempio notate la traccia delle griglie, che mette in risalto l’equilibrio armonico della composizione.

Griglie responsive e breakpoints

Il design responsive oggi è una caratteristica imprescindibile dei siti web. È subito chiaro quando ci capita di navigare da un dispositivo mobile e ci imbattiamo in un layout parzialmente visibile e difficilmente navigabile, e dobbiamo quindi fare uno zoom del testo o uno scrolling orizzontale.

Un layout responsive, invece, fa sì che un elemento cambi forma in maniera fluida: diminuendo la dimensione dello schermo occupa sempre più spazio in altezza e meno in larghezza. Se prima gli elementi venivano calcolati in pixel e inseriti nella pagina web con una misura precisa, per ottenere di fluidità è stato necessario abbandonare questo tipo di misurazione.

In un layout responsive lo spazio occupato da un elemento si deve considerare in percentuale rispetto allo spazio che si ha a disposizione. Per esempio: in una griglia di 12 colonne, un contenuto che si estende per 6 colonne occupa il 50% dello spazio, per 3 colonne, il 25% e così via.

C’è da dire che un elemento che occupa il 50% di un layout, non è detto che possa occupare sempre il 50% a qualsiasi risoluzione, anche su mobile. Per questo motivo bisogna stabilire dei breakpoint, ossia delle risoluzioni-tipo al di sotto e al di sopra delle quali il layout oltre a comprimersi o espandersi, cambia.

Se un container con testo, in un layout con risoluzione desktop, occupa 4 colonne, vuol dire che si estende per il 33.33% dello spazio totale a disposizione. Su mobile lo stesso container non potrà occupare allo stesso modo il 33,33%, per ovvie ragioni di leggibilità, ma sarà necessario a un certo punto (al breakpoint) cambiare il layout, in modo che il container possa occupare tutte le 12 colonne della griglia, quindi il 100%.

Come impostare un grid system

In media nella progettazione di un sito sono necessari dai quattro ai cinque breakpoint: di conseguenza ne derivano quattro o cinque variazioni della griglia, che determinano il grid system. Queste variazioni consistono nel cambiamento delle misure dei margini (lo spazio al di fuori della griglia) e dei gutter (lo spazio tra le colonne). Le colonne si adattano di conseguenza.

Va poi considerata la larghezza massima (max width) oltre la quale il contenitore principale non si deve estendere all’aumentare della risoluzione. Se un sito a risoluzione mobile occupa, com’è normale, tutto lo schermo, non sarebbe altrettanto sensato se occupasse tutto lo spazio di un monitor da 1920px o più.

Come si fa a stabilire i breakpoint e le misure della griglia? Diciamo subito che non c’è una risposta su quale sia la griglia migliore perché dipende sempre dalle specifiche esigenze e dalle librerie di componenti che si intende utilizzare. Possiamo procedere in due modi: costruendo una griglia ex novo con l’aiuto di strumenti online, oppure affidandoci a framework che offrono un grid system già pronto. Vediamo un esempio.

La griglia di Bootstrap

Un framework molto diffuso che offre un grid system già pronto è Bootstrap.

La griglia di Bootstrap prevede 12 colonne con un gutter di 30px, 15 per lato della colonna. La misura della colonna è il risultato conseguente all’impostazione degli altri parametri: la risoluzione, i margini, la larghezza massima del container e il gutter.

Il sistema di griglie dello UI Kit

Lo UI Kit di Designers Italia contiene i componenti di interfaccia per costruire prototipi e applicazioni web, ed è pensato tenendo in considerazione le esigenze della pubblica amministrazione. Al momento esiste un Kit base con un numero minimo di componenti, ma il progetto in corso di realizzazione è molto più ampio: stiamo implementando il Kit seguendo un elenco sistematico di più di trecento componenti. Periodicamente viene pubblicata una macrocategoria di componenti o stili all’interno di un repository: italia/design-ui-kit

Tutti i file pubblicati compreso quello relativo al sistema di griglie possono essere scaricati e utilizzati liberamente.

Come abbiamo costruito il grid system dello UI Kit

Fase uno: analisi

Nel costruire il grid system abbiamo analizzato per prima cosa le statistiche sulle risoluzioni più utilizzate per le tre tipologie di dispositivi (mobile, tablet, desktop). Questa analisi ci è servita per stabilire i breakpoint.

Dai grafici risulta che la risoluzione di 1280px è la misura più piccola di desktop utilizzata, oltre che una misura di tablet in orizzontale. Per i dispositivi di media dimensione la risoluzione più piccola utilizzata è 768x1024 px, mentre il 600x1024 px è la risoluzione di un mini tablet che si può attribuire a un dispositivo di taglia small.

La misura dei margini (o comunque la larghezza massima del “container”) e dei gutter è stata ricavata dopo una serie di prove di layout con blocchi di testo, bottoni, cards e altri elementi, per verificare le diverse soluzioni in termini di percezione visiva e principi del design. Abbiamo quindi scelto di avere a disposizione una misura variabile di gutter e margini.

Fase due: la personalizzazione della griglia

La scelta di personalizzare la griglia di bootstrap risponde alle necessità di avere margini e gutter variabili in base alla risoluzione e di disporre di una griglia basata su multipli di 4px.

1. Margini e gutter

I margini e i gutter sono elementi importanti: se sono troppo stretti creano un senso di tensione, se troppo ampi creano un certo disorientamento. Rispetto alla griglia di Bootstrap che prevede un gutter fisso di 30px, abbiamo ritenuto una soluzione ottimale per le nostre esigenze quella di variare sia i margini che i gutter in relazione alle differenti risoluzioni.

2. I multipli

Le dimensioni di 12, 20 e 24 px scelte per i gutter si adattano bene a una griglia basata su multipli di 4px, vantaggiosa perché gran parte delle risoluzioni più diffuse si adattano a una griglia come questa e non da 3 o 5px, per esempio. Inoltre il design è scalabile anche in risoluzioni ad alta densità*: i contorni rimangono netti, su 4px, mentre con una griglia basata su 5px avremmo contorni sfocati sia per gli oggetti sia per il font.

La griglia orizzontale

Finora si è parlato di gutter e colonne, ma anche la griglia orizzontale contribuisce alla consistenza del design: in questo caso parliamo di consistenza verticale e ritmo verticale.

In un sistema condiviso come quello di uno UI kit, è necessario avere una metrica comune, per mantenere coerenza anche tra diversi siti web appartenenti a enti o pubbliche amministrazioni diverse.

Il ritmo verticale

Il ritmo verticale in un sito web determina i pattern di lettura, ossia il modo in cui scansioniamo con gli occhi una pagina per farci un’idea del contenuto. Dare equilibrio al layout, creare una gerarchia degli elementi, guidare l’occhio attraverso l’uso degli stili di testo: ecco le scelte di design che aiutano nella costruzione del pattern più efficace.

Costruire la griglia orizzontale: l’importanza del testo

L’elemento base con cui possiamo costruire una griglia orizzontale è la baseline del testo, ossia la linea dove poggiano le lettere del font scelto, nel nostro caso il Titillium. La baseline diventa una griglia a cui ancorare non solo il testo ma anche gli oggetti del layout. Abbiamo ritenuto che una misura del font di 16px con un’interlinea a 24px abbia una buona leggibilità. La baseline in questo caso è di 8px.

Basandoci sulla misura di 8 px e i suoi multipli per calcolare dimensioni, padding e margini dei vari elementi, possiamo ottenere un ritmo verticale armonico. Questo tipo di griglia è detta 8 point grid system.

Una comoda soluzione per sistemare gli elementi del layout è quella di posizionarli relativamente gli uni agli altri tenendo presente misure multiple di 8px.

UI Kit: un lavoro in evoluzione

Quanto scritto fin qui viene da riflessioni che ci piace vedere sempre in evoluzione, quindi se hai idee o proposte differenti saremmo felici di poterne parlare insieme nel forum.

Lavoriamo con metodi e strumenti di design collaborativo: la nostra idea è che solo un approccio come questo, basato su una piattaforma comune fatta di idee e supportata da kit e da software adeguato, possa dare una risposta al “bisogno di design” di una realtà complessa come la Pubblica Amministrazione.

* Molti dispositivi hanno una risoluzione ad alta densità di pixel per pollice (hdpi-high density), con un rapporto di 1:1.5 (1x = 160dpi, medium density; 1.5x = 240dpi, high density). In una risoluzione ad alta densità (1.5) una griglia basata su 5px ci farebbe avere una misura da mezzo pixel che genererebbe la sfocatura.

Le griglie: alla scoperta dello UI kit di Designers Italia, partendo dalle basi was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.