Cattive abitudini nel lontano passato, quando acquisivamo nuove idee di progetto e documenti sui requisiti degli utenti dai nostri clienti, forse abbozza alcune idee e lanciamoci nell’intrigante progettazione di Photoshop.

Il nostro ragionamento per quella metodologia era di raggiungere immediatamente l’esaurimento del design gate per consentire il tempo per la revisione.

Dopo un po’ di tempo, ci siamo resi conto che abbiamo passato molto tempo a progettare, perché? Le revisioni hanno richiesto tutto il tempo. Le revisioni erano complicate; abbiamo dovuto adattare layout, grafica e tipografia. Tutto era frustrante, disastroso per le tempistiche dei progetti, preoccupante per i clienti e noioso per noi. Ci è voluto un po’ prima che ci rendessimo conto che avevamo bisogno di un approccio diverso. Abbiamo deciso di tornare al processo iniziale di "Square One" che avevamo ignorato in precedenza "Wire-framing". Abbiamo iniziato con i wireframe Gray-box inclusi nel nostro processo di progettazione, quindi siamo passati a un altro processo e lo abbiamo aggiunto al processo di progettazione.Alla fine il modello stava andando a posto, grazie a "Wire-framing", ci ha fatto risparmiare tempo e ci ha aiutato ad affrontare i problemi in precedenza.Per questo motivo, voto il wireframing come il "primo cancello" nel processo di progettazione.

Progetti di esperienza utente wire-framing

Chissà, nella prima fase puoi riconoscere potenziali sfide di usabilità nei tuoi progetti. A volte un ottimo concetto di progetto con requisiti utente rigorosi (URS), durante il processo iniziale sembrano andare a posto. Ancora peggio accade quando iniziamo a fare piani per i documenti, "Cosa è successo?" abbiamo ignorato il wireframe che richiede solo pochi minuti per disegnare un piano rispetto al colorato Photoshop. Meglio iniziare ad adeguarsi prima che dopo.

Wireframe come strumento di gestione del tempo

La gestione del tempo è una tecnica importante per ogni progetto di successo se un progetto ha una tempistica ristretta; potresti pensare "perché sprecare il mio tempo con il wireframing, quindi è meglio che passi al colorato Photoshop". Inizialmente abbiamo commesso quell’errore, ma invece abbiamo finito per rivedere l’intero concetto di cui richiedeva tempo e uno spreco di risorse. La revisione di scatole grigie e schizzi è molto più semplice rispetto alla revisione di disegni a colori incorporati con diversi elementi complessi.

Il wireframe viene utilizzato per creare una dimensione reale e corretta di una pagina. Una volta approvato dal cliente, abbiamo solo bisogno di un rimedio grafico per migliorarne l’aspetto. Il trucco è che se i wireframe, gli schizzi e le caselle grigie sono in ordine, non avremo tempo per la revisione. Passeremo invece alla parte "visiva" del processo successivo.

Wire-framing per l’incollaggio del cliente

Il layout della pagina con i colori a volte capita di essere una distrazione per i nostri clienti; forse un cliente detesta il colore "Viola" le emozioni del cliente fanno fatica a concentrarsi sul piano. I loro feedback possono essere negativi a causa dei loro sentimenti. Potrebbero finire per chiedere "Ricomincia", i disegni potrebbero andare bene, ma l’unica cosa che irrita il cliente è il colore "viola". Pertanto l’utilizzo di scatole grigie e schizzi è un modo efficace, perché eliminerà le distrazioni degli elementi.

Un wireframe aiuterà a ottenere feedback in merito al dimensionamento e al layout senza che il cliente si concentri solo sull’aspetto. L’utilizzo dell’approccio wireframe ci aiuta anche a conoscere meglio un cliente, cosa gli piace? Gli stili, la tipografia, ecc., La presentazione wire-framing, è come un momento di legame, il loro feedback e l’interazione ti fanno conoscere loro e i loro progetti e cosa aspettarti nelle fasi future del progetto? Quando stai abbozzando una bozza su carta, il cliente continuerà a commentare su icone, pulsanti, caratteri, ecc. Finiranno dicendo che preferiscono pulsanti più grandi rispetto a quelli più piccoli ecc. Alla fine, un designer impara dai clienti e inizia a guardare per modelli di feedback e apprendimento, avere conoscenza potrebbe farti risparmiare tempo, energia e risorse.

