Utilizzo di Wireframes per semplificare il processo di sviluppo
La creazione di un wireframe è uno dei primi passi da compiere prima di progettare un sito web.
Un wireframe consente di organizzare e semplificare gli elementi e i contenuti all'interno di un sito Web ed è uno strumento essenziale nel processo di sviluppo.
Un wireframe è fondamentalmente una rappresentazione visiva del layout del contenuto in un design di un sito web .
Il wireframe funge da prototipo che mostra il posizionamento delle funzionalità della pagina, come intestazione, piè di pagina, contenuto, barre laterali e navigazione.
Specifica anche il posizionamento degli elementi all'interno di queste aree di contenuto. Se vuoi sviluppare un sito che corrisponda esattamente ai requisiti del cliente e ridurre al minimo le revisioni del progetto, wireframing ti manterrà in pista.
Vantaggi del Wireframing
La creazione di un wireframe offre al cliente, allo sviluppatore e al progettista un'opportunità per dare uno sguardo critico alla struttura del sito Web e consentire loro di effettuare revisioni facilmente all'inizio del processo.
Wireframing offre i seguenti vantaggi chiave:
- Fornisce al cliente una prima visione ravvicinata del design del sito (o riprogettazione).
- Può ispirare il designer, dando vita a un processo creativo più fluido.
- Fornisce allo sviluppatore un'immagine chiara degli elementi che dovranno codificare.
- Rende chiara la chiamata all'azione su ogni pagina.
- È facile da adattare e può mostrare il layout di molte sezioni del sito web.
Strumenti per lo sviluppo di wireframe
Hai molti strumenti tra cui scegliere quando crei un wireframe:
- Schizzi a mano su carta è sempre un buon punto di partenza per qualsiasi designer. Fornisce un modo semplice e veloce per mettere a fuoco e organizzare. Se sei molto preciso con lo sketch, potresti anche usarlo come wireframe finale. (Vedi figura 1)
- Flowchart o software di mappatura mentale , come ad esempio Visio . Queste opzioni software sono dotate di elementi preconfezionati che consentono di creare facilmente rappresentazioni del diagramma di flusso del wireframe.
- Software di prototipazione Web come Gliffy o Balsamiq . Strumenti come questi sono stati creati appositamente allo scopo di generare wireframe e hanno funzionalità di prototipazione facili da usare.
- Software grafico , come Photoshop o Illustrator. Il vantaggio di usare questi strumenti è che il wireframe può essere convertito direttamente in un mockup grafico del design del sito web; tuttavia, il lato negativo è che dovrai creare tutti gli elementi a mano.
- (X) I wireframe HTML sono quasi come i veri e propri siti. È possibile disporre il wireframe con il codice prima di applicare gli stili, oppure è possibile creare un layout completamente stilizzato e ad alta fedeltà che assomigli molto al design finale. (Vedi figura 2)
In definitiva, lo sviluppatore o il progettista dovrebbe selezionare lo strumento che preferiscono. Personalmente, uso Photoshop perché mi piace il modo in cui organizza il processo e con quale facilità posso convertire il file in un mockup.
Esempio di wireframe
Il livello di dettaglio in un wireframe dipende da diversi fattori, tra cui: la direzione e il contenuto forniti dal cliente, la complessità del contenuto, la distanza del processo e la quantità di dettagli che desideri includere .
Ecco alcuni esempi di wireframe creati con diversi strumenti e con diversi livelli di dettaglio e colore:
Figura 1: questo semplice schizzo wireframe per il sito web Coastal Capital Partners (ora ribattezzato Broad Reach Retail Partners) è stato utilizzato per creare prototipi grafici e, infine, il progetto finale. Di Mike Rohde .
Figura 2: wireframe HTML a bassissima fedeltà. Utile per dimostrare come sarà un sito prima che lo stile venga aggiunto. Molto utile per gli utenti ipovedenti.
Figura 3: wireframe a bassa fedeltà per la comunità degli animali domestici di Embrace , di Jesse Bennett-Chamberlain del 31Treo .
Figura 4: Mockup preliminare di uno strumento di social conference basato su TiddlyWiki per l'utilizzo a Le Web 3. Le note per accompagnarlo sono a tiddleleweb.tiddlyspot.com . Wireframe di Phil Hawksworth.
Figura 5: Questo è basato sull'uso avanzato di un sistema di pubblicazione di blog (WordPress). Di Mattheiu Mingassson o Activeside Internet Strategies and Consulting .
Figura 6: un wireframe per la comunità degli animali domestici di Embrace , di Jesse Bennett-Chamberlain del 31Treo .
Figura 7: un wireframe con colori e immagini. Pagina dell'autore wireframe di Bokhandel .
Figura 8: un altro wireframe con colore. Di Mattheiu Mingassson di Activeside Internet Strategies and Consulting .
Migliori pratiche
Per ottenere risultati ottimali, ecco alcune cose importanti da tenere a mente quando si sviluppa un wireframe:
- Semplicità. La chiave è di mantenerlo abbastanza semplice da essere chiaro per il cliente e flessibile per il progettista, ma abbastanza dettagliato da guidare il programmatore. Come accennato, è possibile creare un wireframe ad alta fedeltà, ma farlo all'inizio del processo di sviluppo potrebbe creare confusione per il cliente, che potrebbe scambiarlo per una bozza finale.
- Lavora in scala di grigi. Quando crei elementi per un wireframe, è meglio lavorare in scala di grigi in modo che tu possa concentrarti sul layout senza essere distratto dal progetto. Se ti è stato assegnato un logo a colori, convertilo anche in scala di grigi. Per distinguere e classificare vari elementi, mostra forme e contorni in diverse sfumature di grigio.
- Utilizza i wireframe in tandem con una sitemap. Un wireframe è una rappresentazione visiva di una buona mappa del sito, non una sostituzione. Una sitemap è uno strumento utile per qualsiasi sito Web e sarebbe sicuramente utile fare riferimento durante il processo di sviluppo.
- Concentrati sul risultato desiderato. Avere una chiara comprensione di come il cliente desidera che gli utenti rispondano alla pagina prima di creare il wireframe. Gli inviti all'azione dovrebbero essere molto chiari semplicemente guardando il wireframe.
- Crea un wireframe di dimensioni normali se è per un sito web. Ciò fornirà la rappresentazione più accurata della pagina effettiva.
- Pianificare gli elementi proteggendo il contenuto in anticipo. Nel migliore dei casi, il tuo cliente ti avrà già fornito gli elementi che dovrebbero apparire in ogni pagina, come logo, annunci, lettori Flash o video, funzioni, sezioni di navigazione e elementi della barra laterale, dell'intestazione e del piè di pagina. Se non hai ancora questa informazione, incontra il tuo cliente e ottieni (o crea) una sitemap. Se stai riprogettando elementi esistenti, puoi raccoglierli da un'attenta revisione del sito web. In questo scenario, assicurati di confermare prima con il tuo cliente che non ti sarà richiesto di aggiungere o rimuovere elementi, perché non avere una chiara comprensione delle loro aspettative rallenterà il processo.
Scala di grigi e colore
Quando si crea un wireframe, lavorare in scala di grigi aiuta a mantenere l'attenzione sulla funzione primaria del processo , che è finalizzare il layout, non il design (vedere la Figura 3). Un altro rischio di lavorare a colori è che il cliente potrebbe scambiare il wireframe per il modello finale.
Il colore può, tuttavia, dimostrarsi utile quando si mostra la posizione di ciascun invito all'azione. Poiché una pagina può contenere diverse chiamate all'azione, la priorità è importante. I wireframe possono aiutare a determinare quale call to action attirare l'attenzione dell'utente all'inizio.
Recentemente ho lavorato a un progetto che aveva un logo molto vivace, che, in quel caso, era il principale invito all'azione perché rappresentava una rivista appena lanciata.
Quando si usa il colore, è più facile capire se alcuni elementi stanno sopraffacendo la chiamata primaria all'azione. Questo processo rientra ancora nel regno del wireframing, piuttosto che del design del mockup, poiché le posizioni degli elementi sono ancora determinate.
Il colore può essere gradualmente aggiunto al wireframe mentre il progetto avanza , il che è più efficiente di andare avanti con i prototipi prima che la posizione degli elementi sia bloccata. In questo modo, il software grafico può aiutarti a passare direttamente a un mockup quando sei pronto.
Cosa evitare
Come altri aspetti del processo di sviluppo, il wireframing può avere le sue insidie se non viene eseguito correttamente. Ecco alcuni suggerimenti su cosa evitare per ottenere i risultati più efficaci:
- Troppe cose che accadono nella pagina. Lascia un ampio spazio bianco in modo che il disegno non appaia troppo occupato o ingombrante.
- Enfasi sul colore e sul design. Wireframing è per decidere il layout e la posizione degli elementi. Anche se un wireframe può influenzare il design, l'aggiunta di grafica e colore potrebbe solo distrarre dal suo scopo.
- Troppi dettagli Puoi sempre aggiungere più dettagli in seguito, ma se includi troppo all'inizio, il cliente potrebbe confondere il wireframe per il modello finale.
Se sei interessato a saperne di più sui wireframes, Wireframe Magazine è una grande risorsa che condivide campioni, discute tecniche e risolve problemi relativi all'architettura dell'informazione.
La creazione di un wireframe per il sito Web del cliente rappresenta uno strumento di comunicazione efficace per tutte le parti coinvolte.
Anche la costruzione di un semplice wireframe farà risparmiare tempo a lungo termine e faciliterà il processo di sviluppo per designer, sviluppatori e client.
Scritto esclusivamente per WDD da Eric Shafer.
Usi wireframe per il tuo design? Quali sono alcuni dei modi migliori per creare wireframe efficaci?