Se pensi che avere un sito web sia sufficiente per attirare l’attenzione delle persone, mi dispiace dirtelo ma sbagli di grosso.

Con questa frase, Valentina Falcinelli ha aperto il suo intervento a Inbounder 2016. Parlava di content design, ovvero della cura che dovremmo dedicare ai nostri testi dal punto di vista dell’appeal estetico, e io oggi, con te, voglio ripartire proprio da qui. Voglio rafforzare ancora di più questo concetto ed esploderlo, focalizzandomi sulla visual identity di una pagina web.

La visual identity di una pagina web merita una cura speciale perché è il punto di incontro tra il brand e il cliente. È quello che il tuo sito web comunica di te in una manciata di secondi. Ricordi? “Non leggiamo quello che non ci piace a colpo d’occhio”.

Questo significa che se la visual identity della tua pagina web è debole, se non c’è armonia, se gli elementi inseriti stridono tra di loro, puoi avere anche il copy più accattivante del mondo ma…

E allora resta con me: a seguire troverai esempi, consigli, strumenti per migliorare la visual identity delle tue pagine web partendo dall’ABC.

A come Armonia cromatica

In parte è la ragione a guidare i nostri comportamenti. Tuttavia, le emozioni svolgono un ruolo primario nel decidere cosa scegliere di leggere. Queste emozioni sono generate da stimoli sensoriali. Motivo per cui gli stimoli visivi, e in particolar modo la scelta del colore, della tipografia e del soggetto delle nostre grafiche, sono determinanti nella realizzazione di una pagina web.

Creare una palette di colori per ogni nostro progetto può essere un compito che richiede molto tempo. A volte crediamo di aver trovato una palette perfetta per il progetto a cui stiamo lavorando, ma non sappiamo come combinare i colori. A volte sembra che non abbiamo abbastanza colori o che ne utilizziamo troppi.

In generale raccomando sempre 3 regole:

• Utilizza colori analoghi/adiacenti, ovvero quelli situati vicini nel cerchio cromatico.
• Utilizza colori complementari, ovvero quelli situati ai lati opposti del cerchio cromatico. Questa scelta genera contrasti visivi, forse un po’ più difficili da usare ma utili quando ad esempio hai la necessità di far risaltare un messaggio.
• Non abusare dei colori. Due, tre colori sono sufficienti. E tra questi è sempre bene che ci sia un colore predominante. Se hai dubbi, invece che scegliere 4 o 5 colori, prendi i primi due selezionati e gioca con la loro saturazione e luminosità.

Se stai combattendo contro il blocco creativo, fermati un momento e cerca ispirazione da qualche altra parte. Se senti che sei vicino alla combinazione perfetta ma manca qualcosa, le due risorse che ti suggerisco qui di seguito ti aiuteranno a trovare la palette che fa per te con grande facilità.

1. Adobe Color CC

Adobe Color CC (precedentemente Adobe Kuler) consente di scegliere combinazioni di colori per i tuoi progetti grafici. Puoi decidere di iniziare da zero o partire da una tonalità di colore ben precisa e da lì trovare i colori complementari monocromatici o analoghi grazie a regole algoritmiche. L’interfaccia è intuitiva e semplice da usare.

2. Paletton

Una delle caratteristiche più belle di Paletton sono i campioni di colore. Una volta trovata la combinazione perfetta, Paletton ti offre la possibilità di vedere, con un solo clic, come i colori scelti possano adattarsi a una pagina web. Infine, puoi esportare la tua tavolozza in diversi formati, tra cui codice CSS, PNG e altri.

B come Belle immagini

L’identità visiva di una pagina web è un aspetto molto importante per un brand. Molto importante, sì, ma spesso sottovalutato. Le immagini hanno la finalità di catturare l’attenzione del lettore, di alleggerire e migliorare l’esperienza di lettura. Senza considerare poi che contribuiscono a dar forma alla personalità del brand.

Ma perché amiamo tanto le immagini?

• Siamo creature molto visive. Anche se la comunicazione tra persone esiste da circa 30.000 anni, è solo negli ultimi 7.000 che abbiamo sviluppato il linguaggio.
• Una grande percentuale del cervello umano si dedica all’elaborazione visiva. Le immagini sono processate 60.000 volte più velocemente delle parole e il 90% delle informazioni trasmesse al cervello sono visive.
• Il nostro cervello è in grado di immagazzinare immagini a una velocità disarmante. Questo perché percepisce le immagini come delle “scorciatoie”, simboli dietro cui è nascosto qualcosa di più grande e più complesso (pensa ai loghi, per esempio).
• I colori brillanti catturano la nostra attenzione perché il cervello è predisposto a farlo naturalmente.

