Glossario · Web design
Wireframe
Si dice anche: schema di pagina.
Definizione
Nel web design, il wireframe è lo schema di una pagina, disegnato con riquadri e linee, senza colori, immagini né caratteri definitivi. Mostra che cosa c'è nella pagina e in quale ordine: titoli, testi, immagini, pulsanti, menu. Serve a decidere struttura e percorsi prima di lavorare sulla grafica, quando cambiare idea costa poco.
A cura di Gaia Rundo, graphic designer a CataniaAggiornata il
Wireframe: in pratica
Il wireframe lo incontri all'inizio del progetto di un sito, se chi lo progetta lavora per fasi: prima la struttura, poi la grafica. Non giudicarlo dall'aspetto, che è spoglio di proposito. Guarda l'ordine: che cosa vede per primo chi arriva, dove sono i contatti, quanti passaggi servono per prenotare o chiedere un preventivo. È il momento giusto per aggiungere o togliere una sezione. Non tutti i progetti lo prevedono: nei siti piccoli la struttura si decide spesso sulla prima proposta grafica.
Wireframe: un esempio
Un esempio comune di wireframe: la home di un ristorante disegnata con soli rettangoli grigi. In alto un riquadro con la scritta «foto del locale», sotto tre caselle per menu, orari e prenotazione, in fondo la mappa. Nessun colore e nessuna foto vera: solo posizioni e ordine. In inglese la parola vuol dire struttura in fil di ferro.
Wireframe: da non confondere con
Il wireframe non è il mockup. Il wireframe mostra la struttura, in bianco e nero. Il mockup mostra l'aspetto finito, con colori, caratteri e immagini. Nella grafica 3D wireframe indica un'altra cosa ancora: un modello disegnato con i soli spigoli.
