Lezione 8c | UI Design: spazi, griglie, colore, tipografia e CTA

Quali sono gli elementi distintivi per un buon lavoro di UI design?

Abbiamo già detto che la UI è una parte fondamentale della User Experience. È l’interfaccia dello strumento che permette l’interazione tra uomo e dispositivo; in un sito web ad esempio una call-to-action è lo strumento che permette all’uomo di passare da un contenuto o da un servizio all’altro.

Il compito di colui che si occupa di UI design è quello di progettare un interfaccia e un percorso navigazionale semplice, intuitivo e coerente col brand, in modo da guidare l’utente in un percorso naturale e privo di ostacoli.

Vediamo quali sono le fondamenta di un buon lavoro sull’UI design (e quindi riprendiamo il discorso sui siti “belli” sui siti “brutti” ).

Gli spazi e i vuoti.

I siti “brutti” non hanno respiro e nessuna logica di ripartizione degli spazi, mancano i vuoti e non c’è alcuna armonia fra i contenuti e gli spazi che li dividono.

Con il termine spazio bianco (o spazio negativo o vuoto), si intende lo spazio vuoto che si viene a creare tra i vari elementi di una composizione grafica.

Quando si parla di whitespace nel layout si intende:

visivo: spazio che circonda grafica, icone e immagini

del layout: margini laterali o bordi

del testo: spaziatura tra le righe e le lettere di un testo

del contenuto: lo spazio che separa il testo in colonne

Il compito dell’UX-UI  designer è far si che la comprensione del messaggio sia la più diretta ed efficace possibile e che questo messaggio, una volta arrivato al “cliente” sia esattamente quello che si aveva intenzione di trasmettere.

Compito del graphic designer è far si che la comprensione del messaggio sia la più diretta ed efficace possibile e che questo messaggio, una volta arrivato al “cliente” sia esattamente quello che si aveva intenzione di trasmettere.

Lo spazio bianco è infatti legato a

– leggibilità (L’uso corretto dello spazio bianco tra i paragrafi e le lettere di un testo e i margini destro e sinistro aumentato la comprensione di quel contenuto )

– creazione di spazi mentali (lo spazio bianco aiuta a creare mappe mentali cioè ad organizzare le informazioni visive in schemi, secondo un ordine preciso)

focus (lo spazio bianco aiuta a focalizzare dove ..non c’è spazio bianco!)

La psicologia dei colori ci insegna che il colore bianco, assieme al nero (ma non solo), trasmette al nostro cervello idee di eleganza, di ordine, lusso e pulizia. Inoltre lo spazio bianco è strettamente collegato al concetto di minimalismo e quindi di design pulito e senza fronzoli inutili.

Nel web design:

..ma anche nell’impaginato:

Esercizio:

come migliorare questo box per un sito web?

Con un lavoro di taglio sul copy e di spazi bianchi (quindi margin e padding!)

Link al file PSD

Link al PSD del banner rivisitato

Le proporzioni

Anche se alcuni designer giocano a rompere (con armonia) le griglie, senza una struttura fissa che segue le logiche delle proporzioni (magari rispettando la regola dei terzi) fra gli elementi si perde l’armonia. Approfondisci su proporzioni e sezione aurea qui: https://www.grafigata.com/2015/01/guida-sezione-aurea/[” n=”alignleft” width=”464″]

Sezione aurea regola dei terzi[/caption]

regolaterziadult-blur-camera-610293

La regola dei terzi.

La regola dice che il soggetto principale dovrebbe essere posizionato lungo queste linee o le loro intersezioni in una griglia 3×3. Questo renderà la composizione (e quindi la fotografia) più interessante per il nostro occhio.

Per creare dinamismo, infatti, è necessario lasciare libera la parte di immagine in cui il nostro cervello presume che il soggetto sia coinvolto, quindi dovrebbe essere lasciata libera la direzione in cui punta lo sguardo del soggetto.
Ogni immagine ha infatti quattro punti di forza (i numeri 1, 2, 3 e 4 nell’immagine qui sopra, gli stessi di cui parlavamo poco sopra) che dovrebbero essere utilizzati per posizionare una o più parti interessanti della fotografia, in modo da inquadrare correttamente la scena.

C’è un motivo per cui questa regola funziona così bene: il cervello umano, elaborando un immagine, cerca sempre qualcosa da cui partire, solitamente l’osservatore inizia concentrandosi sul punto 1, spostandosi poi sul punto 2, quindi sul 3 ed infine sul 4.

