Il wireframe è il disegno preliminare dell’interfaccia di una pagina che si concentra in particolare sull’allocazione dello spazio e la definizione delle priorità del contenuto, delle funzionalità disponibili e dei comportamenti previsti.
Per questi motivi, i wireframe in genere non includono alcuno stile, colore o grafica. I wireframe aiutano anche a stabilire relazioni tra i vari modelli di un sito Web.
Il valore dei wireframe
I wireframe servono a molteplici scopi, contribuendo a:
- Collegare l’architettura delle informazioni del sito al suo design visivo mostrando percorsi tra le pagine
- Chiarire i modi coerenti per visualizzare particolari tipi di informazioni sull’interfaccia utente
- Determinare le funzionalità previste nell’interfaccia
- Dare priorità al contenuto attraverso la determinazione di quanto spazio allocare a un determinato elemento e dove si trova l’elemento
Creazione di wireframe
È importante tenere presente che i wireframe sono le guide a cui si allineeranno, nella pagina, gli elementi principali di navigazione e contenuto del sito. Dal momento che l’obiettivo delle illustrazioni non è quello di sovrapporsi al design: mantenete un impostazione essenziale.
Non usare i colori. Se in genere si utilizza il colore per distinguere gli elementi, invece, fare affidamento su vari toni di grigio per comunicare le differenze.
Non usare immagini. Le immagini distraggono dal lavoro di impostazione della pagina.
Per indicare dove intendi collocare un’immagine e le sue dimensioni, puoi invece utilizzare una sagoma rettangolare delle giuste dimensioni e contrassegnata con una x.
Usa solo un carattere generico. La tipografia non dovrebbe far parte della discussione sui wireframe. All’interno dei wireframe, tuttavia, è ancora possibile ridimensionare il carattere per indicare varie intestazioni e modifiche nella gerarchia delle informazioni di testo nella pagina.
Dato che i wireframe sono bidimensionali, è importante ricordare che non funzionano bene mostrando le funzionalità interattive dell’interfaccia come elenchi a discesa, stati di hover, fisarmoniche che implementano funzionalità di show-hide o caroselli con rotazione automatica.
Elementi importanti illustrati nei wireframe
Sebbene i wireframes differiscano da sito a sito, i seguenti elementi vengono spesso inclusi come elementi standard sui wireframe:
- Campo di ricerca
- logo
- Breadcrumb
- Headers, incluso titolo della pagina come H1 e sottotitoli
- Sistemi di navigazione (menù orrizzontali e a “tendina”), inclusa la navigazione globale
- Contenuto del corpo
- Pulsanti di condivisione
- Informazioni di contatto
- Piè di pagina
Tipi di wireframe
I wireframes possono variare sia nella produzione, dagli schizzi di carta alle immagini disegnate al computer e nella quantità di dettagli che trasmettono. Bassa e alta fedeltà sono termini usati per identificare il livello di produzione o funzionalità del wireframe.
I wireframe a bassa fedeltà aiutano a facilitare la comunicazione del team di progetto e sono relativamente veloci da sviluppare. Tendono ad essere più astratti perché utilizzano spesso immagini semplici per bloccare lo spazio e implementare il contenuto fittizio o il testo latino (lorem ipsum) come riempitivo per contenuti ed etichette.
I wireframe ad alta fedeltà sono migliori per la documentazione a causa del loro maggiore livello di dettaglio. Questi wireframe includono spesso informazioni su ogni particolare elemento della pagina, incluse dimensioni, comportamento e / o azioni relative a qualsiasi elemento interattivo