Perché KomuraSoft realizza siti web con il Design System della Digital Agency — costi contenuti e qualità possono convivere

Nei preventivi di produzione di siti web, una quota rilevante è occupata dal tempo di lavoro dedicato al design. KomuraSoft comprime in misura significativa questa fase prendendo come base il design system pubblicato dalla Digital Agency giapponese: i costi restano contenuti e la qualità si stabilizza.

Quando si sente parlare di «produzione di siti web a basso costo», molti pensano che da qualche parte si stia sacrificando la qualità. In effetti, abbassare il prezzo saltando le interviste preliminari o limitandosi a versare i testi in un template porta spesso a siti dai quali non si capisce che cosa faccia l’azienda.

Il motivo per cui lo sviluppo di siti web di KomuraSoft riesce a contenere i prezzi non è quello, ma la standardizzazione della fase di design. Questo articolo spiega in ordine che cos’è il design system della Digital Agency che usiamo come base, che cosa usiamo davvero e come, perché il costo scende, perché la qualità non scende e per quali progetti questo approccio non è adatto.

Nel seguito, come nome del nostro servizio usiamo «sviluppo di siti web»; per il processo in generale usiamo «produzione di siti web».

1. Che cos’è il design system della Digital Agency

Il design system della Digital Agency è la specifica di design standard che la Digital Agency pubblica per i siti web e le applicazioni dei servizi della pubblica amministrazione. La fonte primaria si trova sul sito ufficiale.

• Sito ufficiale: Design system della Digital Agency, versione β
• Licenza e condizioni d’uso: Avvertenze sull’uso

A grandi linee, definisce in modo sistematico elementi come i seguenti.

Il punto importante è che è distribuito pubblicamente sotto condizioni di licenza pubblicate e può essere usato anche sui siti privati. I siti dei procedimenti amministrativi devono poter essere usati da chiunque, indipendentemente da età, ambiente o familiarità con l’IT; contrasto, dimensioni del testo e facilità d’uso sono quindi progettati dopo essere stati verificati. Quel lavoro accumulato può fungere direttamente da base anche per il sito di un’azienda privata.

Condizioni concrete della licenza

Riassumerlo come «licenza aperta» non basta per prendere decisioni in pratica. Nelle Avvertenze sull’uso ufficiali, la licenza è indicata separatamente per tipo di materiale distribuito.

In pratica i punti sono due. Il primo: se i dati Figma o gli snippet di codice si modificano e si incorporano nel proprio sito, l’indicazione della fonte non è richiesta. Quando si usa questo design system per produrre il sito di un’azienda, la maggior parte dei casi è di questo tipo. Il secondo: è indicato esplicitamente che non è consentito pubblicare o utilizzare il materiale modificato o rielaborato «in modo tale da far credere che sia stato creato dalla Digital Agency».

Inoltre, l’utilizzo non conferisce alcuna certificazione o approvazione della Digital Agency. Anche la nostra posizione non è quella di essere «certificati dalla Digital Agency», bensì di applicare a siti privati una specifica standard già pubblicata. Le condizioni di licenza sopra riportate sono quelle al momento della stesura dell’articolo, quindi prima di decidere di adottarlo verificate sempre le condizioni più recenti sulla pagina ufficiale.

Nel diagramma, una linea continua indica una relazione che vale sempre e una linea tratteggiata indica una relazione condizionale (le condizioni sono nella spiegazione di ciascuna relazione nella pagina di dettaglio). L’elenco completo delle relazioni (in totale 15, con evidenza e livello di certezza) e le definizioni dei concetti principali sono raccolti nella pagina di dettaglio della mappa della conoscenza (in giapponese). Dati: JSON-LD / Turtle

2. Che cosa significa concretamente «prenderlo come base»

L’espressione «prendere il design system come base» è comoda, ma il livello di dettaglio dell’implementazione può variare. Nel nostro caso lo incorporiamo suddiviso nei tre strati seguenti. Questo stesso sito (comcomponent.com) ha quella struttura.

Conviene indicare anche ciò che deliberatamente non facciamo. Non importiamo integralmente il codice dei componenti distribuito ufficialmente per gestirlo come dipendenza esterna. I componenti di cui ha bisogno il sito di un’azienda sono limitati; importare il set completo appesantisce il caricamento del sito e genera un costo di manutenzione per seguire gli aggiornamenti a monte. La decisione è tenere solo i componenti necessari, come implementazione propria allineata alla specifica.