Questa regola è in realtà una semplificazione di una proporzione armonica derivata dallo studio delle geometrie naturali per ricercare la perfezione, già conosciuta anticamente e alla base di architetture classiche come il Partenone. Si tratta della cosiddetta sezione aurea..

Che cos’è la sezione aurea?

Si può definire in molti modi ma, sostanzialmente, la sezione aurea è un rapporto tra due numeri. In particolare, è un rapporto tra due numeri che dà come risultato il numero irrazionale 1,618033 (e tanti tanti altri decimali dopo). Questo numero, essendo veramente unico e particolare, un po’ come il pi greco, prende il nome di Phi.

Un altro modo per definirla è prendere un numero a e un numero b e dire che a+b sta ad a come a sta a b.

Sezione aurea a+b

I famosissimi numeri della successione di Fibonacci (1,1,2,3,5,8,13,21,34,55,89,144…), il cui ultimo numero viene calcolato sommando i due precedenti sono strettamente legati alla sezione aurea. Infatti i rapporti tra due numeri qualsiasi, tra quelli affiancati, della successione danno come risultato la costante Phi della sezione aurea.

In natura

La sezione aurea in natura assume spesso la forma della spirale costruita su rettangoli che seguono il rapporto 1,618:1. La spirale aurea è infatti una spirale di tipo logaritmico che cresce seguendo un cosiddetto fattore di accrescimento pari a Phi.

Alcuni esempi della spirale aurea in natura possono essere alcune forme di conchiglie, la disposizione degli stami dei fiori, la forma delle galassie e dei cicloni e tantissime altre.

Come usare la sezione aurea per il design

Il primo trucco è la già conosciuta regola dei terzi. Essa consiste sostanzialmente nel suddividere la pagina, la foto o il layout su cui si sta lavorando in tre parti verticali e in tre parti orizzontali. I 4 punti in cui queste linee si incontreranno saranno quelli su cui andrà focalizzata l’attenzione.

Perché? Beh, perché così ragiona il cervello umano, siamo abituati a suddividere quello che vediamo in aree di interesse in base a come sono strutturate e a concentrarci sui punti focali posizionati nell’area centrale di quello che vediamo.

Un altro metodo per implementare la sezione aurea nei tuoi progetti è utilizzare le forme e le griglie della stessa. Ad esempio costruire delle grafiche basandosi sulla spirale aurea vista prima o sulla divisione dell’area di lavoro in base ai rettangoli e alle proporzioni del rapporto aureo.

Sezione aurea regola dei terzi

ESERCIZIO

