Brief e wireframe su carta: pianificare prima di scrivere codice

Il più grave errore dei principianti è aprire subito l'editor di codice. Scopri come progettare il tuo sito su carta per non perderti.

Siamo arrivati al Modulo Finale! In queste ultime lezioni metteremo insieme tutto ciò che hai imparato (HTML, Semantica, Box Model, Grid, Flexbox, Variabili, Media Queries) per costruire un vero progetto professionale: Il tuo Portfolio Personale.

Il Brief del Progetto

Il nostro portfolio sarà una Landing Page (una singola pagina a scorrimento lungo) composta dalle seguenti sezioni:

Header (Navigazione): Logo a sinistra, link al centro, bottone “Contattami” a destra.
Hero section: il biglietto da visita iniziale, con un grande titolo, un sottotitolo e una foto profilo.
Chi Sono: Un blocco di testo descrittivo.
Progetti (Portfolio): Una griglia di “card” che mostrano i tuoi lavori precedenti.
Footer: Link ai social e copyright.

La regola d’oro: Non aprire VS Code

Il più grande errore che puoi fare è aprire il tuo editor di codice e iniziare a scrivere <header> senza avere in mente l’aspetto finale. Finirai per scrivere tonnellate di CSS confuso procedendo per tentativi ed errori.

I professionisti seguono un flusso di lavoro preciso:

Sketches (Schizzi a mano): Si prende carta e penna e si disegnano dei quadrati. Dove va il logo? Quanto è grande l’immagine?
Wireframe (Bassa fedeltà): Si usa uno strumento come Figma (o carta millimetrata) per creare la struttura in bianco e nero. Si decidono gli allineamenti, se usare una griglia a 2 o 3 colonne, e dove posizionare i bottoni. In questa fase non si scelgono i colori!
Mockup (Alta fedeltà): Sempre in Figma, si aggiungono i colori scelti, i font definitivi, le immagini reali e le ombre.
Sviluppo (Codice): Solo quando il Mockup è approvato in ogni suo pixel, si apre l’editor di codice e lo si “traduce” in HTML e CSS.

Il nostro Wireframe mentale

Per questo progetto, immagineremo di aver già disegnato il nostro Wireframe. Sappiamo che la struttura principale del sito avrà una larghezza massima (es. 1200px) e sarà centrata nello schermo. Sappiamo che la griglia dei Progetti avrà 1 colonna su Mobile, e 3 colonne su Desktop.

Nella prossima lezione, tradurremo questo “disegno” nei “mattoni” base dell’HTML!

Esercizi

Base · facile

Disegna su carta il wireframe (solo riquadri, niente colori) dell’header del portfolio: logo, link di navigazione, bottone «Contattami». Indica dove va ciascun elemento.

Soluzione

Un rettangolo orizzontale diviso in tre zone: logo a sinistra, gruppo di link al centro, bottone a destra. Nessun colore o font in questa fase: solo posizione e allineamento.

Intermedio · medio

Disegna il wireframe completo delle cinque sezioni (header, hero, chi sono, progetti, footer) in due varianti: mobile (una colonna) e desktop (hero a due colonne, progetti a tre). Annota la larghezza massima del contenitore.

Sfida · difficile

Scrivi un mini-brief del tuo portfolio (obiettivo, pubblico, azione principale che vuoi ottenere dal visitatore) e giustifica, partendo da quello, le scelte di wireframe: numero di sezioni, ordine, dove collocare la call to action e perché. Spiega perché pianificare prima riduce il CSS «a tentativi».