Come costruire Wireframes

May 28

I wireframe sono fasi essenziali del processo di sviluppo web. Un wireframe fornisce una descrizione visiva di come il prodotto finale funzionerà. Simile a uno schema per un saggio o di un progetto edilizio, l'obiettivo primario di creare wireframe è quello di organizzare e tracciare gli elementi funzionali delle pagine che si stanno progettando. Più semplice di tutti gli effetti mock-up, wireframe esprimono in modo efficiente i requisiti visivamente per facilitare la comunicazione e la collaborazione con le parti interessate e informare gli sviluppatori come costruire il prodotto.

istruzione

1 La ricerca esigenze degli utenti e le esigenze. Se non ci sono requisiti formali già documentato, pensare ai compiti che l'utente deve completare o le informazioni che devono essere trasmesse con il tuo sito o applicazione. Progetta il tuo sito in modo che gli utenti possano compiere le azioni desiderate con distrazioni minime, clic del mouse e lo scorrimento del browser.

2 Creare più schizzi con carta e penna. Invita le parti interessate e gli utenti di delineare le loro visioni pure. Carta e penna implica poco impegno, così vi sentirete liberi di espandere le vostre idee e creare molte versioni senza timore di fatica sprecata.

3 Selezionare gli strumenti che verranno utilizzati per costruire il tuo wireframe. Ci sono molti prodotti costruiti specificamente per lo sviluppo wireframe, che vanno da strumenti sofisticati - come OmniGraffle e Axure - a strumenti web-based gratuito oa basso costo, come Gliffy. Se non si dispone di un software wireframe-building, è possibile creare wireframe con il software grafico comune desktop, come Microsoft PowerPoint o Microsoft Visio.

4 Tracciare la mappa del sito, numero di pagine e la navigazione in generale. (Questo è indicato anche come l'architettura del sito.) Pensateci i casi d'uso e le esigenze e costruire la navigazione in modo pagine scorrono logicamente in base alle esigenze dell'utente.

5 Disporre le sezioni principali del sito o applicazione utilizzando le migliori idee del brainstorming e esercizi di schizzo. Alcune sezioni comuni sono barre di navigazione, intestazioni, piè di pagina, aree di testo e le unità pubblicitarie. Creare un wireframe per ogni pagina o stato visivo all'interno della vostra architettura del sito.

6 Aggiungere elementi della pagina più piccoli all'interno delle sezioni create. oggetti luogo come pulsanti, i segnaposto immagine, segnaposto di testo, link, barre di scorrimento e simili in wireframe. Etichettare ogni oggetto, se del caso.

7 Annotate le vostre wireframe, sottolineando i principali elementi di funzionalità e transitorie. Questo è importante per il trasporto alle parti interessate e agli sviluppatori come l'utente può interagire con le pagine.

8 Chiedi un feedback ed effettuare revisioni. Pensate di wireframe come un mezzo per un fine piuttosto che un risultato finale. Aspettatevi di effettuare revisioni multiple fino a quando le parti interessate e gli utenti concordano sul fatto che il progetto soddisfa i requisiti e gli obiettivi degli utenti. Dopo il consenso è raggiunto, lo sviluppo del prototipo può iniziare.