Mentre non ogni progetto ha bisogno di un wireframe, utilizzando uno per costruire un layout di progettazione può aiutarvi a ottenere l'approvazione iniziale dal vostro client il flusso del contenuto senza distrarli con colori e texture. Wireframes consentono inoltre di brainstorm la funzionalità e il fondamento del vostro disegno. Si può facilmente creare un wireframe nel vostro programma di editing grafico, o una moltitudine di strumenti online e kit grafici.

Istruzioni

Prima di iniziare

1

Decidere quali elementi saranno presenti nel vostro disegno. Elementi comuni da includere sono: navigazione, aree di contenuto, widget o caselle di funzione, le immagini e pulsanti. Un esempio di una lista si potrebbe fare sarebbe includere: navigazione, slider immagini, caselle di introduzione, icone sociali della rete, ultimo articolo link e un copyright/piè di pagina

2

Determinare la larghezza del vostro disegno che si desidera iniziare con. Dimensioni di layout standard sono 960px, 980px e 1020px, ma un beneficio del wireframe è che ti permette di sperimentare con la scala degli elementi fino a quando tutto sembra giusto.

3

Scegliere un metodo per creare il tuo wireframe. Creare un wireframe a mano può essere il modo più semplice, ma non può tradurre anche in un file digitale che può essere utilizzato come un progetto preciso per il composito. Programmi software come Adobe Photoshop, Illustrator o InDesign non sono davvero ottimali per la creazione di wireframe o, ma assicurano massima compatibilità con il vostro disegno composito o effettivo. L'opzione finale è quello di utilizzare uno strumento wireframing, molti dei quali consentire la collaborazione ed esportare in formati di disegno-friendly.

Creare un Wireframe da zero

4

Creare un nuovo documento che è almeno 1680px ampia e 980px alta. Sarete in grado di immaginare come il vostro disegno e la sua scala apparirà quando ha presentato in un browser web se l'area di lavoro è più grande il vostro disegno. Quando il disegno a mano, utilizzare carta di griglia, se possibile, dove un quadrato è uguale a 10 pixel. Senza una griglia, è possibile convertire un pollice a 100 pixel.

5

Iniziare creando un rettangolo centrato utilizzando la larghezza e l'altezza della vostra partenza dimensioni di layout, che agirà come il frame iniziale. Disegnare ogni elemento nella posizione desiderata utilizzando forme semplici e sfumature di grigio. Se si utilizza software, Wireframe e kit grafici dell'interfaccia utente tornare utile in questa fase, fornendo elementi standard, che è possibile inserire all'interno il wireframe come icone, caselle di testo, ricerca bar, menu e così via.

6

Etichettare ogni elemento chiaramente con grafia ordinata o un font sans-serif. Se si desidera includere dimensioni, farlo utilizzando una linea tratteggiata di colore chiaro all'esterno dell'elemento e assicurarsi che l'elemento rappresenta i pixel etichettati con precisione.

7

Aggiungere note di progettazione nei margini o tenerli in un file separato per presentare a fianco il wireframe. Le note di progettazione possono includere idee relazionati al colore, funzionalità o scopo degli elementi all'interno del wireframe. Se si utilizza un programma software, assicurarsi che le note sono discreti e chiaramente si riferiscono agli elementi identificati per nome o numero.

8

Salvare il file come JPG per la massima compatibilità con qualsiasi software che il client può utilizzare per la visualizzazione. Se utilizzando un software che supporta i livelli, salvare una copia a strati per te così possono facilmente modificare gli elementi più tardi, o utilizzare questo wireframe nuovamente come un modello per un altro progetto. Se hai disegnato a mano il wireframe, è necessario acquisire l'immagine e ridimensionare per adattarsi la rappresentazione accurata delle dimensioni che si imposta.

Creare un Wireframe utilizzando Software di Wireframe

9

Iniziare creando le dimensioni di layout principale, che fungeranno da cornice primaria. Maggior parte dei software wireframe dotato di layout standard dimensioni da scegliere. Utilizzare uno sfondo di luce colorato o trasparente.

10

Trascinare e rilasciare o aggiungere elementi dalle librerie all'interno dello strumento. Cose da tenere a mente sono spazi vuoti, flusso di contenuto e l'esperienza utente previsto. È possibile regolare la scala e le dimensioni degli elementi in questi strumenti trascinando le maniglie di dimensione.

11

Etichettare ogni elemento chiaramente facendo clic il testo dell'etichetta all'interno di ogni elemento e digitando un nome o un numero. Se si desidera includere dimensioni, farlo utilizzando una linea tratteggiata di colore chiaro all'esterno dell'elemento e assicurarsi che l'elemento rappresenta i pixel etichettati con precisione. Alcuni strumenti di wireframing farà questo per voi automaticamente.

12

Aggiungere note di disegno corrispondente a ogni elemento a margine o in un documento separato. Le note di progettazione possono includere idee relazionati al colore, funzionalità o scopo degli elementi all'interno del wireframe. Se si utilizza un programma software, assicurarsi che le note sono discreti e chiaramente si riferiscono agli elementi identificati per nome o numero.

13

Esportare o salvare il file come PDF o JPG, quindi il tuo cliente può visualizzare facilmente esso. Se il vostro strumento di wireframe selezionate supporta la collaborazione, è una buona idea di invitare il tuo client di accedere e lasciare commenti.