Un sito web wireframe è un modo semplice per pianificare la struttura organizzativa di un sito web prima di progettare l'interfaccia utente vero e proprio. Questo può essere un utile strumento per il grafico e scrittore di contenuti, che sarà in grado di progettare l'interfaccia e contenuti attorno ai requisiti strutturali.

istruzione

Considerazioni di base di layout

1 Determinare il layout di base, come ad esempio quante colonne del sito avrà, e se avrà un'intestazione o piè di pagina. Disegnare questi.

2 Scegliere una posizione per la navigazione del sito. Una regola di buona progettazione sito è quello di posizionare la navigazione più vicino alla parte superiore della pagina come possibile.

3 Decidere dove posizionare l'azienda o un sito web il logo e titolo. Questo dovrebbe anche essere posizionato nella parte superiore della pagina da qualche parte.

L'aggiunta di funzionalità aggiuntive e istruzioni

4 Se il tuo sito include funzionalità come la ricerca o il login, scegliere una collocazione per questi articoli. Tipicamente questi sono mostrati come una scatola proprio come apparirebbero sul sito web vero e proprio.

5 Alcuni sceglieranno di wireframe le sezioni di un sito web. A questo punto, potrebbe rivelarsi utile per iniziare a pianificare la struttura di navigazione del sito, noto anche come una mappa del sito. Questo consentirà di evitare i conflitti di navigazione imprevisti.

6 Con la disposizione finito, ora etichettare le varie sezioni che avete creato, specificando il tipo di informazioni da inserire all'interno di ogni sezione vale a dire "News", "navigazione", "Entra".

Applicando il layout di un sito web semplice Mockup

7 Con questi passaggi fatto, e il layout generale concordato, la progettazione di un immagine-less HTML unica versione del sito, utilizzando il testo semplice senza formattazione dei caratteri e dei collegamenti. Non includere qualsiasi immagine. Includere una breve descrizione dello scopo di ogni pagina vicino alla parte superiore per ricordare a coloro che lavorano su di esso quale sia lo scopo di ogni pagina è.

8 Aggiungere nel contenuto di questo disegno di base. Anche in questo caso, lasciare fuori qualsiasi formattazione. Assicurarsi che il contenuto è di gradimento del cliente. Alcuni esperti suggeriscono di lasciare la descrizione della pagina sulla pagina, a questo punto per evitare che il contenuto da deriva troppo lontano dal piano originale come le cose vengono aggiunti ed eliminati.

9 Creare segnaposti per le immagini da mettere sul sito web. Se si conosce la dimensione di ciascun elemento di immagine, creare un'immagine solida di colore marcato con la descrizione di immagini per graphic designer del tuo sito per fare riferimento e posizionarlo sul mock-up.

10 Con le specifiche di immagine concordati, il wireframing è ora completo e il sito può procedere alla fase di progettazione vera e propria.

Consigli e avvertenze

• Quando si utilizza un programma come Microsoft Visio o Word, in modo che i suoi colleghi hanno il programma necessario per aprire il file. Mentre alcune applicazioni offrono un lettore che permette all'utente finale di aprire i file in un formato "read-only", altri no.
• Non progettare elementi di interfaccia effettive a meno che non si desidera garantire che essi fanno nel layout finale. Dare il vostro progettista e contenuti grafici creatori più libertà è preferibile perché essi probabilmente hanno più esperienza nei migliori pratiche per la visualizzazione delle informazioni.