Web Design: come scegliere color palette e body copy
Un sito vetrina, una landing page, una piattaforma, un e-commerce, hanno in comune la necessità di essere performanti, usabili ed accattivanti. Questo obiettivo si raggiunge con il web design che è l’arte di ideare e organizzare i contenuti di un sito web.
Il web design è composto da una serie di elementi: dal font scelto per i testi, ai colori selezionati, fino alle immagini e alle icone. Ogni aspetto visivo crea l’esperienza utente che i web designer, in particolare nell’ambito User Experience e User Interface (UX / UI) , cercano sempre di ottimizzare.
Come scegliere i dettagli di tutti questi aspetti? Vediamo insieme qualche consiglio.
La scelta dei colori
Definire i colori di un sito non è solo una questione estetica ma anche comunicativa. Infatti, oltre a considerare la corretta combinazione e il contrasto da voler dare tra le varie tonalità scelte, è utile conoscere anche le sensazioni che si vogliono generare. I colori hanno un’influenza importante sul cervello umano, suscitano sensazioni, sentimenti e specifiche associazioni culturali. Ad esempio, il rosso rappresenta l’energia, il verde la natura, il giallo l’allegria, e così via, ma ogni simbologia potrebbe cambiare in base al contesto in cui viene rappresentata.
Pertanto, nella progettazione di un sito web, le scelte cromatiche hanno una valenza importante. Serve scegliere i colori di sfondo e quelli in primo piano, le tonalità per mettere in risalto il bottone con la call to action piuttosto che quelle utili a far risaltare le icone. I colori portano all’azione quindi serve conoscere molto bene il target di riferimento per comprendere come attirare l’attenzione in uno specifico punto.
Il carattere testuale
Il font selezionato per il sito web deve essere una scelta esteticamente valida e anche funzionale per facilità e piacevolezza nella fruizione del contenuto.
Esistono tantissime tipologie di font, per iniziare è utile selezionare quei caratteri che sono ben visibili sul web in modo da rendere ottimale la readability. Per essere leggibile, un carattere deve essere lineare, avere una corretta spaziatura orizzontale e verticale, ed essere ben allineato. Definite queste caratteristiche, la scelta del font deve essere in linea con la brand identity. Ad esempio, un font bastone se si vuole rappresentare la modernità, un carattere con grazie per il lusso e l’eleganza, più bold per un brand energico, rounded per uno stile più simpatico e giocoso.
Una volta scelto il font, è necessario definire le priorità dei vari testi e quindi scegliere i diversi stili per titolo, sottotitolo, call to action, paragrafo e così via.
Il testo parla al proprio target non solo nel contenuto ma anche nella forma, nella grandezza e nel colore quindi i valori aziendali e il messaggio da voler veicolare sono in ogni suo dettaglio.
Il design Omninext
Il restyling Omninext svolto nel 2023 ha cercato di rappresentare al meglio i valori del gruppo anche nel sito web.
Partendo dai colori, sono state selezionate 5 apposite tonalità:
- il blu rinominato Deep Space per dare l’idea dell’esplorazione di nuove frontiere che ogni giorno il Gruppo compie alla ricerca di innovazione. È una tonalità più bold rispetto allo storico colore blu di Omninext;
- il Waiting sunrise che sfuma dal blu all’arancione e rappresenta il momento di trasformazione che si ottiene con la ricerca e il lavoro coordinato;
- il tono di arancione denominato Atomic Tangerine che indica il punto di partenza dell’innovazione;
- il verde Mint associato alla crescita e al desiderio di un futuro sostenibile;
- il First Black a rappresentare l’incognito da scoprire.
La comunicazione visiva è parte della brand identity di una realtà, per questo nel restyling del gruppo Omninext si è scelto di realizzare una grafica ad hoc. Le icone, infatti, sono state disegnate una ad una con lo scopo di rappresentare non solo la industry o il servizio di riferimento, ma anche i concetti base di innovazione e trasformazione.
Pertanto, la visual Identity di Omninext è espressione dell’ecosistema del Gruppo.
Per approfondire, la presentazione completa del rebranding del Gruppo: Brand Restyling