Dare un’identità grafica al proprio sito web è un’attività che richiede un’analisi attenta e una comprensione profonda dell’essenza dei tuoi contenuti e della personalità del tuo sito e del tuo brand tutto.

Creare immagini ad alto impatto, che permettano alle persone di pensare o sentirsi in un determinato modo, è cruciale per ogni azienda. Tanto per farti un esempio, nel 2001 Pepsi investì più di un miliardo di dollari sulla sua immagine; per non essere da meno, nello stesso anno Coca-Cola fece lo stesso, sborsando 1,4 milioni di dollari.

Questi numeri servono a farti un’idea di quanto possano valere le immagini per un brand.

Qualche consiglio super pratico

1) Ricorda di caricare immagini leggere. Le foto devono essere di buona qualità ma, al tempo stesso, non troppo pesanti. Puoi utilizzare tool online (ti consiglio compressor.io o iloveimage.com) che permettono di alleggerirle senza rinunciare a una buona risoluzione.

2) Trai ispirazione dai libri, dal web e anche dai social. Pinterest e Instagram rientrano tra questi, ma se vuoi un punto di vista più professionale puoi utilizzare siti come visual.ly, behance, creativemarket.com, dove poter vedere tantissimi progetti e farti un’idea più chiara dello stile che meglio ti rappresenta. D’altronde, come diceva Plutarco “La mente non ha bisogno, come un vaso, di essere riempita, ma piuttosto, come legna, di una scintilla che l’accenda e vi infonda l’impulso della ricerca e un amore ardente per la verità”.

C come Caratteri tipografici

Nella composizione grafica altrettanto importante è l’uso della tipografia. La tipografia è uno strumento molto potente perché permette – in alcuni casi anche da sola – di esaltare il contenuto dei tuoi progetti e guidare l’utente nel percorso di lettura. In poche parole, la tipografia comunica.

Come scegliere la tipografia più adatta ai tuoi contenuti? È raro trovare pagine web con un solo tipo di font. Abitualmente si scelgono 2 tipologie, uno per i titoli e uno per il corpo di testo. La mia raccomandazione è quella di non usarne più di tre all’interno dello stesso progetto.

Le due principali categorie di font sono le Serif e le Sans Serif. Quando parliamo di Serif indichiamo quel tipo di lettera dotata di grazie, ovvero quei prolungamenti posti alle estremità del carattere che lo rendono più elegante, appunto più “aggraziato”. La categoria Serif viene sconsigliata nei testi molto lunghi perché, su schermo, genera problemi di leggibilità. È, invece, apprezzatissima nella grafica stampata.

La categoria Sans Serif, invece, non presenta grazie e viene usata proprio per i suoi tratti puliti e chiari. La maggior parte delle pagine web utilizzano font senza grazie per il corpo di testo, perché sono molto leggibili su schermo e danno un tocco moderno all’intera composizione grafica.

Una terza categoria che mi sento di aggiungere, visto il suo largo impiego nel web, è la tipografia calligrafica. Saperla utilizzare non è affatto semplice, può risultare perfetta per titoli o brevi frasi, ma non abbastanza leggibile per testi lunghi. Se pensi di utilizzarla all’interno della tua pagina professionale, assicurati che trasmetta la personalità che stai cercando.

Ti è mai capitato di incontrare su una pagina web un carattere tipografico che ti piace tantissimo e di volerlo a tutti costi? Puoi scoprire di che font si tratta utilizzando due estensioni web create ad hoc. Parlo di WhatFont (se utilizzi Google Chrome come browser) e FontFinder (se utilizzi Firefox).

In alternativa, puoi fotografare la tipografia che ti piace e caricarla sul sito WhatTheFont o What Font Is, dove verranno esaminate le caratteristiche delle lettere e potrai sapere a quali famiglie tipografiche appartengono o a quali più somigliano.

Se stabilire quale font usare ti sembra difficile, capire come abbinarli può essere ancora più complicato. Quante volte ti sei trovato nella situazione di dover scegliere una coppia di font senza sapere da dove iniziare? Ecco due strumenti che possono venirti in aiuto.

1. Typeconnection.com

Typeconnection.com ti guida nella combinazione dei caratteri.

2. Fontsinuse

Fontsinuse è una piattaforma che riporta esempi tipografici in diversi progetti di design. Puoi filtrare i risultati in base all’area tematica del progetto o alla famiglia tipografica a cui sei più interessato. Ti accorgerai di quanto un carattere può influire sulla resa finale di un progetto.

Fai di questo ABC il tuo mantra: A come Armonia, B come Belle immagini, C come Caratteri tipografici. E aggiungo D come Dimostrami che questo post ti è stato utile: condividilo o scrivimi cosa ne pensi nei commenti. 😉