7 cose affascinanti sui wireframe

1 Aumenta l’esperienza di lavoro di squadra

Il processo di wireframing riunisce diversi gruppi di persone con varie competenze; tutti fanno parte del processo del progetto. Project manager, designer, sviluppatori si uniscono tutti per raggiungere un obiettivo. Questo è prezioso perché migliora il lavoro di squadra e fa in modo che i compagni di squadra si capiscano di più. Con il modello "a cascata", i progetti possono essere effettivamente interrotti.

2 Comunicazione trasparente

Flusso di comunicazione fluido, soffrivamo dove alcuni membri del team come gli sviluppatori non erano inclusi nella discussione del progetto. Includendo ogni singola persona nel processo di wireframing, il problema viene risolto. Uno sviluppatore può individuare in anticipo un problema che potrebbe non essere presente nelle e-mail e nelle chat. D’altra parte, le specifiche sono eleganti e belle ma più difficili da visualizzare.

3 Coinvolgi i clienti

Un wireframe aiuterà a ottenere feedback in merito al dimensionamento e al layout senza che il cliente si concentri solo sull’aspetto. L’utilizzo dell’approccio wireframe ci aiuta anche a conoscere meglio un cliente, cosa gli piace? Gli stili, la tipografia, ecc., La presentazione wire-framing, è come un momento di legame, il loro feedback e l’interazione ti fanno conoscere loro e i loro progetti e cosa aspettarti nelle fasi future del progetto? Quando stai abbozzando una bozza su carta, il cliente continuerà a commentare su icone, pulsanti, caratteri, ecc. Finiranno per dire che preferiscono pulsanti più grandi rispetto a quelli più piccoli ecc. Alla fine, un designer impara dai clienti e inizia a guardare per modelli di feedback e apprendimento, avere conoscenza potrebbe farti risparmiare tempo, energia e risorse.

4 diversi approcci

Il brainstorming consente alle persone di trovare i vari modi di affrontare i progetti. Sono facili da produrre e disegnare soprattutto sui fogli, tutto ciò di cui hai bisogno è una matita e un pezzo di carta, e affrontiamo i problemi da diverse angolazioni e li disegniamo su un pezzo di carta. Puoi combinare ed eliminare l’assegnazione fino a quando non ne hai due o quattro che hanno un senso.

Vari approcci includono Approccio tecnico: funzionalità tecnologiche nuove e di tendenza, esperienza degli utenti e test di usabilità su come gli utenti raggiungeranno rapidamente un obiettivo e un’attività prima di annoiarsi, quindi porta all’interruzione dell’attività, di nuovo Approccio ambientale: chi sono le parti interessate? Quali campi ci rivolgiamo? Quali tipi di caratteristiche sono importanti che possono facilmente adattarsi a un particolare stakeholder e campo focalizzato?

5 Una base per i test

Con 3 o 5 prototipi, puoi testare uno schizzo di progetto con utenti reali. C’è la percezione che possiamo testare solo utilizzando il prototipo HTML completato, ma questo non è vero. Inoltre, i wireframe disegnati a mano possono essere utilizzati per i test. Puoi chiedere il suggerimento dell’utente sui pulsanti che vorrebbero cliccare; possono anche ottenere feedback sui tag di denominazione e infine possono aiutare a verificare se hanno la giusta gerarchia visiva. Il test tramite wireframe aiuta a identificare i problemi in anticipo.

6 Progetto più veloce prodotto

Ci vogliono poco tempo e denaro per prototipare un progetto basato su wireframe, questo perché diversi gruppi di persone sono stati coinvolti nel processo di wireframe. Pertanto gli errori imprevisti che potrebbero causare revisioni vengono affrontati prima del progetto reale. Anche in questo caso il layout del progetto è stato visto dai clienti e quindi il progetto finale è stato approvato. Ciò riduce il tempo per più concetti.

Wireframe con Photoshop

Scatole grigie e schizzi con photoshop.

Passaggio 1: raccogliere ulteriori requisiti dai clienti, quindi "accendere" per colorare completamente Photoshop e avviare il wireframing.

