Il processo di web design, passo per passo
Il web design non è la parte in cui qualcuno sceglie i colori. È una sequenza di decisioni che si restringe da «a cosa serve questo sito» fino a «questo pulsante, questa dimensione, questa etichetta», e ogni passo è meno costoso da cambiare del successivo.
Questa guida copre le fasi in ordine, cosa produce ciascuna, e i due punti in cui i progetti di design si arenano regolarmente.
Analisi iniziale: cosa deve ottenere il design#
Prima di qualsiasi elemento visivo, chi progetta ha bisogno delle stesse cose di chi sviluppa: l'obiettivo primario, il pubblico, la struttura delle pagine e i vincoli. Se parte senza, ottieni un design che sta bene in un portfolio e fallisce quando arriva il contenuto vero.
Questa fase produce accordo, non elaborati. Un riassunto di una pagina accettato da entrambe le parti basta.
- L'unica azione che il sito deve generare, e come sarà misurata.
- Due o tre gruppi di visitatori e la domanda con cui arriva ciascuno.
- I vincoli di marca che esistono davvero: logo, colori, caratteri, tono.
- I vincoli tecnici: il CMS, la piattaforma, i dispositivi che contano davvero.
- Esempi di siti che piacciono al cliente — e, più utile, perché.
Struttura e wireframe#
I wireframe risolvono disposizione e gerarchia senza la discussione sul colore. Rispondono a cosa c'è su ogni template, in che ordine, e cosa dovrebbe fare il visitatore — mentre i cambiamenti costano ancora minuti.
Fai wireframe dei template, non di ogni pagina. Quasi tutti i siti hanno da quattro a otto template distinti e decine di pagine costruite su di essi.
| Template | Domanda a cui risponde | Azione principale |
|---|---|---|
| Home | Cos'è e fa per me? | Andare nella sezione giusta |
| Pagina pilastro di sezione | Cosa c'è qui dentro? | Scegliere una voce |
| Articolo o scheda | La risposta vera e propria | Leggere, poi fare il passo successivo |
| Prodotto | È quello giusto e quanto costa? | Aggiungere al carrello |
| Contatti o modulo | Come comincio? | Inviare |
| Risultati di ricerca | L'hai trovato? | Aprire un risultato o affinare |
Fai i wireframe con lunghezze di contenuto realistiche. Un'impaginazione progettata attorno a un titolo di sei parole si rompe nel momento in cui uno vero ne conta quattordici.
Design visivo e sistema di design#
Il design visivo applica la marca ai wireframe: scala tipografica, colore, spaziature, stati e componenti. Su qualsiasi cosa più grande di un sito vetrina vale la pena produrre un piccolo sistema — un insieme di componenti con stati definiti — anziché una raccolta di immagini di pagine scollegate.
Il motivo non è l'ordine. È che un sistema dice a chi sviluppa cosa succede nei casi che i mockup non mostrano, e quei casi sono la maggior parte del sito.
- Una scala tipografica e una di spaziatura, perché nessun numero sia un caso isolato.
- Token di colore con il contrasto verificato sugli sfondi reali.
- Stati dei componenti: normale, hover, focus, attivo, disabilitato, in caricamento, errore, vuoto.
- Comportamento adattivo di ogni componente, non solo una versione mobile della home.
- Cosa succede con troppo contenuto, e con nessuno.
Dove si arenano i progetti di design#
Due fallimenti spiegano la maggior parte dei ritardi, ed entrambi sono problemi di processo più che di gusto.
- Feedback senza responsabile. Sei persone commentano, due si contraddicono, e chi progetta deve arbitrare. Indica una persona che consolida i feedback e decide.
- Contenuto che non esiste. I design vengono approvati su testo segnaposto, poi il testo vero arriva lungo il doppio e l'impaginazione viene rifatta. Progetta con contenuto reale, anche grezzo.
- Giri di revisione illimitati. Concorda il numero in anticipo — di solito due o tre — e quanto costa un giro in più. Senza un limite, i progetti derivano invece di finire.
- Approvazioni che non lo sono. «Sembra a posto» in riunione non è un'approvazione. Ottienila per iscritto, per template, con una data.
La domanda più utile in una revisione non è «ti piace» ma «questo aiuta il visitatore a fare ciò per cui abbiamo concordato che il sito esiste». Le discussioni di gusto non finiscono mai; quelle sull'obiettivo sì.
Domande frequenti
Quanti giri di revisione devo aspettarmi?
Due o tre è la norma su un progetto basato su template. Più del numero conta che sia concordato per iscritto insieme al costo di un giro aggiuntivo. Le revisioni illimitate sembrano generose e in pratica significano che il progetto non arriva mai a una decisione, perché nulla obbliga a impegnarsi.
Design e sviluppo devono essere la stessa persona o lo stesso team?
Sui progetti piccoli una persona che fa entrambi è efficiente ed evita un passaggio di consegne. Su quelli grandi sono competenze davvero diverse e separarle di solito produce lavoro migliore — a patto che il design consegni un sistema con stati e regole adattive anziché una raccolta di immagini. Il rischio sta nel passaggio di consegne, non nella separazione.
Serve un design completo prima che inizi lo sviluppo?
Servono i template progettati, non ogni pagina. Lo sviluppo può iniziare quando il sistema di design e i due o tre template più complessi sono fissati; il resto può completarsi durante la realizzazione. Partire senza nulla di fissato significa rifare lavoro, e completare fino all'ultima pagina prima di scrivere codice significa pagare tempo morto.
Quali elaborati devo ricevere alla fine?
File sorgente modificabili per ogni template e componente, una scala tipografica e cromatica documentata, le risorse esportate nei formati che servono alla realizzazione, e le regole adattive messe per iscritto. Chiedi prima di iniziare se ricevi i file sorgente o solo gli export: la differenza conta la prima volta che ti serve una piccola modifica senza chi ha progettato originariamente.
processo web designfasi design sito webwireframesistema di designmockup webflusso di lavoro web design
