Recap Lezione 07: colore, font web-safe e leggibilità nel design

RECAP LEZIONE 07

DIGITAL VISUAL DESIGNNT

A COSA SERVE IL COLORE?

Il colore è uno strumento importante per creare gerarchia nell'interfaccia, definire un mood e creare continuità con il brand.NT

QUALI SONO LE PRINCIPALI FUNZIONI DEL COLORE?

• Veicola informazioni
• Suscita sensazioni
• Rafforza l'identitàNT

IL COLORE HA UN SIGNIFICATO UNIVOCO IN TUTTI I CASI D'USO?

Assolutamente no, in ogni cultura, periodo storico o contesto specifico ad ogni colore è stato assegnato un dato valore o significato.NT

COME SI FA A SAPERE QUALE SIGNIFICATO DARÀ AL COLORE L'UTENTE?

Nella progettazione user-centered questo è un non-problema, nel senso che, durante la user-research è possibile chiedere all'utente quale valore o significato ha per lui un colore ipotizzato e se ha alternative da suggerire. Altre informazioni al riguardo si possono ipotizzare dal profilo personale definito nello user-persona di riferimento (età, localizzazione, interessi ecc.)NT

COSA DICE LA REGOLA 60 - 30 - 10 DEL COLORE?

Non è sempre facile gestire il colore all'interno di un'interfaccia in modo efficace e funzionale, questa regola, presa in prestito dall'interior design, ci aiuta suggerendoci di dividere i colori in base al loro utilizzo: In genere il colore primario ha la percentuale dominante, il 60%. Il 30% va ad un colore secondario che si abbina correttamente al colore primario. Infine il 10% serve per un colore che possa porre l'accento (accent color) su alcuni elementi come: call to action, link e altre interazioni primarie. In genere per l'accent si utilizza un colore che crea un alto contrasto.NT

LE TRE TONALITÀ DELLA REGOLA 60 - 30 - 10 SONO LE UNICHE DI CUI ABBIAMO BISOGNO?

Assolutamente no! Il colore nella UI ha sempre una logica e definisce un linguaggio. Per definire uno schema colore efficace avremo bisogno di più colori.NT

QUALI SONO LE REGOLE PER AMPLIARE UNA PALETTE COLORE?

1. Definire più shade delle tonalità scelte;
2. Definire una scala di grigi neutri;
3. Definire una scala di grigi virati;
4. Definire dei feedback colors.NT

QUAL È IL METODO PIÙ CORRETTO PER DEFINIRE LE SHADE DI UN COLORE?

Una soluzione efficace per aumentare i colori in palette è quella di inserire delle varianti della stessa tonalità con diversi livelli di luminosità e/o saturazione. Per intervenire sul colore in questi termini è necessario impostare il colore in HSL e modificare solo i valori S (saturazione) e L (luminosità) lasciando invariato H (hue/ tonalità). Lasciando invariate S ed L e modificando H è possibile individuare una nuova tonalità che avrà però lo stesso identico livello di saturazione e luminosità.NT

COME SI DEFINISCE UNA SCALA DI GRIGI NEUTRI?

Il grigio nella UI è fondamentale per creare gerarchia e profondità. Per avere una scala di grigi neutri puri il valore S deve essere 0 e si deve utilizzare il valore L per schiarire e scurire il grigio. Questa palette è particolarmente utile per la progettazione dei wireframe ma anche per l'interfaccia definitiva un grigio neutro può sempre tornare utile.NT

COME SI DEFINISCE UNA SCALA DI GRIGI VIRATI?

Nella realtà le ombre non sono realmente nere o grigio puro, in realtà vengono influenzate dalla superficie su cui poggiano. Per avere quindi una maggiore armonia tra colori e grigi è buona norma preparare una palette virata verso alcuni dei colori della nostra palette dando vita a scale di grigi freddi e caldi. Per avere una scala di grigi virati il valore H dovrà essere lo stesso del tono di colore di riferimento, S deve avere un valore minimo in modo da far trasparire il colore e si deve utilizzare il valore L per schiarire e scurire il grigio.NT

COSA SONO E A COSA SERVONO I FEEDBACK COLORS?

Per definire un linguaggio chiaro il nostro schema colore dovrà comprendere anche dei colori destinati ai feedback che il sistema da all'utente permettendogli di comprendere a colpo d'occhio se si tratta di un messaggio positivo o negativo. Non devono essere necessariamente rosso, arancio, verde e blu. L'importante è utilizzarli con coerenza e consistenza per aiutare il riconoscimento da parte dell'utente.NT

COSA SONO LE FONT WEB-SAFE?

Fino a qualche tempo fa la scelta di una font per le interfacce era limitata ad un set definito "web-safe", era composto da font presenti in tutti i sistemi operativi e quindi renderizzabili da tutti i browser garantendo una resa finale identica per ogni utente. Oggi questa limitazione è stata superata con tecniche che ci permettono di "incorporare" nel nostro prodotto le font di cui abbiamo bisogno.NT