L’effetto di questa struttura compare quando si aggiungono pagine. Anche se si aggiunge una nuova pagina di servizio, la forma dei pulsanti, la gerarchia dei titoli e la spaziatura restano allineati alle pagine esistenti, quindi non occorre chiedersi ogni volta «come deve essere il design».

3. Perché il costo scende — la fase di design scompare dal preventivo

Un preventivo tipico per la produzione di un sito web include una quota rilevante di voci legate al design. Nella tabella rapida dei costi di sviluppo di siti web per PMI, le configurazioni che includono un design originale rientrano nella fascia 300.000–1.000.000 di yen; all’interno di quella fascia la fase di design si compone, a grandi linee, delle attività seguenti.

Il contenuto della voce «design completo» del preventivo varia da azienda ad azienda, quindi al confronto la cosa più sicura è chiedere di scomporla fino a questo livello di dettaglio (questo modo di leggere un preventivo è trattato più a fondo nell’articolo sui costi).

Prendere il design system come base cambia questo schema.

• I criteri di colore, dimensioni del testo, spaziatura e pulsanti sono già definiti dall’inizio
• Il round «presentare più proposte di design, sceglierne una e correggerla» di regola non è necessario
• Diminuiscono le decisioni che dipendono dalla sensibilità del designer, quindi è meno probabile dover rifare il lavoro

In altre parole, il prezzo è più basso non per uno sconto, ma perché si riduce il processo stesso. Le ore liberate si destinano alle parti che incidono davvero sul risultato — costruire una struttura che comunichi che cosa fa l’azienda, i testi e il percorso verso la richiesta di contatto. La causa di un sito che non comunica sta quasi sempre nella struttura, non nel design, come abbiamo scritto in I tre punti da sistemare per primo in un sito che non riceve richieste.

4. Perché la qualità non diminuisce — anzi, si stabilizza

L’intuizione secondo cui «se si omette il design, la qualità scende» presuppone un design creato da zero. Quando si usa un design system standardizzato, il ragionamento si inverte.

Primo, l’accessibilità. I componenti del design system della Digital Agency sono progettati tenendo conto di contrasto cromatico, dimensioni del testo, visibilità del focus e facilità dell’uso al tocco. Garantire lo stesso livello ogni volta nel design di un progetto individuale richiede di per sé ore di verifica. Usare componenti già verificati fa sì che la qualità, di conseguenza, si stabilizzi.

Secondo, la prova sul campo. I servizi della pubblica amministrazione sono usati in situazioni reali da un ventaglio di utenti estremamente ampio, da chi non ha familiarità con lo smartphone fino agli specialisti. Le regole di design impiegate lì non sono state affinate sulla domanda «l’aspetto è nuovo?», ma su «chiunque può usarlo senza perdersi?». Proprio quella caratteristica conta per i potenziali clienti che arrivano sul sito di un’azienda.

Terzo, la coerenza. Un sito in cui la forma dei pulsanti o le regole dei titoli oscillano da pagina a pagina è già più difficile da leggere per questo solo motivo. Seguire un design system fa sì che struttura e tono non si rompano anche se si aggiungono pagine in seguito.

Questo stesso sito è costruito su questo design system. Anche il caso di rinnovamento del sito di Douzu Carry Service è stato costruito con la stessa politica. Il modo in cui si è svolto il rinnovamento è dettagliato nell’articolo del caso studio.

Per vedere quali componenti concreti stanno lavorando, il modo più rapido è confrontare pagine reali. I punti di utilizzo in questo sito sono i seguenti.

L’applicazione degli stessi componenti a un altro sito è Douzu Carry Service. Colori, fotografie e testi sono ovviamente del tutto diversi, ma affiancandoli si vede che la facilità nel premere i pulsanti e il modo in cui è costruita la gerarchia dei titoli seguono le stesse regole di design.

5. Standardizzare non significa «lo stesso aspetto»

Un dubbio frequente è: «Un design standard non farà sì che il sito abbia lo stesso aspetto di quello di altre aziende?»

Ciò che viene standardizzato è la parte di base: i criteri di colore, il sistema delle dimensioni del testo e le regole di design dei componenti. A determinare davvero l’impressione del sito sono logo, fotografie, slogan, struttura delle pagine e tono dei testi, e tutto questo si realizza da zero per ciascun sito. Avere una base allineata e non avere personalità sono due cose diverse.

