Dal wireframe la UI: strumenti per il design grafico

fonte
fonte

Il visual design è la “trascrizione” grafica e visuale, della progettazione emersa attraverso le fasi di studio di ux e stesura dei wireframe.

Solitamente è a carico di un visual designer che si occupa di ridisegnare le informazioni dei wireframe, definendone lo stile grafico, colori, font, icone. ù

Gli strumenti per la creazione del visual design sono diversificati, da Ide complessi per la manipolazioni di immagini, a strumenti online che permettono la creazione di prototipi funzionanti.

Storicamente (e impropriamente) lo strumento più utilizzato è (era?) Photoshop. Benchè il software nasca come programma di elaborazione di fotografie, può essere utilizzato per disegnare UI.

La realtà, purtroppo,  è che tendenzialmente il “grafico” utilizza il programma che sa usare meglio.
Da qui, l’utilizzo anche di software per la grafica vettoriale come Illustrator, o per l’impaginazione come Indesign.

Al di là, della mera guerra di religione su cosa sia meglio o peggio, la scelta di uno strumento piuttosto che un altro, a mio avviso, deve essere fortemente legata al team con il quale state lavorando, in particolare alla collaborazione tra visual designer e frontend developer.

Se volete approfondire delle “buone pratiche” per la stesura di un impianto photoshop (ma le regole base funzionano per qualsiasi ide), in questa presentazione troverete dei suggerimenti sia per designer, che per dev che si trovano ad avere a che fare con un psd.

Con la diffusione della progettazione responsive, la creazione di visual design in photoshop o in software statici è diventata piuttosto macchinosa, perchè questi strumenti non consentono di rappresentare in maniera facile (e in resa verosimile) le dinamiche degli elementi al cambio di dimensione della finestra.

Per questo motivo risultano piuttosto validi strumenti come Webflow, che consentono la creazione della ui direttamente all’interno del browser, andando a lavorare sugli elementi direttamente dei diversi stati in cui vengono rappresentati.

Altri strumenti

 

Principi Universali di Design

Regola dell’80/20

l’80% degli eventi generati in un qualunque sistema, è causato dal 20% delle variabili in esso presenti.
A livello pratico, oltre che visivamente ha impatto sull’architettura dell’informazione: non tutti gli elementi possono avere la stessa importanza.

Allineamento

Posizionamento degli oggetti in modo che i loro bordi siano allineati fra loro e correttamente distribuiti. Non è solo una proprietà del testo!
L’allineamento degli elementi, ha dei risvolti sia in termini di estetica (bilanciamento, pesatura, ariosità del layout), sia di fruibilità dei contenuti

Esempio: scheda elettorale elezioni USA 2000 (perdonate la foto)

scheda-elettorale

Chunking

Tecnica mediante la quale più informazioni vengono organizzate in un numero limitato di unità dette chunk, al fine di migliorarne la memorizzazione

Approfondimento: http://study.com/academy/lesson/chunking-method-definition-examples-quiz.html

Colore

ha un ruolo fondamentale nel design. E’ un elemento caratterizzante al livello di identità visiva (esempio cocacola), veicola l’attenzione, veicola un significato e ovviamente ha un peso nell’estetica.

ruota

Da tenere in considerazione:

  • numero dei colori utilizzabili, dipende dal mezzo e dalla percezione umana (attenzioni alle disfunzioni)
  • Combinazioni: è possibile ottenere combinazioni di colori piacevoli, utilizzando colori adiacenti, triadici, complementari o quadratici
  • simbolismi e significati: il significato dei colori non è scientificamente provato, oltre che il loro simbolismo non può essere considerato universale. Pertanto è importante verificare il significato dei colori e delle combinazioni in relazione al pubblico di destinazione
Approfondimento: http://www.slideshare.net/ninjamarketing/la-teoria-dei-colori-e-il-visual-design?related=1
Strumenti: http://colorschemedesigner.com/csd-3.5/
http://paletton.com/

Richiesta di conferma

Tecnica per evitare azioni non intenzionali mediante una richiesta di conferma di un’operazione, prima che venga eseguita.

01_sure

Può essere attuata attraverso un messaggio diretto, o una sequenza di operazioni concatenate (esempio inserimento password, schema missili)

L’abitudine spesso vanifica gli effetti della richiesta di conferma

Coerenza

Parti simili espresse in modi simili a fine di favorire la semplicità d’uso e la velocità di apprendimento.

photoshop-illustrator

Esempio: Photoshop e illustrator sono due programmi della suite adobe. Benchè siano programmi di grafica hanno caratteristiche distinte, poichè trattano rispettivamente immagini raster e immagini vettoriali. Sono facilmente individuabili, tuttavia, nelle loro UI elementi comuni, sia come icone, menù, palette, ma anche come routine di funzionamento. Questa persistenza, rende più facile l’approccio di uno dei due software, se già si conosce l’altro, poichè per l’utente è facile prevedere dove e come attivare i comandi.

Vincoli

Limitano le possibilità di scelta degli utenti (esempi tra ui selettori etc.. lavatrice, tasti registratore. etc). Ne sono esempi percorsi guidati, valori delimitati su una scala:

range

vincoli psicologici attraverso simboli

donne

convenzioni

red-traffic-light-600x398

barriere fisiche, e via dicendo

passaggio

Controllo

livello di controllo e azioni eseguibili dall’utente devono essere commisurate alla sue competenze. –> diversificare i livelli di competenza nascondendo elementi

chrome

Effetto Esposizione

La ripetuta esposizione a stimoli per i quali si avvertono sentimenti neutri, aumenta l’interesse verso di essi. (mai sentito parlare di remarketing dinamico?)

remarketing

banner

Evidenziazione

Tecnica utilizzata per attirare l’attenzione su un’area di testo o su un’immagine. E’ fondamentale nel web dove l’utente è abituato ad una lettura veloce: in generale l’uso in blocchi di testo corposi di grassetti e italici, favorisce e invoglia alla lettura.

bold

Nell’esempio, lo stesso testo (presentazione di un corso di laurea) con e senza evidenziazione. E’ facile notare come le informazioni principali siano evidenti nella seconda versione, anche a colpo d’occhio.

Regola dei terzi

Tecnica di composizione enlla quale un supporto viene diviso in terzi, creando porzioni esteticamente interessanti e posizionando il soggetto in uno dei punti di intersezione ottenuti

Fonte
Fonte
Approfondimento: http://www.mora-foto.it/fotografia/terzi.html