it-swarm.it

Usando il colore nei wireframe ... è un "no no"?

Recentemente, è stato avviato un dibattito interno sull'uso del colore nei wireframe. Un designer junior aveva finito un bel set di wireframe e alla fine gli è stato detto di trasformare tutto in scala di grigi! È stato detto che il colore non dovrebbe essere in wireframe.

Vedo alcuni motivi per cui la progettazione in scala di grigi può aiutare:

  • per accessibilità (quindi non sei costretto a fare affidamento sui colori per la differenziazione)
  • non confondere la progettazione visiva in wireframe (a volte i clienti possono associare una scelta di colore per essere una decisione di progettazione visiva invece di un modo per comunicare la differenza visiva)

In realtà utilizzo una tavolozza di icone colorate e userò il colore per comunicare la differenza visiva. A volte c'è solo così tanto che puoi fare usando diverse tonalità di grigio o usando motivi.

Qual è la pratica standard là fuori? Ho visto wireframe con e senza colore.

22
milesmeow

Sembra che i tuoi colleghi si siano persi un po 'in ipotesi senza pensare a quale sia lo scopo di un wireframe. Cominciamo con na definizione libera fornita da Wikipedia :

Un wireframe di un sito Web (anche "frame wire web", "wireframe web", "wireframing web") è una guida visiva di base utilizzata nella progettazione dell'interfaccia per suggerire la struttura di un sito Web e le relazioni tra le sue pagine. Un wireframe di una pagina web è un'illustrazione simile del layout degli elementi fondamentali nell'interfaccia. In genere, i wireframe vengono completati prima di sviluppare qualsiasi opera d'arte.

Come con qualsiasi parola o termine, è importante considerare cosa significa veramente. Un modello wireframe è un termine usato nella modellazione 3D quando si parla della rappresentazione della struttura fisica di un modello poligonale, che viene reso mostrando i punti di collegamento tra i vertici. Qual è il punto di un modello wireframe? È mostrare le "viscere" di una struttura in modo da comprenderne meglio la composizione.

Quando si passa al wireframing del sito Web mentre Wikipedia ne discute, dovremmo considerare come si applica quel significato e la definizione di Wikipedia lo inchioda: "una guida visiva di base utilizzata per suggerire la struttura di un sito Web e le relazioni tra le sue pagine".

Come puoi dire, non si fa menzione del colore o di come dovrebbe apparire quella guida visiva. Tutto ciò che conta è che suggerisce come funziona la struttura del sito web. Finché lo raggiunge, è un wireframe efficace. Quindi, ad esempio, questi sono tutti wireframe "validi":

  • schizzi su un tovagliolo
  • schizzi in 37signals 'Draft o qualche altra app su iPad
  • wireframe dall'aspetto abbozzato realizzati utilizzando uno strumento come Balsamiq Mockups
  • wireframe dall'aspetto più stretto realizzati usando qualcosa come Axure o Illustrator
  • progetti leggeri di un sito realizzato in Photoshop, in cui la struttura della pagina è resa evidente includendo elementi di design laddove pertinenti
  • Disegni esportabili HTML in Fireworks che consentono di vedere in quali elementi è composta una pagina
  • wireframe HTML/CSS completamente interattivi

È solo una questione di fedeltà e dettaglio. Forse dovresti chiarire che tipo di fedeltà ci si aspetta dal prodotto e guidare i tuoi progettisti lungo quel percorso. Ma non si tratta di "dovrebbe essere usato il colore in un wireframe" - se il colore aiuta a comunicare la struttura del sito, allora assolutamente il colore dovrebbe essere usato in un wireframe!

18
Rahul

Concordato.

In genere, il colore porta sfumature emotive/culturali a una discussione che si suppone "riguardi" la struttura, il layout e l'IA (architettura dell'informazione) di base. Sebbene ciò possa essere discusso, possiamo concordare sul fatto che l'uso del Colore fornirà almeno PIÙ informazioni al rendering.

Il punto centrale del wireframe è comunicare SOLO ciò che è necessario e nient'altro.

Nella mia esperienza pratica, le persone usano il termine "wireframe" per indicare tutti gli artefatti delle liste di Rahul.

7
CSSian

Dalla mia esperienza, è principalmente il secondo motivo che hai elencato:

  • A volte anche gli stakeholder interni vengono confusi da wireframe che sembrano troppo "reali". I miei mockup Axure hanno una fedeltà molto maggiore rispetto ad altri mockup di PowerPoint utilizzati nella mia organizzazione, quindi a volte ricevo commenti che hanno a che fare con la progettazione grafica, come pulsanti che appaiono in modo diverso o pannelli che non regolano la loro altezza in base al loro contenuto, ecc.
  • Un mio amico ha creato un wireframe così hi-fi che il cliente lo ha davvero amato così tanto che lo ha implementato subito :)
6
Dan Barak

Sono passato dalla scala dei grigi al colore pieno e viceversa. Trovo che il colore pieno tenda ad essere una vera distrazione per le discussioni che devono avvenire.

Per inciso, mi capita di trovarmi in un progetto in cui non esiste un graphic designer tra me e gli sviluppatori, e quindi i wireframe "realistici" o "davvero carini" corrono il rischio di essere implementati così come sono. Questo praticamente garantisce un disastro perché non sono un graphic designer ...

5
gef05

Uno svantaggio del colore su un wireframe è che - insieme a (ciò che viene percepito) una maggiore fedeltà dei controlli e simili - prima o poi uno dei tuoi sviluppatori supporrà che debbano rendere l'aspetto della GUI proprio come il wireframe.

Lo so. Lo so. Ciò indica un grave malinteso sullo scopo di un wireframe.

Ma succede davvero.

4
JeromeR

Tendo a riservare l'uso del colore per annotare i componenti. Mi assicuro che frammenti di testo destinati a comportarsi come collegamenti ipertestuali siano in blu e sottolineati, ad esempio, anche se il design del sito finale potrebbe avere una storia di colori completamente diversa. I bit di testo che non sono statici e variano in base all'input dell'utente ottengono un altro colore. Se ci sono varie caselle e linee che sono in dubbio o so che hanno bisogno di una maggiore lucidatura, allora le imposterò per avere linee rosse. I blocchi di testo che sono annotazioni rilasciati proprio sopra il wireframe ottengono un riempimento di sfondo giallo pallido.

È tutto molto spaventoso da guardare, visivamente, ma serve a comunicare. Non rappresentare.

4
Erics

Personalmente, penso che sia giusto usare il colore se impartisce una sorta di funzionalità.

Tendo ad usare il colore su elementi interattivi dei miei wireframe, come link e pulsanti che sono blu. Questo aiuta a evidenziare chiaramente gli elementi interattivi durante la presentazione al cliente.

Ho anche usato il verde, l'arancione e il rosso per indicare diversi stati di avvertenza in un elenco di elementi. Ho scoperto che questo ha aiutato a comunicare le funzionalità al client più rapidamente, il che era meno evidente nelle versioni precedenti, puramente in scala di grigi.

Tuttavia, non userei il colore come elemento decorativo, almeno non nei primi wireframe o modelli. Come alcuni hanno risposto, i clienti a volte possono rimanere invischiati nel modo in cui qualcosa "guarda", vs come funziona. Questo può rallentare un po 'il processo.

2
Paj