D’altra parte, c’è un punto da dire con franchezza. Questo approccio non è adatto a progetti che richiedono un visual originale elaborato o animazioni come espressione di brand. Ne sono esempio i siti di brand o i siti di campagna in cui la costruzione di un universo visivo è il valore centrale. In quei progetti si ottengono risultati migliori investendo davvero nel design e affidando il lavoro a uno studio di design specializzato. Se dalla consulenza presso di noi risulta che quel tipo di esigenza è il centro della richiesta, lo diciamo apertamente fin dall’inizio.

6. Riepilogo

• Nel costo di produzione di un sito web, il design creato da zero occupa una quota rilevante
• KomuraSoft comprime in misura significativa questa fase prendendo come base il design system pubblicato dalla Digital Agency (sito ufficiale)
• La licenza è suddivisa per tipo di materiale: i dati Figma sono sotto CC BY 4.0, gli snippet di codice sotto MIT License. Se si modificano e si incorporano nel proprio sito, l’indicazione della fonte non è richiesta
• Il contenuto di «prenderlo come base» consiste in tre strati: unificare i token di design, rendere i componenti classi CSS e incorporarli nei template
• Il motivo del prezzo più basso non è uno sconto, ma la riduzione del processo. Le ore liberate si destinano alla struttura, ai testi e al percorso verso la richiesta
• La qualità si stabilizza, anziché scendere, perché si usano componenti standard progettati con attenzione all’accessibilità e già in esercizio nei servizi della pubblica amministrazione
• Logo, fotografie e testi si realizzano per ciascun sito, quindi l’aspetto non diventa lo stesso. L’approccio, però, non è adatto a progetti che richiedono un visual originale elaborato

Se l’obiettivo è contenere i costi e al tempo stesso realizzare un sito con una struttura che comunichi, processo e prezzi si possono vedere nella pagina Sviluppo di siti web. Se ci contattate indicando l’URL del sito attuale, vi restituiremo un quadro di che cosa conviene correggere per primo per ottenere più effetto.

Articoli correlati

• Costi di sviluppo di siti web per PMI — guida rapida ai prezzi e a come leggere un preventivo
• Caso studio di rinnovamento del sito: Douzu Carry Service, azienda di trasporti di Miyazaki
• I tre punti da sistemare per primo in un sito che non riceve richieste
• Sviluppo di siti web

Riferimenti

• Digital Agency, Digital Agency Design System β. Specifica di design standard pubblicata per i siti web e le applicazioni dei servizi della pubblica amministrazione.
• Digital Agency, Avvertenze sull’uso. Licenza e condizioni d’uso del design system; le licenze per i dati Figma, le icone in bundle e gli snippet di codice sono indicate separatamente.
• Digital Agency, Politica sul copyright. Politica sul copyright applicabile al sito del design system (testi esplicativi e linee guida) (Condizioni di utilizzo dei dati pubblici, versione 1.0).

Articoli correlati

Articoli recenti con gli stessi tag per approfondire argomenti vicini.

Argomenti correlati

Queste pagine collocano l’argomento in un contesto più ampio di servizi e decisioni.

Servizi collegati all’argomento

L’articolo è direttamente collegato ai servizi seguenti.

Domande frequenti

Domande che ricorrono nelle consulenze sull’argomento dell’articolo.

Il Design System della Digital Agency può essere usato sui siti di aziende private?

Sì. Il design system della Digital Agency è pubblicato dalla Digital Agency con una licenza aperta e può essere usato anche su siti diversi da quelli della pubblica amministrazione. L'utilizzo, però, non conferisce alcuna certificazione o approvazione della Digital Agency. Anche la nostra posizione è quella di applicare il design system pubblicato a siti del settore privato.

Un design standardizzato non farà assomigliare il mio sito a tutti gli altri?

Diventano comuni soltanto le regole di design di colori, spaziatura e componenti. Logo, fotografie, slogan e struttura delle pagine si realizzano per ciascun sito. È soprattutto questa parte a determinare l'impressione reale, quindi la standardizzazione non produce «un sito già visto altrove». Al contrario, l'effetto della standardizzazione è che si allineano le parti che devono esserlo: facilità nel premere i pulsanti e leggibilità del testo.

Profilo dell’autore

Pagina di presentazione dell’autore dell’articolo.

Go Komura

Rappresentante di KomuraSoft LLC

Specializzato nello sviluppo di software Windows, nella consulenza tecnica e nell’analisi dei malfunzionamenti, soprattutto nei progetti con sistemi esistenti e guasti difficili da riprodurre.