Lavorare sul banner principale con un’immagine di un surfista sulle onde (usando questo layout: https://drive.google.com/file/d/1WwZXcfOTia5CAzvYi93inpxdF3QwAVa7/view?usp=sharing) su cui costruire una buona griglia che lavora sulla regola terzi con questo titolo:

TITOLO: LiguriaSurf Camp
SOTTOTITOLO: La tua estate 2021 surfando le onde

BODY: Una settimana di divertimento, lezioni di surf e kite, grigliate, camera doppia, a soli 450€

CALL TO ACTION: Prenota ora

Usate l’immagine presa da drive.

Immagine: questa si,

Questa è altrettanto bella ma andrà bene?

The Best Beaches in Hawaii for Surfing | Departures

Web Design e Grid System

Cosa sono e perché avere le griglie?

Una griglia è una rete di linee che si intersecano: è come un’armatura che il designer usa per creare forme, sistemare immagini, organizzare il testo. Così come scrivendo su un foglio le righe guidano la mano e l’occhio, allo stesso modo il designer si serve di linee orizzontali e verticali, colonne e margini per allineare gli oggetti gli uni agli altri.

La griglia è una struttura invisibile che serve non solo ad avere un processo efficiente di costruzione di un layout, ma anche a dare consistenza al design: è la griglia che permette a tutte le pagine, che siano su web o su carta, di avere una struttura uniforme. Attraverso la griglia organizziamo uno spazio vuoto e passivo, definendo il ritmo di tutto il progetto di design.

La griglia serve a creare:

ordine e comprensibilità; Le griglie organizzano e ordinano lo spazio e a fanno in modo che gli elementi e i testi siano allineati.

consistenza e armonia. Un design consistente è ciò che permette di navigare tra le pagine di un sito senza sentirsi disorientati!

Possiamo reperire online numerose grids sia per i programmi di design (anche PSD per photoshop) che in CSS.

griglie

Gli elementi del grid system: la larghezza del contenitore, il margine con l’sterno, le colonne e il gutter che rappresenta il margine fra due colonne

Alcuni riferimenti online:

https://960.gs/

https://blog.prototypr.io/9-best-grid-system-for-web-mobile-ui-265c68d30c09

PSD: https://1440px.com/ o https://1200px.com/


RESPONSIVE WEB DESIGN

Il Responsive web design è l’insieme di tecniche per la progettazione e lo sviluppo di siti web su dispositivi , capaci quindi di adattarsi graficamente alle risoluzioni di schermi diversi, in particolare mobili (desktop, tablet, smartphone…).

L’approccio Mobile first (70% circa della navigazione internet) mette in risalto i contenuti, la leggibilità dei testi per semplificare drasticamente navigazione, l’organizzazione dei contenuti e gli eventuali flussi di acquisto.

L’impaginazione pixel perfect (che definisce posizione e dimensione di ogni elemento fino al singolo pixel) non è più possibile, o almeno non è più così utile poiché l’importante è la definizione del layout e del suo comportamento per le diverse risoluzioni identificate da “breakpoints” (sui breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a)

breakpoints sono le risoluzioni di riferimento per cui l’interfaccia verrà progettata e sviluppata. Nelle tantissime risoluzioni tra un breakpoint e l’altro il sito dovrà scalare ed adattarsi in modo armonico allo schermo, sfruttando le percentuali e filtrando i contenuti in base alla loro reale importanza.

17-breakpoints1

Un elemento che occupa il 50% di un layout non occuperà sempre il 50% a qualsiasi risoluzione. Per questa ragione bisogna stabilire dei breakpoint, ossia delle risoluzioni-tipo al di sotto e al di sopra delle quali il layout oltre a comprimersi o espandersi, cambia.

+

gif by: https://medium.com/designers-italia/le-griglie-alla-scoperta-dello-ui-kit-di-designers-italia-partendo-dalle-basi-d7943cbdccc9

Se un container con testo, in un layout con risoluzione desktop, occupa 4 colonne, vuol dire che si estende per il 33.33% dello spazio totale a disposizione. Su mobile lo stesso container non potrà occupare allo stesso modo il 33,33%, per ovvie ragioni di leggibilità, ma sarà necessario a un certo punto (al breakpoint) cambiare il layout, in modo che il container possa occupare tutte le 12 colonne della griglia, quindi il 100%.

In media nella progettazione di un sito sono necessari dai quattro ai cinque breakpoint: di conseguenza ne derivano quattro o cinque variazioni della griglia, che determinano il grid system. Queste variazioni consistono nel cambiamento delle misure dei margini (lo spazio al di fuori della griglia) e dei gutter (lo spazio tra le colonne). Le colonne si adattano di conseguenza.

Va poi considerata la larghezza massima (max width) oltre la quale il contenitore principale non si deve estendere all’aumentare della risoluzione. Se un sito a risoluzione mobile occupa, com’è normale, tutto lo schermo, non sarebbe altrettanto sensato se occupasse tutto lo spazio di un monitor da 1920px o più. Questo concetto rivoluziona il mondo della progettazione grafica: un designer non saprà mai esattamente come sarà vista la sua interfaccia grafica in termini di dimensioni, colori, ecc…

La sintassi nel foglio di stile appare molto semplice, supponiamo di voler creare delle regole che valgano solo per gli Smartphone, in questo caso viene utilizzata una sintassi simile:

@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Stile CSS per telefonini */
}

17-breakpoint

Trends and inspirations sul mobile design:

ESERCIZIO

Non vi sembrano posti un po’ a caso gli elementi che compongono il layout qua sopra?

Provate ad inserire i box creati precedentemente in un layout grid a 12 colonne (1920 px) su tre colonne su questo layout in modo da ricreare armonia: https://drive.google.com/file/d/1WwZXcfOTia5CAzvYi93inpxdF3QwAVa7/view?usp=sharing

COLORI E PALETTE

Nei siti “belli” il designer ha calibrato tutta la colorimetria del sito seguendo una singola palette (che dovrebbe essere coerente con il messaggio che il sito vuole veicolare). Nei siti “brutti “i colori sono casuali. 20-Paletta_classico_colori_2019

La palette di colori a partire dall’immagine portante?