COSA SI INTENDE PER LEGGIBILITÀ?

Con il grado di leggibilità si definisce "quanto un testo o una lettera sono facili da leggere". Per comprendere se un carattere che abbiamo individuato ha il giusto grado di leggibilità, rispetto all'uso che ne dobbiamo fare, è necessario tenere conto di due parametri: · Legibility · ReadabilityNT

COS'È LA LEGIBILITY?

Si riferisce alla leggibilità di un singolo carattere e può dipendere: · Dalla morfologia del singolo glifo; · Dalla presenza o meno delle grazie (serif o sans- serif); · Dalla variazione di spessore fra i tratti sottili e quelli spessi (contrasto); · Dallo spazio orizzontale tra coppie di glifi (kerning).NT

COS'È LA READABILITY?

Si riferisce alla facilità di lettura e il grado di affaticamento di un testo (quindi di più glifi insieme) e può dipendere: · Dalla spaziatura orizzontale tra le parole (tracking); · Dalla spaziatura verticale tra le righe (interlinea); · Dall'allineamento (a bandiera, epigrafe o giustificato).NT

QUALI CARATTERISTICHE DOVREBBE AVERE UNA BUONA FOTN PER WEB?

• Un buon numeri di pesi e stili;
• Flessibile e scalabile;
• Una buona altezza delle X;
• Scarso contrasto;
• Glifi e caratteri speciali.NT

QUALI SONO LE BEST-PRACTICES PER UNA BUONA PROGETTAZIONE TIPOGRAFICA?

• Usare poche font;
• Tieni conto della lunghezza delle righe di testo;
• Interlinea;
• Dedicare attenzione al pairing;
• Utilizzare una type-scaleNT

QUAL È IL RUOLO DELLE ICONE NELLA UI?

Nel design di un'interfaccia digitale le icone ricoprono un ruolo importantissimo; hanno infatti la capacità di sintetizzare un'informazione e di trasferirla all'utente migliorando l'usabilità e l'intuitività dell'esperienza d'uso.NT

COSA AFFERMA IL PRINCIPIO DELLA FORMA CHIUSA?

Il principio di chiusura afferma che se è presente la giusta quantità di informazioni il cervello è in grado di riempire i vuoti creando un insieme unificato.NT

QUAL È LA CARATTERISTICA FONDAMENTALE DI UN BUON SET DI ICONE?

Sia quando si utilizza un set pre-made sia quando se ne progetta uno custom, è fondamentale assicurarsi che il tratto e lo stile delle icone che lo compongono siano coerenti e uniformi.NT

QUAL È IL COMPITO DI UN'ICONA?

Deve aiutare l'utente nella comprensione immediata del concetto a cui è associata, pertanto deve essere fortemente evocativa dello stesso.NT

COME DOVREBBERO ESSERE LE ICONE CHE SCEGLIETE O PROGETTATE?

Nella UI le icone devono essere "adattabili", devono prestarsi alla visualizzazione su diversi dispositivi e a dimensioni molto differenti, è quindi importante che la tipologia di rappresentazione scelta sia molto semplice ed essenziale per permettere all'icona di essere sempre comprensibile.NT

QUALI ELEMENTI MULTIMEDIALI ESISTONO OLTRE ALLE IMMAGINI?

Le immagini sono sicuramente il tipo di media più diffuso perché fino a tempi abbastanza recenti è stato quello con il miglior rapporto tra mood e performances tecniche. Altri elementi multimediali che possono essere utilizzati nelle interfacce per rendere l'esperienza più semplice, utile e gratificante sono: · Illustrazioni · Video / animazioni · Audio / effetti sonori · 3DNT

A COSA SERVONO GLI ELEMENTI MULTIMEDIALI?

• Suscitano sensazioni;
• Raccontano una storia;NT

COME SI RACCONTA UNA STORIA SUL WEB?

Avere solo una storia da raccontare non basta più, bisogna catturare l'attenzione dell'utente e coinvolgerlo. I semplici e banali layout in griglia con blocchi regolari di testo statico non funzionano in tutti i casi d'uso. Per questo, sempre più siti web sono costruiti con un nuovo approccio: lo scrollytelling.NT

COS'È LO SCROLLITELLING?

Il termine deriva dalla combinazione di scroll (scrollare) e telling (raccontare). Quindi raccontare storie attraverso lo scroll di una pagina web rendendo l'esperienza innovativa e interattiva. Il funzionamento di base è molto semplice, i contenuti appaiono o cambiano mentre gli utenti scrollano verso il basso o verso l'alto della pagina. Questo tipo di narrazione, combinando video, foto, testo e animazioni, risulta molto immersiva e coinvolgente.