Passaggio 2: crea il documento basato su un sistema a 960 griglie, (1100 pixel di larghezza e 760 di altezza) puoi imparare questo in "impostazione della griglia in Photoshop".

Passaggio 3: Paint Bucket Tool (G) viene utilizzato per riempire lo sfondo con un colore grigio chiaro per spiegare che ci sarà un colore o un’immagine di sfondo.

Passaggio 4: seleziona lo strumento Rettangolo dalla barra degli strumenti e disegna una casella per simboleggiare l’area del contenuto. Stiamo usando il sistema a griglia 960; la mia scatola disegnata sarà larga 940 pixel. Rendi il colore di primo piano bianco usando "Paint Bucket Tool" in modo che si presenti sullo sfondo grigio.

Passaggio 5: per rendere il processo molto più veloce, basta (digitare la lettera D) per impostare il primo piano su nero o qualsiasi colore che ti si addice e lo sfondo su bianco o qualsiasi colore. Quindi disegna riquadri neri per rappresentare le aree del contenuto, anche in questo caso puoi scegliere di modificare l’opacità degli sfondi per farli apparire grigi o di qualsiasi colore.

Passaggio 6: all’interno della griglia, aggiungi un rettangolo per rappresentare qualsiasi cosa. In questo caso "Pulsante di accesso", digitare il valore di opacità ("30") per ridurre l’opacità del rettangolo ("30") dopo che il rettangolo è stato disegnato. Puoi aggiungere del testo usando lo strumento testo (T) nella barra degli strumenti testo per aggiungere il testo "LOGIN" sopra la casella. Aggiungi un altro rettangolo per creare l’area di navigazione, ancora una volta, abbassa il valore di opacità per renderlo grigio.

Passaggio 7: aggiungere rettangoli crea le aree della colonna del contenuto. Usa un layout a due colonne con una colonna del contenuto principale leggermente più grande e una colonna più piccola per l’immagine della home page. Imposta l’opacità al 10% per le colonne e aggiungi anche un altro rettangolo per rappresentare il piè di pagina nella parte inferiore della pagina.

Pagina 8: Nell’area del contenuto aggiungi testi fittizi usando il comando Tipo > Incolla Lorem Ipsum di Photoshop.

Altre applicazioni

Altra applicazione per wire framing che può essere utilizzata da designer non grafici per creare wireframe interattivi e belli.

OmniGraffle

È come Micro-Visio, ha degli stampini molto carini che possono essere utilizzati per la progettazione high-tech e le caratteristiche sono sorprendenti. Questo è il migliore.

Mock Ninja

Il mio preferito, GRATUITO da usare, ha caratteristiche e stencil molto interessanti che possono essere utilizzati per costruire un concetto di progetto interattivo. Consente agli utenti di lavorare offline e online.

Grafici adorabili

Questo è un bene per i principianti, è GRATUITO e le interfacce sono facili da capire.

Balsamico

Un modo rapido per trasmettere concetti di design a un cliente, ha una demo gratuita che consente agli utenti di salvare il prodotto finale. Ha tutti gli elementi necessari per disegnare e un aspetto unico del disegno a mano.

Disegno di Google Drive

Può essere utilizzato per il mock-up dello schermo, non è interamente di tipo wire framing, ma ha caratteristiche come un buon strumento di collaborazione, veloce, gratuito e facile da usare.

Scintillante

Gliffy È più facile da usare, è più fluido e offre funzionalità di diagrammi come diagrammi di flusso e piani, ha diagrammi di Venn con processi di rete e UML che ha esportazioni in SVG, PNG e JPEG.

Lumzy

È un’applicazione flash, fornisce una piattaforma di collaborazione, è gratuita, veloce e infine ha diversi tipi di controlli facili da usare.

Moqups

Gratuito, veloce e facile da usare, non ho bisogno di un plug-in del browser, il collegamento di schermo e pulsante viene eseguito in modo impeccabile in modo che una persona possa pubblicare una dimostrazione affinché i clienti possano visualizzarla e utilizzarla. È consentita l’esportazione di immagini secondo le specifiche. Oltre a questo, in Moqups sono stati integrati HTML5 e JavaScript standard.

Fonte di registrazione: instantshift.com