Progettazione di un sito web: le fasi, dall'idea alla messa online

Progettare un sito web vuol dire decidere, prima di costruirlo, a cosa serve, per chi è, quali pagine deve avere, cosa c'è in ogni pagina e come deve apparire. Le fasi sono nove: obiettivi, analisi, struttura, wireframe, contenuti, grafica, sviluppo, test e lancio. La regola che le tiene insieme è semplice: prima la struttura e i contenuti, poi la grafica.

È il metodo che uso per i siti che costruisco, compreso il mio. In questa guida trovi cosa si fa in ogni fase, un esempio di wireframe, le regole di grafica che contano davvero e gli errori che allungano i tempi.

Le 9 fasi della progettazione

Fase 1 e 2: obiettivi e analisi

Si parte da due domande: a cosa serve il sito e cosa deve fare chi lo visita. Chiamare, scrivere, prenotare, comprare, venire in negozio. Ogni decisione successiva si misura su questo.

Poi l'analisi:

• Chi sono i visitatori e cosa cercano quando arrivano.
• Come cercano: le parole che usano su Google. Un modo gratuito è guardare i suggerimenti che compaiono mentre scrivi una ricerca.
• Cosa fanno i concorrenti: cosa manca nei loro siti è spesso la tua occasione.

Fase 3: la struttura del sito

La struttura è l'elenco delle pagine e di come sono collegate. La regola più utile per una piccola impresa: una pagina per ogni servizio importante, perché chi cerca un servizio preciso deve trovare una pagina che parla proprio di quello. Esempi di struttura per tipo di sito sono in cosa deve avere un sito web aziendale e in sito vetrina.

Fase 4: il wireframe

Il wireframe è lo schema di una pagina senza colori né immagini: solo i blocchi e il loro ordine. Serve a decidere dove va cosa quando cambiare idea non costa niente.

Io lo faccio nel modo più veloce possibile: in caratteri di testo, direttamente nella chat con l'AI, prima di costruire ogni sezione. Si legge in pochi secondi e si corregge con una riga. Un esempio per la home di un artigiano:

+----------------------------------------------------+
| LOGO                     Servizi  Lavori  [Chiama] |
+----------------------------------------------------+
| TITOLO: Impianti elettrici a Merano e dintorni     |
| Sottotitolo: per case e aziende, interventi rapidi |
| [ Chiama ora ]   [ Chiedi un sopralluogo ]         |
+----------------------------------------------------+
| SERVIZI:  [Impianti]  [Domotica]  [Manutenzione]   |
+----------------------------------------------------+
| LAVORI: 3 foto con una riga ciascuna               |
+----------------------------------------------------+
| PERCHE' NOI: anni di esperienza, zona, garanzia    |
+----------------------------------------------------+
| CONTATTI: telefono, email, mappa                   |
+----------------------------------------------------+

Il wireframe si approva prima di passare a testi e grafica. Se qualcosa non convince, si cambia qui.

Fase 5: i contenuti

I testi si scrivono prima della grafica, non dopo. Per ogni pagina: per chi è, cosa offri con dettagli concreti, perché fidarsi, cosa fare adesso. Foto vere della tua attività valgono più di qualsiasi foto di repertorio.

Fase 6: la grafica del sito

La grafica deve far leggere e far agire, non solo piacere. Le regole che contano di più:

1. Leggibilità prima di tutto. Le linee guida di accessibilità del W3C (WCAG 2.1, criterio 1.4.3) chiedono un contrasto di almeno 4,5:1 tra testo e sfondo, 3:1 per il testo grande (fonte W3C). Il grigio chiaro su bianco, per esempio, può non arrivarci.
2. Gerarchia chiara. Un titolo per pagina, sottotitoli che riassumono, paragrafi brevi.
3. Un'azione principale per pagina, con un pulsante che si nota.
4. Pochi colori e pochi caratteri, usati sempre allo stesso modo.
5. Prima il telefono. Progetta e controlla prima lo schermo piccolo: pulsanti grandi, testo leggibile senza zoom.
6. Immagini leggere. Una foto pesante rallenta la pagina più di qualsiasi effetto grafico.

Per ogni sezione importante preparo più proposte grafiche e scelgo con il cliente: si decide confrontando, non immaginando.

Fase 7 e 8: sviluppo e test

Lo sviluppo dipende dalla strada scelta: un builder, WordPress, un sito su misura costruito con l'AI o un professionista. Le differenze sono in come creare un sito web e in gli strumenti per creare siti web.

I test non sono un dettaglio finale:

• ogni pagina dal telefono e dal computer;
• moduli e numeri di telefono, con un messaggio di prova;
• velocità, soprattutto delle pagine con molte immagini;
• leggibilità dei testi e contrasto dei colori;
• link che portano dove devono.

Fase 9: lancio e misura

Pubblicare non è la fine del progetto. Il giorno del lancio collega Google Search Console e invia la sitemap. Se stai rifacendo un sito esistente, i vecchi indirizzi devono portare ai nuovi: l'ho spiegato in restyling del sito web.

Dopo qualche settimana guarda quali ricerche portano visite e quali pagine funzionano: la progettazione continua da lì.

Gli errori che allungano i tempi

• Partire dalla grafica. Si rifà il design quando arrivano i testi veri.
• Saltare il wireframe. Ogni spostamento si fa a sito già costruito, dove costa di più.
• Testi in ritardo. È la causa più comune dei progetti che slittano.
• Troppe persone che decidono, senza un responsabile finale.
• Nessun obiettivo misurabile. Senza, non sai se il sito funziona.

In sintesi

Progettare un sito è decidere nell'ordine giusto: obiettivo, pagine, schema, testi, grafica, costruzione, controlli, lancio. Ogni fase saltata si paga in quella dopo. E un sito progettato bene si misura dal primo giorno.

Se devi ancora scegliere come costruirlo, parti da come creare un sito web. Racconto quello che imparo costruendo siti anche su LinkedIn.