Da un'idea a un progetto: come nasce davvero un sito web
Un sito web non nasce dal codice. Nasce da un'idea, da un obiettivo e dalla necessità di comunicare qualcosa. Dalla struttura dei contenuti alla progettazione visiva, fino allo sviluppo e ai test: ecco perché costruire un buon sito significa soprattutto fare le scelte giuste.
Da un'idea a un progetto: come nasce davvero un sito web
Quando vediamo un sito web finito, vediamo soltanto il risultato.
Una pagina ordinata.
Un menu.
Delle immagini.
Qualche animazione.
Testi e pulsanti.
Tutto sembra essere già al proprio posto.
Ma un sito non nasce così.
Prima del codice ci sono domande.
Chi utilizzerà questo sito?
Perché dovrebbe visitarlo?
Cosa vogliamo comunicare?
Quale azione vogliamo che compia?
E soprattutto:
Cosa deve realmente fare questo progetto?
La progettazione di un sito web è quindi un processo molto più ampio dello sviluppo tecnico.
Il codice è una parte del progetto.
Non è il progetto.
1. Tutto comincia dall'idea
La prima fase non dovrebbe essere aprire immediatamente un editor di codice.
Dovrebbe essere capire l'idea.
Un cliente potrebbe dire:
"Ho bisogno di un sito."
Ma questa non è ancora una vera specifica.
Bisogna capire perché ne ha bisogno.
Un portfolio personale ha esigenze diverse da un negozio online.
Un sito istituzionale è diverso da una rivista digitale.
Un blog è diverso da una piattaforma web.
Un progetto può avere come obiettivo vendere, informare, presentare un'attività, costruire autorevolezza oppure semplicemente raccontare qualcosa.
Prima di progettare le pagine bisogna quindi definire l'obiettivo.
Perché senza un obiettivo è molto facile iniziare ad aggiungere elementi semplicemente perché "stanno bene".
Ed è così che nascono molti siti inutilmente complicati.
2. Prima i contenuti, poi la grafica
Uno degli errori più comuni è progettare una pagina inserendo prima dei blocchi vuoti e decidendo soltanto successivamente cosa dovranno contenere.
È un approccio comprensibile, ma spesso porta a risultati poco equilibrati.
Un sito dovrebbe partire almeno da una prima definizione dei contenuti:
quali informazioni dobbiamo comunicare;
quali pagine servono;
quali contenuti sono prioritari;
quali informazioni devono essere facilmente raggiungibili;
quali contenuti possono essere secondari.
Non è necessario avere già ogni testo definitivo.
Ma bisogna sapere che cosa dovrà esserci.
La grafica dovrebbe aiutare i contenuti a comunicare.
Non costringere i contenuti dentro una grafica già decisa.
3. L'architettura: mettere ordine prima di costruire
Una volta chiariti obiettivi e contenuti arriva una fase spesso invisibile all'utente: l'architettura dell'informazione.
In pratica significa decidere:
Come saranno organizzate le informazioni?
Quali pagine saranno principali?
Quali saranno secondarie?
Come si passerà da una sezione all'altra?
Quali contenuti dovranno essere collegati?
Una struttura semplice potrebbe essere:
Home
├── Portfolio
├── Progetti
├── Tutorial
├── Articoli
├── About
└── Contatti
Ma dietro una struttura apparentemente semplice possono esserci molte decisioni.
Un buon menu non deve mostrare tutto ciò che esiste.
Deve mostrare ciò che serve trovare.
4. La struttura viene prima dell'estetica
Prima dei colori, delle immagini e delle animazioni è utile costruire una struttura.
È il momento del wireframe.
Non serve necessariamente uno strumento sofisticato.
Anche uno schema molto semplice può essere sufficiente:
┌─────────────────────────────┐
│ LOGO MENU │
├─────────────────────────────┤
│ │
│ TITOLO │
│ INTRODUZIONE │
│ │
├─────────────────────────────┤
│ CONTENUTO PRINCIPALE │
│ │
│ │
├─────────────────────────────┤
│ FOOTER │
└─────────────────────────────┘
A questo punto non ci interessa ancora se il titolo sarà nero o rosso.
Ci interessa capire se la pagina funziona.
Se la struttura non funziona senza colori e immagini, difficilmente saranno i colori e le immagini a salvarla.
5. Poi arriva il design
Solo quando struttura e contenuti iniziano ad avere una forma possiamo occuparci dell'aspetto visivo.
Qui entrano in gioco:
tipografia;
colori;
spaziature;
griglie;
immagini;
icone;
dimensioni;
gerarchie visive;
componenti;
animazioni.
Il design non dovrebbe però essere una decorazione applicata sopra una struttura già pronta.
È parte integrante della comunicazione.
La dimensione di un titolo comunica importanza.
Lo spazio comunica gerarchia.
Un colore può attirare l'attenzione.
Una griglia può creare ordine.
La tipografia può dare carattere a un progetto.
Ogni scelta visiva comunica qualcosa.
6. Il design system evita di ricominciare ogni volta
Quando un progetto cresce, diventa importante definire delle regole.
Qual è il font principale?
Quali sono le dimensioni dei titoli?
Quanto spazio c'è tra due sezioni?
Come appare un pulsante?
Come vengono visualizzati i link?
Come si comportano le immagini?
Qual è il colore utilizzato per gli elementi interattivi?
Queste decisioni possono diventare un piccolo design system.
Non deve necessariamente essere un documento enorme.
Anche poche regole coerenti possono fare una grande differenza.
La coerenza rende il progetto più riconoscibile e rende anche lo sviluppo più semplice.
7. Il codice arriva dopo, ma non alla fine
A questo punto possiamo iniziare a sviluppare.
HTML per la struttura.
CSS per la presentazione.
JavaScript quando serve interazione.
Backend e database quando il progetto ne ha bisogno.
Ma sviluppo e design non sono due fasi completamente separate.
Durante la realizzazione emergeranno problemi che non erano evidenti durante la progettazione.
Un componente potrebbe essere troppo complesso.
Una determinata animazione potrebbe risultare poco fluida.
Una pagina potrebbe diventare troppo pesante.
Un contenuto potrebbe richiedere una struttura differente.
Per questo il processo migliore non è:
design → codice → fine
ma piuttosto:
design → sviluppo → verifica → modifica → sviluppo.
È un processo iterativo.
8. Responsive: progettare per più esperienze
Un sito non viene utilizzato soltanto davanti a un monitor.
Può essere aperto su:
smartphone;
tablet;
notebook;
desktop;
schermi molto grandi.
Il responsive design non consiste semplicemente nel "rimpicciolire" il desktop.
Significa progettare un'interfaccia capace di adattarsi.
Una griglia a tre colonne potrebbe diventare una colonna singola.
Un menu orizzontale potrebbe trasformarsi in un menu compatto.
La dimensione dei caratteri può cambiare.
Gli spazi possono ridursi.
Alcuni elementi possono cambiare posizione.
Il progetto deve mantenere la propria identità, ma adattarsi al contesto.
9. Performance: il sito deve essere veloce
Un progetto può essere bellissimo e tecnicamente sofisticato.
Se però impiega troppo tempo per essere utilizzabile, abbiamo un problema.
Le immagini devono essere ottimizzate.
Gli script devono essere utilizzati quando servono.
I font non devono diventare un peso inutile.
Il CSS deve essere ragionevolmente efficiente.
Le pagine non dovrebbero caricare risorse che non utilizzano.
La performance non è quindi qualcosa che si aggiunge alla fine.
È una caratteristica del progetto.
La velocità fa parte dell'esperienza utente.
10. Accessibilità: il sito deve funzionare per persone diverse
Un sito dovrebbe essere progettato pensando anche a chi lo utilizza in condizioni differenti.
Non tutti vedono allo stesso modo.
Non tutti utilizzano il mouse.
Non tutti interagiscono con un'interfaccia nello stesso modo.
Per questo diventano importanti:
contrasto sufficiente;
dimensioni leggibili;
struttura semantica;
testi alternativi;
focus visibile;
navigazione da tastiera;
etichette comprensibili;
gerarchia corretta dei contenuti.
L'accessibilità non dovrebbe essere percepita come un ostacolo al design.
Al contrario.
Spesso costringe semplicemente il progettista a progettare meglio.
11. SEO: farsi trovare senza progettare per i motori
Un sito può essere bellissimo.
Ma se nessuno riesce a trovarlo, il suo potenziale rimane limitato.
Anche la SEO dovrebbe quindi entrare nel progetto fin dall'inizio.
Struttura semantica.
Titoli corretti.
URL comprensibili.
Meta description.
Immagini ottimizzate.
Collegamenti interni.
Contenuti realmente utili.
Performance.
Non significa riempire le pagine di parole chiave.
Significa costruire un sito che sia comprensibile sia per le persone sia per i motori di ricerca.
12. Testare non significa soltanto controllare che "funzioni"
Quando un sito sembra finito, in realtà comincia una delle fasi più importanti.
Bisogna utilizzarlo.
Cliccare i link.
Compilare i form.
Provare il menu.
Ridimensionare la finestra.
Aprirlo da smartphone.
Controllare immagini e video.
Provare gli stati di errore.
Verificare cosa succede quando l'utente fa qualcosa che non avevamo previsto.
Un progetto non è pronto perché funziona sul computer dello sviluppatore.
È pronto quando riesce a comportarsi correttamente nelle situazioni reali.
13. E poi arriva la parte che non si vede
Un sito online non è necessariamente un progetto concluso.
Arrivano gli aggiornamenti.
Nuovi contenuti.
Nuove funzionalità.
Correzioni.
Aggiornamenti di sicurezza.
Backup.
Ottimizzazioni.
Modifiche alle esigenze del progetto.
Per questo è importante costruire una base che possa evolvere.
Un buon progetto non dovrebbe soltanto funzionare oggi.
Dovrebbe poter essere modificato domani senza dover essere ricostruito da zero.
La vera difficoltà è scegliere
Alla fine, costruire un sito non significa soltanto saper scrivere codice.
Significa saper scegliere.
Cosa mostrare.
Cosa eliminare.
Cosa rendere prioritario.
Quale tecnologia utilizzare.
Quale tecnologia non utilizzare.
Quanto deve essere complessa una funzione.
Quanto deve essere grande un'immagine.
Quanto spazio lasciare tra due elementi.
Quando un'animazione aggiunge valore e quando invece distrae.
Sono tutte decisioni progettuali.
Il codice arriva dopo.
Conclusione
Un sito web nasce dall'incontro di molte competenze.
Strategia.
Contenuti.
Architettura.
Design.
Sviluppo.
Performance.
Accessibilità.
SEO.
Test.
Manutenzione.
Nessuna di queste, da sola, è sufficiente.
Il risultato finale non dipende quindi dalla quantità di tecnologia utilizzata, ma dalla qualità delle decisioni prese lungo il percorso.
E forse è proprio questa la parte più interessante del web design:
trasformare un'idea astratta in qualcosa che le persone possono realmente utilizzare.
Non si parte dal codice per arrivare al progetto.
Si parte dal problema, si costruisce una soluzione e solo alla fine si scrive il codice necessario per realizzarla.
Un buon sito non nasce quando il codice funziona. Nasce quando un'idea diventa un'esperienza.Il carattere della tipografia.