Vai al contenuto
Chiedi un preventivo

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 , graphic designer a CataniaAggiornata il

Il wireframe di una pagina: riquadri e linee al posto di immagini e parole, per decidere cosa c'è e in quale ordine.
  1. 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.

  2. 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.

  3. 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.