https://coolors.co/image-picker

Lo schema colore:

Uno schema di colore è una combinazione armoniosa e visivamente gradevole di colori.

Crea uno schema colori: https://toolset.mrw.it/web-design/colorscheme.html

Questo mockup di questa app segue uno schema colore preciso (colori complementari arancio-ciano) e una palette di colori che richiama un certo tipo di interior design (un po’ seventies? un po’ altolocato?)

Il colore principale viene scelto in base al legame psicologico che si vuole costruire fra l’utente e il marchio-sito in base agli obiettivi e al posizionamento.

Rosso: il rosso è il colore della passione e delle emozioni forti stimolando l’adrenalina e il metabolismo.

Arancione: l’arancione come il rosso è un colore attivo ma meno formale. Adatto a prodotti alimentari stimolando l’appetito ed essendo collegato alla felicità e alla creatività.

Giallo: il giallo è un colore brillante che risalta molto e per questo utilizzato dai taxi americani. Essendo un colore energico può indurre a oppressione se utilizzato eccessivamente.

Verde: Il verde è un colore naturale associato all’ambiente, alla stabilità. Esprime speranza e freschezza. Viene visto in modo spontaneo dagli occhi.

Blu e azzurro: il blu con le sue sfumature esprime apertura mentale, intelligenza e sicurezza. Inoltre diminuisce l’appetito per il fatto che non esistono alimenti blu o azzurri. Essendo il colore del cielo e del mare contribuisce alla distensione e a sentirsi meglio.

Viola: il viola è associato al potere e alla ricchezza a causa della difficoltà nell’ottenere originariamente tessuti di questo colore. Può essere considerato una via di mezzo tra l’intensità del rosso e l’effetto calmante del blu. Utilizzato per progetti esclusivi ed originali.

Bianco: il bianco esprime pulizia e purezza. Comporta risultati netti e chiari sia come sfondo che sovrapposto ad uno sfondo scuro.

RUOTA DEI COLORI

Partendo dal colore principale ottenuto in base agli obiettivi e al target da raggiungere si definisce lo schema più adatto:

monocromatico: lo schema monocromatico si basa su un solo colore in varie sfumature e saturazioni. Questo schema è adatto ad argomenti che esprimono calma e distensione. Associato a linee e texture orizzontali garantisce un effetto rilassante.

acromatico: lo schema acromatico è un monocromatico basato su scala di grigi e nero. Utilizzato per far risaltare gli elementi centrali e le immagini che diventano il punto focale della scena.

colori analoghi: lo schema con colori analoghi si ottiene utilizzando i colori all’interno di un terzo della ruota dei colori. Ottenendo un passaggio graduale da un colore all’altro senza forti contrasti.

colori complementari: I colori complementari sono quelli che si trovano in posizione opposta nella ruota cromatica. Da questo schema si ottiene un forte contrasto adatto a far risaltare fortemente determinati elementi. Da utilizzare anche nelle varie saturazioni per avere un effetto meno acceso.

complementari discordanti: i colori complementari discordanti sono colori non proprio opposti ma neanche così vicini da essere considerati come analoghi. Da queste associazioni si ottengono combinazioni fantastiche adatte ad un pubblico giovane.

split complementari: lo schema split complementare si ottiene partendo da uno schema complementare e prendendo due colori adiacenti di un colore e mantenendo l’altro che sarà il colore principale. Ottenendo uno schema di tre colori con effetto acceso ed eccessivo adatto per argomenti giovanili.

triadico: lo schema colore triadico usa tre colori equidistanti suddividendo in parti uguali la ruota cromatica. Si ottiene ancora un effetto acceso e giovanile.

Se scegli 3 colori opposti equidistanti solla ruota del bilanciamento puoi ottenere delle combinazioni efficaci chiamate triadi.

Ad esempio una triade è viola – arancione – verde.


ESERCIZIO

