{"id":61813,"date":"2022-01-21T17:23:42","date_gmt":"2022-01-21T16:23:42","guid":{"rendered":"https:\/\/rawfish.com\/?p=61813"},"modified":"2022-05-23T16:00:17","modified_gmt":"2022-05-23T14:00:17","slug":"sirio-design-system","status":"publish","type":"post","link":"https:\/\/rawfish.com\/it\/rawfish-adventures\/sirio-design-system\/","title":{"rendered":"Sirio, ecco il nuovo Design System dell’INPS."},"content":{"rendered":"

[vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”316281″]Sirio, un sistema aperto e modulare.[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”109795″]L’INPS ha recentemente presentato il suo nuovo Design System, una nuova \u201csintassi\u201d del design che intende migliorare la UX dei siti che fanno capo all’istituto. Il Design System, denominato \u201cSirio\u201d dal nome della stella pi\u00f9 luminosa visibile nel cielo notturno, nasce per fornire agli utenti interfacce che permettano di orientarsi senza difficolt\u00e0 nel trovare delle informazioni di cui possano avere bisogno. L\u2019ecosistema \u00e8 composto da linee guida per la costruzione della navigazione di un sito, l\u2019organizzazione gerarchica dei suoi contenuti e la loro rappresentazione visiva coerente. Esso rispetta altissimi standard di continuit\u00e0 e coerenza al suo interno, e diventer\u00e0 il linguaggio visivo e d’interazione standard dell’istituto.<\/span><\/p>\n

Si pensa alla creazione di un sistema aperto, in modo che anche gli utenti, e non solo gli attori principali (come la pubblica amministrazione), possano suggerire modifiche e moduli. Si tratta di dotare un ecosistema complesso di un linguaggio comune, che amalgami il lavoro sia dei collaboratori esterni che interni. Sulla base di questi elementi, verranno rilasciate in maniera continua dei nuovi componenti, che verranno integrati in modo sistematico allo schema principale, assieme a moduli ancora in via di sviluppo.<\/span><\/p>\n

Ma cos’\u00e8 in pratica un Design System? Il DS \u00e8 un sistema di regole e linee guida atte a garantire coerenza e continuit\u00e0 all’interno di tutto l\u2019ecosistema digitale di un brand. Punta anche a rendere pi\u00f9 solida e distintiva la comunicazione del brand aziendale alla clientela, per un miglior riconoscimento del brand stesso.<\/span><\/p>\n

Lo scopo primario del DS Sirio \u00e9 rendere pi\u00f9 facile, veloce e replicabile il processo di progettazione e sviluppo delle interfacce utente, mettendo a disposizione tutti gli elementi atomici per comporle.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_single_image media=”61815″ media_width_percent=”100″ uncode_shortcode_id=”147575″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”156280″]Un focus sull’implementazione di nuovi standard[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”129086″]Vincenzo Caridi, direttore dell’Informatica, Tecnologia ed Innovazione dell’INPS, compara la nascita del nuovo Design System ad un codice della strada, in quanto esso svolge per la progettazione digitale le stesse funzioni che questo svolge per la circolazione stradale, gestendo le modalit\u00e0 di interazione degli elementi e la loro gerarchia in modo che l’intero processo risulti fluido e scorrevole. Cosa pi\u00f9 importante, il nuovo DS definisce con chiarezza gli standard secondo i quali riorganizzare gli elementi stessi dei siti di riferimento, raggruppandoli per similarit\u00e0 in modo che l’utente possa riconoscere immediatamente gli elementi ripetuti e di conseguenza memorizzare con pi\u00f9 facilit\u00e0 i pattern ripetuti. L’uniformazione delle regole permetter\u00e0 agli utenti di abituarsi facilmente ad esse:ad esempio, i bottoni che hanno la stessa funzione saranno sempre dello stesso colore, in modo che l’utente possa riconoscere la loro funzione immediatamente.<\/span><\/p>\n

La scomposizione in elementi permette la ricombinazione delle sequenze, cosicch\u00e9 anche per gli sviluppatori il processo di costruzione delle sequenze \u00e8 semplificato. All\u2019interno di Sirio vengono presentate delle linee guida molto semplici e dettagliate per come gestire le interfacce dei servizi, come esse devono essere disegnate, e di cosa \u00e8 consentito fare e cosa no, di quali elementi grafici utilizzare.\u00a0<\/span><\/p>\n

Secondo le parole di Caridi \u201cDal momento che \u00e8 un sistema modulare, \u00e8 possibile realizzare nuovi prodotti \u2018assemblando\u2019 parti di interfaccia gi\u00e0 definite e pensate per combinarsi tra loro, analogamente a quanto si fa con le costruzioni. Questo approccio garantisce rapidit\u00e0 e maggiore prevedibilit\u00e0 dei tempi di sviluppo. Inoltre, le migliorie che vengono apportate a singoli componenti porteranno beneficio ovunque il componente sia stato utilizzato, e per tutti i suoi usi futuri\u201d. <\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_single_image media=”61817″ media_width_percent=”100″ uncode_shortcode_id=”110985″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”806890″]I “mattoni” del Design System: i design token[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”848750″]Navigando le linee guida del Design System Sirio, possiamo notare che al momento possono sembrare scarne, ma il livello di contenuto dei singoli capitoli sono ben descritti sia per l\u2019uso di un Designer che per i Developer.<\/span><\/p>\n

Il Design System \u00e8 stato sviluppato con Figma, un ottimo software che negli ultimi tempi si sta facendo largo tra i vari competitor del settore e in uno dei primi capitoli viene spiegato come scaricare la libreria dei componenti, come utilizzarli e vengono allegate tutte le risorse, tra cui i font, per la corretta visualizzazione ed utilizzo della stessa.<\/span><\/p>\n

Nel Design System viene dedicata una pagina appositamente per il Changelog, in questo modo tutti gli attori possono sapere cosa \u00e8 stato aggiunto, modificato o deprecato all\u2019interno dell\u2019ultima versione.<\/span><\/p>\n

Anche se il rilascio del DS \u00e8 stato il 29 settembre, \u00e8 stata gi\u00e0 caricata una nuova versione il 19 novembre (v1.1) che va ad aggiungere un elemento essenziale all\u2019interno di ogni Design System: i Design Token.<\/span><\/p>\n

I design tokens sono gli <\/span>elementi essenziali<\/b> di un\u2019interfaccia. Salesforce li definisce la <\/span>Single Source of Truth <\/span><\/i>da utilizzare per tutti i loro prodotti. Nella metodologia Atomic Design sono invece chiamati <\/span>atomi<\/b>, ovvero i building blocks alla base di elementi pi\u00f9 complessi come molecole ed organismi.<\/span><\/p>\n

Qui in Sirio li vediamo suddivisi in:<\/span><\/p>\n