Wireframe e Mockup: come si progetta la bozza di un sito web?

Di Riccardo Esposito | Pubblicato il 1 Ago 2012 - Aggiornato il 17 Set 2021

Un buon sito web non si realizza senza un lavoro di progettazione delle bozze con Wireframe e Mockup. Questa fase costituisce il momento organizzativo del web designer e dell’UX specialist, ed è il primo passo per realizzare di un sito web.

Prima di iniziare con il codice, un web designer deve organizzare le idee, strutturare la gerarchia degli elementi in rapporto alla loro importanza e disegnare con carta e matita per completare la bozza del sito web con Wireframe e Mockup.

Come disegnare una pagina web

Disegnare in Photoshop (o in qualsiasi altro elaboratore di immagini) vuol dire iniziare una fase precedente della creazione. Qui definisci gli spazi, gli ingombri, i ruoli dei vari elementi che compongono il layout della pagina web. Migliorando la navigabilità.

C’è chi disegna le pagine web con i software e chi, invece, lavora alla vecchia maniera. Ovvero con carta e penna. Questo ti permette di progettare in maniera diretta, risparmiare tempo ma anche di assicurarti una buona sintonia con il cliente.

Questo serve soprattutto ad evitare equivoci: anche dopo aver parlato a lungo su come s’intende strutturare il sito web, può capitare che i clienti si facciano un’idea di versa di come verrà realizzato. Qui entrano in gioco Wireframe e Mockup.

Inizia a creare il wireframe del sito

Il wireframe è il concept, in forma di scheletro, del sito che realizzerai. In genere, il wireframe non è altro che una bozza su carta più o meno dettagliata.

Molti web designer realizzano i wireframe su block notes o su fogli quadrettati per avere riferimenti geometrici. A tal proposito ti segnalo Sneakpeekit che offre gratuitamente griglie pronte per essere stampate per la progettazione di siti web, oltre che di applicazioni per tablet e smartphone. Ecco qualche esempio.

Sul sito si trovano template A4 di vario genere, da griglie generiche a contenitori specifici contenenti riferimenti in pixel dei più comuni grid system usati dai web designer quali Less Framework 4, 978 grid system, 1140 css grid, etc.

Poi prosegui con i mockup del sito

Mockup è un termine associato alla composizione grafica del progetto realizzata con appositi software di elaborazione grafica quali Photoshop, Firework, Corel Draw.

Si tratta di tradurre il layout del wireframe in qualcosa che si avvicini il più possibile, quantomeno nell’aspetto, al sito finito. Ecco un altro esempio che puoi valutare.

Per ogni framework o grid system, Sneakpeekit mette a disposizione anche template per Photoshop con guide di riferimento in base alla larghezza del layout e al numero di colonne che si è scelto di adottare per disegnare una pagina web.

Da leggere: prepara il tuo sito al mobile first indexing

Cosa fare con la bozza del sito?

Una volta realizzati wireframe e mockup, si approda al coding. A questo punto del workflow si procede con lo slicing (la scomposizione del progetto grafico) e all’impaginazione della pagine web con HTML, CSS, PHP, JS e via dicendo.

Riassumendo, le fasi che costituiscono la definizione del layout e la realizzazione di un sito web e la sua pubblicazione online sono sintetizzabili nei seguenti punti:

• Ideazione e progettazione (realizzazione dei wireframe).
• Composizione grafica e rifinitura dei dettagli (realizzazione dei mockup).
• Slicing e coding (sviluppo codice e impaginazione del sito web).

A tutto questo si aggiunge il lavoro di scrittura testi per il web, ottimizzazione SEO dell pagine web e gestione della struttura del blog se è stato previsto.

Categoria: Strumenti per blog | Tag: Usabilità