Utilizza l’immagine del banner del surfista (https://drive.google.com/file/d/1fe3vGAa-osio5cFv2LKyXa0_u4ZAX_m3/view?usp=sharing) come base per il sito e ricalibrate i colori del layout a partire da una palette generata da questa immagine (usando ad esempio: https://palettegenerator.com/).. quindi il menù, il titolo, il form, i box, i pulsanti..

La Tipografia

Tipografia. La coerenza stilistica (immagine coordinata, colori, ecc..) si gioca anche e a volte soprattutto attraverso la scelta dei caratteri tipografici che devono essere in linea con il messaggio che si vuole dare. Nei siti “brutti” i font sono scelti a caso.

La tipografia è una componente essenziale di un qualsiasi progetto grafico: più delle immagini e dei colori, la vera anima della grafica che progetteremo è data dalle parole,  da ciò che tramite di esse comunichiamo, e dal loro impatto visivo.

Si dice che una buona tipografia rappresenti l’ottanta per cento di una grafica efficace, gradevole e funzionale. Si tratta di un mito affascinante quanto difficile da sfatare: sul web è possibile trovare centinaia di layout in stile minimal, e la maggior parte di essi è capace di attirare positivamente la nostra attenzione grazie ad una perfetta armonia tra estetica e leggibilità dei font.

Carattere tipografico e font non vogliono dire esattamente la stessa cosa.

I caratteri sono, nella grafica, nella tipografia e nell’editoria, come i numeri nella matematica. Sono la base. Un insieme di caratteri studiati in modo coerente e secondo gli stessi principi formali, forma un carattere tipografico, il cui file viene chiamato font.

Quindi, ad esempio, la lettera “A” è un carattere.

Questo carattere a sua volta può essere composto da diversi glifi, come A, a, a o a, che saranno quindi glifi dello stesso carattere e dello stesso carattere tipografico.

21-typography

Database font gratuiti: https://www.dafont.com/it/

Font a pagamento: https://www.myfonts.com/

Intanto, quale font utilizzare?

La guida completa: https://www.grafigata.com/2015/03/come-scegliere-un-font/

Siamo immersi dai caratteri, da testi e da messaggi testuali. Ogni “font” comunica qualcosa, un messaggio. “Sto arrivando da te” con due font diversi comunicano due messaggi opposti (amore, paura)

Per la lettura il primo principio è la Leggibilità. Ci sono caratteristiche oggettive che portano un font ad essere più leggibile.
Altri font invece sono pensati per catturare l’attenzione e comunicare un messaggio preciso (nei loghi, nelle head line dei messaggi pubblicitari).

Alcuni font sono stati pensati per un utilizzo preciso, il Garamond ad esempio per i libri di testo. Il Futura o il Gill Sans per i titoli dei giornali o per le insegne. L’Helvetica è nato per essere un font neutro che non comunica emozioni, che è leggibile sia per testi piccoli che per titoli.

Se hai bisogno di un font leggibile:

Scegli caratteri tipografici con lettere dalle forme convenzionali, no forme strane e inusuali con mille decorazioni e ghirigori

Scegli caratteri tipografici con una buona spaziatura. I font le cui lettere sono troppo vicine tra loro creano una lettura molto difficoltosa e lenta, sono quindi da evitare in questo caso.

Scegli font i cui caratteri abbiano un alto rapporto tra l’occhio e il corpo totale. L’occhio è ’altezza di lettere, il corpo è invece l’altezza totale e quindi considerando anche aste ascendenti e discendenti. Comunque sia un rapporto alto (direi tra 0,4 e 0,6) tra occhio e corpo garantisce un’ottima leggibilità, come nel caso del Verdana.

Grazi o senza grazie?

I caratteri serif sono caratterizzati da dei trattini (grazie, o serif, appunto) più o meno elaborati in chiusura delle aste, mentre i sans-serif, o bastoni, sono privi di fregi. La scelta tra l’uso di un font appartenente ad una o all’altra famiglia di caratteri non è semplice.
Generalmente si ritiene che caratteri sans-serif siano più leggibili singolarmente o in frasi di poche parole, mentre i serif siano più leggibili per testi lunghi. Le grazie, infatti, aiutano a determinare la forma della lettera e facilitano la lettura di testi lunghi.

Nell’esempio che segue ho scelto di utilizzare uno dei caratteri serif più utilizzati sia sul web che in fase di stampa, il Georgia:

Vivizezione di un font: https://www.grafigata.com/2014/11/cose-da-sapere-sugli-elementi-font/

Altri elementi da tenere d’occhio:

1. dimensione del carattere

Dipende dal font e dal design di base del sito web. Si prega di notare che l’utente ha la possibilità di modificare la dimensione dei caratteri nel suo browser o smartphone in qualsiasi momento. Provare ad utilizzare le dimensioni relative dei caratteri, cioè %, EM/REM o piccolo/normale/medio/grande.

Il mondo della tipografia nel design: https://www.grafigata.com/font-e-tipografia/

2. larghezza della linea

Questo è chiaramente sottovalutato. È stato determinato quale larghezza di testo viene ancora letto volentieri dalla gente: Si tratta di una larghezza fino ad un massimo di circa 70 caratteri, che è una larghezza di testo standard A4 di un documento Word. Basta dare un’occhiata a SPIEGEL ONLINE and Co. per vedere quanto sono ampi i loro blocchi di testo.

3. spaziatura delle linee

Per una leggibilità ottimale, il cosiddetto “spazio tra le righe”, cioè la distanza tra le singole righe di un testo – compresa l’altezza di un paragrafo – è di grande importanza. In rete, a seconda del font, un buon 140-150% di “line-height” si è dimostrato molto efficace.

4. distanza a piedi

Questa è la distanza tra le lettere, che viene manipolata dalla spaziatura delle lettere. Si dovrebbe fare molta attenzione in questo caso e utilizzare questa opzione di progettazione solo con cautela – per esempio con certi titoli. In caso di dubbio, non regolarlo.

5. contrasto

Il rapporto tra colore e colore di sfondo è chiamato contrasto. Questo dovrebbe essere molto alto per un testo continuo. Il massimo contrasto è ovviamente il testo nero su sfondo bianco. Questo è facile da leggere.

6. struttura

Questo significa: buono e testi semanticamente strutturati correttamente! In HTML, questo significa per esempio i tag di titolo H1/H2/H3, i segni di paragrafo, le marcature di lista, l’uso intelligente dell’evidenziazione con il grassetto, il corsivo e il colore, ecc. Ha un effetto diretto sulla leggibilità e anche sul ranking di Google.

7. un massimo di due caratteri

Spesso è sufficiente un documento per pagina web, libro o documento. In casi particolari, può funzionare anche di più, ma è necessario fare attenzione quando si utilizzano più di 2 caratteri per documento.

8. lettere maiuscole

Non utilizzare maiuscole nelle intestazioni e nel menu. Sono molto difficili da leggere. Tuttavia, se si tratta di parole singole, ad esempio in NAVIGAZIONE, è possibile utilizzare le maiuscole. Ma non scrivete in maiuscolo, ma usate i CSS con “…testo-trasformazione:maiuscolo“risolvere”.

9. caratteri standard

In caso di dubbio e come ripiego, dovreste scegliere font di sistema collaudati. Arial, Verdana, Georgia sono font di sistema così ben leggibili, che hanno quasi tutti i dispositivi di uscita e sono sempre ben visualizzati.

Un ripiego in CSS è il font successore, come in BMW: “bmwTypeWebBoldAll,” “Arial,” “Helvetica,” sans-serif; Qui Arial, Helvetica e Sans-Serif (il primo font disponibile sotto Sans-Serif) sono i ripiegamenti che vengono visualizzati quando il font di fronte ad esso (“bmwTypeWebBoldAll”) non è disponibile.

10. L’Impaginazione

Oltre alla font, per la leggibilità di un testo è importante che esso sia impaginato bene. Bisogna prendere quindi in considerazione la lunghezza della linea: se troppo lunga infatti fa perdere il filo (e confondere con le linee confinanti, per cui se è proprio necessaria una riga lunga bisogna bilanciare con un’interlinea più alta), se troppo corta invece rende difficile e lenta la lettura a livello di comprensione, spezzando troppo il discorso.
La lunghezza ottimale della riga dovrebbe essere tra le 7 e le 12 parole.


GLI ERRORI PIU’ COMUNI

Gli errori con la tipografia nel web design, approfondisci qui: https://www.grafigata.com/7-tipici-errori-tipografici-nel-web/

Larghezza della colonna

Colonna di testo inserita in una griglia con altre colonne di testo (quindi più di una colonna): circa 7-8 parole per singola colonna;

Colonna di testo unica (come per i libri o per i blog come questo): circa 50-75 caratteri.


Grassetto e corsivo che non identifica concetti chiave.

Il grassetto serve per evidenziare un concetto-chiave e per fare in modo che il lettore si focalizzi immediatamente su una serie di cose che stai cercando di comunicargli.

Il grassetto andrebbe riferito solo a espressioni o parole che devono risaltare nel testo, mentre il corsivo si dovrebbe utilizzare per frasi fatte, citazioni, discorsi, espressioni scientifiche o termini stranieri.


Il cattivo uso del maiuscolo. Online viene usato per “urlare”, va bene solo se si vuole enfatizzare un contenuto con un titolo o sottotitolo.


Lo scarso contrasto visivo con lo sfondo

Il contrasto minimo, per garantire la leggibilità dovrebbe essere almeno uguale o superiore ad un rapporto di 4,5/1, sotto il quale, il testo diventa sempre più illeggibile al diminuire del rapporto.

Contrast ratio

( #FFFFFF) to (#FFFFFF) — 1:1 — Invisible

( #797676) to (#FFFFFF) — 4.5:1 — Meets WCAG AA standard at 16px

( #6C6868) to (#FFFFFF) — 5.5:1 — Somewhat Legible

( #595959) to (#FFFFFF) — 7:1 — Meets WCAG AAA standard — Legible

( #000000) to (#FFFFFF) — 21:1 — Maximum contrast

Un modo per capire il livello di contrasto idoneo tra i vari colori è attraverso l’utilizzo di uno strumento online, ad esempio “color contrast checker”. Questo tool permette di valutare se il contrasto tra due colori è troppo basso, ma abbiamo notato che non è in grado di indicare quando il contrasto è troppo alto.


Colore di sfondo troppo acceso e errata combinazione di colori sfondo – testo. Usa la ruota dei colori anche per generare un buon contrasto fra colore di sfondo e testo.

Un buon metodo per rendere il testo più gradevole alla lettura per esempio è applicare un testo di color grigio scuro (#444444) su sfondo bianco. La differenza sembra minima, ma con questo contrasto meno forte, l’occhio umano riesce ad adattare la luminosità in modo meno faticoso, diminuendo il fastidio fisico dell’utente e prolungando il tempo di permanenza sulla pagina.

Come scrive Grafigata “I cartelli stradali che si riferiscono ad un pericolo sono di colore rosso, perché associamo il rosso alle emozioni forti e dunque, siamo più portati a fermarci o a prestare attenzione di fronte al segnale di Stop. Tutto questo, però, non significa che ogni cosa deve essere di colore rosso! È molto meglio cercare di ottimizzare la grafica di un messaggio d’errore di questo tipo inserendo la “giusta quantità” di rosso


Il testo giustificato a caso

Nel mondo occidentale siamo abituati a leggere da sinistra a destra, i testi devono rispettare il naturale fluire dello sguardo e devono essere allineati in questo modo.

Ecco perché i testi dovrebbero quasi sempre essere allineati a bandiera a sinistra o giustificati a sinistra.

Giustificare il testo, soprattutto sul web, significa distribuire le parole sulla riga per coprire l’intera colonna. Il risultato sono grandi divari tra le parole. A volte questi spazi si allineano e formano quelli che vengono chiamati “fiumi” all’interno del blocco di testo. Il punto del testo deve essere letto, quindi non sacrificarlo solo per avere delle linee nitide lungo i bordi.

L’allineamento centrato può essere utile per estrapolare parti di discorso, per richiamare l’attenzione su un breve aforisma, non sicuramente per convincere il lettore che il contenuto di interi paragrafi debba occupare un posto centrale nella sua mente.


L’interlinea troppo sottile o troppo ampia

L’interlinea troppo sottile tende infatti a ravvicinare le righe di testo tra loro in modo troppo marcato, mentre quella troppo grande, rischia di disperdere le parti di testo e di offrire alla mente uno stacco ingiustificato tra le varie righe dei paragrafi.

Per ottenere un testo equilibrato ed armonico, occorre dunque impostare l’interlinea tra il 120% e il 145% dell’altezza del corpo del testo.

Cioè, se il tuo testo ha un’altezza ipotetica di 10pt, l’interlinea ottimale è compresa tra i 12pt e i 14 pt.


Il font scelto a caso
La guida su come scegliere il miglior font possibile per il proprio progetto: https://www.grafigata.com/2015/03/come-scegliere-un-font/


ESERCIZIO

Rielabora il progetto dal punto di vista tipografico sfruttando quanto appena espresso, modifica i caratteri di titoli e paragrafi per comunicare il messaggio in modo coerente e leggibile. Lavora su interlinea e contrasti, colore di sfondo e dimensione.

Le dimensioni e le gerarchie fra gli oggetti.

A volte non è sufficiente scegliere le immagini giuste, i font giusti, le icone giuste se manca un equilibrio fra tutti gli elementi. Voci di menù troppo grandi vicino a testi troppo piccoli o viceversa distruggono l’armonia: è bene fare un ragionamento sulle dimensioni pensato device per device.

22-dimensioni-absurd-image

GERARCHIE

La gerarchia aiuta il processo di apprendimento di un’interfaccia. Quando i nostri occhi scorrono attraverso un fiume di parole, non c’è alcuna possibilità di capire subito di cosa si tratta. Se, invece, osserviamo un testo con dei sottotitoli, ci facciamo un’idea del contenuto.
Come creiamo la gerarchia visiva?

Solo uno o due elementi possono essere al vertice della gerarchia e sta a noi decidere quali saranno questi elementi. Per prendere la decisione giusta dobbiamo sapere qual è l’obiettivo più importante dello schermo. Possiamo evidenziare alcuni elementi come: dimensione, colore, posizione, consistenza, forma e orientamento.

L’illustrazione che segue è un esempio scolastico molto semplice di gerarchia visiva: leggiamo il titolo in lettere maiuscole prima di leggere il testo tra parentesi.

Pensiamo alle dimensioni per mobile e per tutti i device! Pensiamo alle nostre mani e alle nostre dita.

Quando tocchiamo qualcosa, il nostro dito copre uno spazio abbastanza ampio sullo schermo. Per sentirci sicuri a cliccare dobbiamo avere solo una cosa sotto le dita .. Se il nostro dito copre più elementi, ci sentiremo a disagio perché non potremo mai essere abbastanza sicuri di ciò su cui abbiamo cliccato!


Pensiamo a ciò che possiamo raggiungere con le nostre dita in un device.

Ci sono tre aree di tocco, quelle naturali, quelle più complicate e quelle che non raggiungiamo con una sola mano.

La primo è quando teniamo i nostri telefoni con una mano. La situazione è ancora più sfumata se guardiamo a come queste posizioni sono cambiate a causa delle crescenti dimensioni dei telefoni. Gli spazi raggiungibili stanno diventando più piccoli su schermi di grandi dimensioni. Dobbiamo inserire la nostra seconda mano per raggiungere le cose nel terzo superiore dello schermo.


 ESERCIZIO

Fra i box uno deve comunicare la possibilità di prenotare, connotalo diversamente dagli altri sfruttando i principi di cui sopra.

Call to Action

La call to action è il primo punto concreto di contatto tra le persone e il prodotto o il servizio di un’azienda. È il primo passo verso l’azione: iscriversi ad un servizio, scaricare un e-book, iscriversi a una newsletter, prenotare un esame, una stanza o acquistare delle scarpe…
Le CTA efficaci non spingono in maniera brusca le persone a compiere l’azione, ma le guidano in modo naturale verso la conversione. Una buona CTA è un mix fra un uso sapiente del copy e un corretto posizionamento all’interno dell’interfaccia. Copywriting + UX + UI

39 call to action che funzionano: https://blog.hubspot.com/marketing/call-to-action-examples

Es.

Una CTA che indica subito qual è il beneficio di compiere quell’azione..

Il copy sopra la call to action, infatti, è importante quanto la call to action stessa perché rassicura. È un testo che fa sentire le persone padrone delle proprie azioni.

CTA che non spaventa il cliente

Il timore più grande di chi acquista vestiti online è di non poterli provare. Il verbo “visita”, inserito dentro il bottone arancione, allontana le persone dall’idea dell’acquisto online e le avvicina all’esperienza dell’acquisto in negozio.

I consigli della Copy https://www.pennamontata.com/news-copywriter/call-to-action-esempi-in-italiano

Altri esempi.. perché funziono?

ESERCIZIO

Proviamo a creare una parte di home di un sito per un Surf Camp..

1.Utilizza uno schema colore coerente con l’obiettivo (vendere un viaggio) e con l’immagine guida la comunicazione

2. Struttura la pagina seguendo una griglia e impostando l’immagine sulla regola dei terzi

3. Scegli un font che sia di impatto e si stagli bene sull’immagine, legato al mondo dei viaggi e che ispiri un certo senso di relax
Banner deve essere 1360×600 px con testo e call to action come definito.

3. Realizza tre/quattro box sottostanti l’immagine che raccontino quali sono i servizi del camp tenendo conto del focus sulle call to action, del responsive, degli spazi bianchi e degli schemi colore.

Es box: 1) Affitto tavole 2) lezioni 3) soggiorno

Quali CTA potrebbero funzionare meglio? Come e dove collocarle?