Un wireframe Web è una semplice guida visiva per mostrare come apparirebbe una pagina Web. Suggerisce la struttura di una pagina, senza utilizzare grafica o testo. Un wireframe del sito web mostrerebbe l'intera struttura del sito, incluse le pagine che collegano a dove.
I wirefram Web sono un ottimo modo per iniziare il lavoro di progettazione. E mentre è possibile creare wireframe complessi con enormi quantità di dettagli, la tua pianificazione può iniziare con un tovagliolo e una penna. La chiave per creare dei buoni wireframe è di escludere tutti gli elementi visivi. Usa scatole e linee per rappresentare immagini e testo.
Cose da includere in una pagina Web wireframe:
- scatole per elementi grafici primari
- collocamento di titoli e sottotitoli
- una semplice struttura di layout
- invita all'azione
- blocchi di testo
Come costruire un semplice Wireframe Web
Crea un wireframe di una pagina Web usando qualsiasi pezzo di carta che hai a portata di mano. Ecco come lo faccio:
- Disegna un grande rettangolo - questo può rappresentare l'intera pagina o solo la parte visibile. Di solito inizio con la parte visibile, quindi la espongo per includere elementi che potrebbero essere below the fold.
- Disegna il layout: si tratta di 2 colonne, 3 colonne?
- Aggiungi una casella per un grafico dell'intestazione: disegna le colonne se vuoi che sia una singola intestazione sopra le colonne o semplicemente aggiungila dove vuoi.
- Scrivi "Titolo" nel punto in cui vuoi che il tuo titolo H1 sia.
- Scrivi "Sottotesta" dove vuoi che siano H2 e titoli minori. Aiuta se li rendi proporzionali - h2 più piccoli di h1, h3 più piccoli di h2, ecc.
- Aggiungi caselle per altre immagini
- Aggiungi in navigazione. Se stai progettando schede, basta disegnare caselle e scrivere "navigazione" in alto. O inserire elenchi puntati nelle colonne in cui si desidera la navigazione. Non scrivere il contenuto. Basta scrivere "navigazione" o usare una linea per rappresentare il testo.
- Aggiungi elementi aggiuntivi alla pagina: identifica il loro contenuto con il testo, ma non utilizzare il testo del contenuto attuale. Ad esempio, se si desidera un pulsante di chiamata all'azione in basso a destra, inserire una casella e etichettarlo come "call to action". Non scrivere "Acquista ora!" in quella scatola.
Una volta che hai scritto il tuo semplice wireframe, e non dovresti impiegare più di 15 minuti per disegnarne uno, mostralo a qualcun altro. Chiedi loro se mancano qualcosa e altri feedback. Sulla base di ciò che dicono puoi scrivere un altro wireframe o mantenere quello che hai.
Perché i wireframe della carta sono i migliori per le prime bozze
Mentre è possibile creare wireframes usando programmi come Visio, per le tue sessioni iniziali di brainstorming, dovresti attenersi alla carta. La carta non sembra così permanente e molte persone presumeranno che l'abbiate gettata insieme in 5 minuti e quindi non esitate a darvi un buon feedback. Ma quando usi un programma per creare wireframe fantasiosi con quadrati e colori perfetti, corri il rischio di essere coinvolto nel programma stesso e di trascorrere ore a perfezionare qualcosa che non andrà mai in diretta.
I wireframe di carta sono facili da fare. E se non ti piace, basta accartocciare la carta, gettarla nel riciclaggio e prendere un nuovo foglio.
