May 14
Un wireframe è una rappresentazione visiva di come un layout proposto sarà su un sito web. Questo mockup si compone di forme, che vengono etichettati in base alla funzione e dimensione. Ad esempio, un rettangolo nella parte superiore dell'immagine potrebbe essere definita "Striscione 800 x 100" per rappresentare un'intestazione che è 800 pixel wide-by-100 pixel di altezza. Altri elementi della pagina che possono essere rappresentati sono: la barra di navigazione, contenuto principale, e piè di pagina.
Utilizzare il passo wireframe del processo di sviluppo web per aiutare a garantire che il layout proposto soddisfa le esigenze e le aspettative del cliente e degli utenti.
1 Determinare quali elementi il cliente ha bisogno di inserire nella pagina Web. Avrebbe dovuto fornito queste informazioni quando lo si intervistato in merito al progetto. elementi possibili includono un banner, navigazione, caratteristica blog e una sezione di notizie.
2 Disegnare potenziali layout. Prova tirocini diversi per ogni elemento. Decidere che cosa sarà di facile utilizzo, presentare le informazioni in modo più efficace e come può essere esteticamente gradevoli.
3 Eseguire la scansione del disegno al computer. Questo vi darà un punto di riferimento di base per quando si inizia il rendering del wireframe in un programma di grafica. Anche se questo passaggio è facoltativo, ti dà una buona idea da cui partire.
4 Aprire il programma di progettazione grafica della vostra scelta. Molti designer preferiscono usare Adobe Illustrator, ma Photoshop, Paint o qualsiasi altro programma che ha la capacità di disegnare, luogo e delle etichette forme sarà sufficiente. Aprire il disegno in questo programma se acquisito in.
5 Salvare il file con un nome descrittivo. Salvare ogni pochi minuti d'ora in poi al fine di garantire una minima perdita se qualcosa dovesse accadere al file mentre si lavora sul wireframe.
6 Disegna scatole per abbinare la forma e le dimensioni delle caselle nel vostro disegno. Nella maggior parte dei programmi, si utilizzerà lo strumento rettangolo.
7 Assegnare un colore di riempimento solido per ogni casella. E 'meglio usare colori neutri o monocromatici per mantenere il wireframe semplice, con alcuni valori più scuri e più chiari per illustrare il layout.
8 Spostare ogni casella per la sua posizione prevista nel layout. Ricordate di selezionare lo strumento freccia prima di spostare il contenitore, per evitare che il disegno un'altra casella su quella esistente.
9 Etichetta ogni scatola con il nome della sezione del layout che rappresenta. Includono la dimensione, in pixel, nell'etichetta. Alcuni progettisti includono una breve descrizione dello scopo di quella sezione all'interno dell'etichetta.
10 Salvare il wireframe in un formato che vi permetterà di condividere con il vostro cliente. Il formato tipico del file è in formato PDF o JPEG. Salva come file JPEG se si sta inserendo in un documento di proposta di più ampio.