CSS Web Design

Consigli utili di visual design per siti web e landing page

Tiziano Fogliata

In questa pagina ho cercato di riassumere alcune regole utili per la progettazione e realizzazione di siti, singole pagine web, landing page…

Queste indicazioni possono essere un valido supporto soprattutto per chi si avvicina a questo mondo, magari credendo che sia sufficiente imparare a utilizzare un tema o un page builder per WordPress per ottenere dei buoni risultati.

In molti casi, temi e page builder forniscono già dei modelli pronti all’uso che però possono essere facilmente rovinati quando li si vuole personalizzare decidendo di modificare un colore, un font o una spaziatura, ignorando alcune regole di base.

Queste regole, sono fatte anche per essere infrante ma, prima di farlo, ti consiglio di dar loro almeno un’occhiata e fare un po’ di pratica.

Colori

Il bianco e il nero non sempre sono la scelta migliore

La combinazione nero su bianco o bianco su nero, non offre il massimo comfort durante la lettura di testi sullo schermo e tende ad affaticare la vista. Meglio utilizzare un nero più soft rispetto al nero puro, oppure utilizzare un grigio leggero al posto del bianco se utilizzi il nero puro per il testo.

Bianco e nero puri

Controlla la saturazione dei colori

Nella scelta dei colori da utilizzare per un sito o una landing page, può essere molto utile adottare il modello HSB anziché quello RGB.

Il sistema HSB si basa sulla percezione dei colori dell’occhio umano. HSB sono le iniziali di Hue Saturation Brightness, ossia Tonalità, Saturazione e Luminosità. È molto più semplice gestire i colori con questo modello anziché con quello RGB.

Ad esempio, usando uno strumento gratuito come Adobe Color è possibile creare tavolozze di colori scegliendo di lavorare con il modello HSB. Questo permette di ottenere facilmente delle varianti molto scure e molto chiare a partire da un colore, anziché ricorrere al nero o al grigio.

Modello HSB

Un ulteriore consiglio: se vuoi aggiungere un po’ di colore ai grigi e ai neri, è preferibile utilizzare o solo colori caldi (giallo, arancio o rosso) o solo colori freddi (verde, blu, porpora). In pratica evita di usare un rosso saturato al 5% con un blu saturato al 5%.

Il contrasto non è importante, è fondamentale

Gli elementi importanti in una pagina, i bottoni, le call to action devono avere un buon livello di contrasto con lo sfondo e gli elementi circostanti.

Anche i testi e soprattutto i link presenti in una pagina devono risaltare rispetto allo sfondo. Livelli di contrasto troppo bassi possono rendere faticosa la lettura e difficili da distinguere i link rispetto al testo circostante.

A volte, quelle che possono sembrare ricercate combinazioni di grigi e colori pastello potrebbero generare più imprecazioni che apprezzamenti da parte dei lettori ;)

Sia il già citato Adobe Color, sia strumenti come il WCAG Contrast Checker permettono di verificare facilmente il contrasto tra colore dello sfondo e quello del testo.

Pessimo esempio di combinazione cromatica
Un pessimo esempio di combinazione cromatica tra testo e sfondo

Differenze nette di luminosità tra i colori

Se utilizzi più colori è preferibile adottare lo stesso livello di luminosità (utilizzando il modello colore HSB), oppure imposta una netta differenza di luminosità tra i colori.

Nell’immagine sottostante la prima riga riporta tre colori con livelli di luminosità con un ridotto margine di differenza, mentre nella seconda riga tale differenza è più marcata e il risultato è più gradevole.

Luminosità colori

I bordi e il contrasto

Se scegli di applicare un bordo a un contenitore, il colore del bordo dovrebbe contrastare sia con lo sfondo esterno, sia con quello del colore del contenitore.

Bordi e contrasto

Gli elementi più vicini dovrebbero essere più chiari

Se vuoi dare un senso di profondità, gli oggetti più vicini all’osservatore dovrebbero essere più chiari, come nel riquadro di destra nell’immagine sottostante.

Oggetti più vicini devono essere più chiari

Font

L’importanza delle proporzioni

Quando scegli la dimensione di un font, l’ampiezza di un bordo, di un margine o di un rientro, evita di inserire un numero a caso solo perché ti sembra che a occhio vada bene.

È caldamente consigliato fare in modo che la gerarchia delle dimensioni dei titoli e dei testi in una pagina sia proporzionale e segua una regola matematica.

Uno strumento gratuito come Type Scale, ti permette di ottenere facilmente le dimensioni da utilizzare per tutti i vari tag di heading di un sito (da H1 a H6). Puoi scegliere tra diverse scale, mantenendo però sempre una proporzione tra gli elementi.

Un altro modo ancora più facile è affidarsi un sistema basato sul cosiddetto 8-point Grid system (esiste anche un 4-Point Grid System, nel quale si utilizzano i multipli 4). Per i font, questo significa ad esempio partire da 16px come dimensione base del testo e utilizzare: 24px per gli H5, 32px per gli H4, 40px per gli H3, 48px per gli H2 e 56px per gli H1.

Scala tipografica proporzionale

Puoi utilizzare i multipli di 8 anche per i margini, le spaziature, in modo da mantenere più facilmente la proporzionalità degli elementi e degli spazi.

Se utilizzi i REM come unità di misura è ancora più facile gestire queste proporzioni, dato che la standard root font-size dei browser è 16px, quindi 1REM = 16px e di conseguenza 0.5REM = 8px e così via.

Imposta l’altezza della linea a 1.5

La proprietà CSS line-height è consigliabile impostarla a un valore di 1.5. Poi nulla vieta, in alcune circostanze di adottare anche valori inferiori, ad esempio quando ha necessità di ridurre lo spazio tra le righe di un testo.

Come altezza base per il corpo del testo però, ti suggerisco di tenere 1.5.

Non limitarti solo alla dimensione del font

Attraverso le regole CSS è possibile definire molto di più rispetto alla semplice dimensione dei caratteri nel testo di una pagina web.

La proprietà letter-spacing, ad esempio, permette di impostare lo spazio tra le singole lettere.

In molti casi, quando usi una dimensione generosa per i titoli, potrebbe essere utile ed esteticamente gradevole ridurre leggermente lo spazio tra le lettere.

Viceversa, testi più piccoli, possono essere più leggibili aumentando lo spazio tra le lettere.

Questo dipende dal tipo di font utilizzato, ma può valer la pena sperimentare.

Evita di utilizzare più di due famiglie di font

È una prassi abbastanza comune quella di utilizzare una famiglia di font per le intestazioni e un’altra per il corpo del testo. Nulla vita naturalmente di usarne una sola, così come non è vietato usarne più di due.

Se però scegli di ricorrere a più di due famiglie, sarà più complicato abbinarle e inoltre aumenterai il peso della pagina perché sarà necessario caricare anche la terza famiglia di font.

Sempre riguardo ai font ecco altri consigli:

  • È preferibile evitare di abbinare due famiglie di font sans-serif (tipo Arial e Helvetica).
  • È preferibile evitare di abbinare due famiglie di font serif (tipo Georgia e Times New Roman).

Ricerca la coerenza negli elementi utilizzati

Se per i pulsanti del tuo sito hai impostato un raggio del bordo di 8 pixel, è preferibile mantenerlo su tutti i pulsanti. Evita di inserire pulsanti a volte con i bordi arrotondati e a volte no e soprattutto cerca di mantenere coerente il raggio di curvatura del bordo tra questi componenti.

Usando page builder, come ad esempio Elementor, è facile cadere nella brutta abitudine di personalizzare ogni singolo widget sulla base del gusto del momento.

Meglio prendersi del tempo e definire delle regole generali e creare degli stili globali per i vari elementi, anziché applicare le modifiche manualmente su ogni singola istanza di un componente.

Il risultato sarà esteticamente più coerente e ogni eventuale modifica futura richiederà meno tempo.

Spazi e margini

Padding del contenitore e spazio tra i contenuti

Quando inserisci dei box all’interno di un contenitore è consigliabile che il padding interno del contenitore sia uguale o superiore allo spazio tra i box in esso contenuti.

Prendendo come riferimento la figura sottostante, l’esempio da imitare è quello inferiore.

Inner padding e outer padding esempio

Evita righe di testo troppo lunghe

È consigliabile restare entro il limite di 70/80 caratteri come lunghezza del testo nei paragrafi. Più le righe sono lunghe, maggiore è la difficoltà di lettura. Ne avevo già parlato in un articolo dedicato all’impiego della sidebar sui siti.

Padding dei pulsanti

Quando inserisci un pulsante, imposta il padding orizzontale in modo che sia il doppio rispetto a quello verticale.

Padding pulsanti

Sfocatura doppia rispetto all’offset per le ombre

Quando utilizzi la proprietà CSS box-shadow per aggiungere un’ombra a un contenitore, è preferibile impostare un valore blur-radius grande il doppio rispetto ai valori di offset x e y, come nei quadrati della seconda riga nell’immagine sottostante.

Ombre box-shadow

Altri suggerimenti

Semplice su complesso o complesso su semplice

Meglio evitare di sovrapporre un elemento complesso a un altro elemento complesso, come nell’ultimo esempio riportato nell’immagine sottostante.

È preferibile abbinare testo semplice su gradiente (primo esempio) oppure testo con gradiente su sfondo semplice (secondo esempio).

Semplice su complesso o viceversa, non abbinare elementi complessi

Conclusioni

Mi auguro che questi consigli possano aiutarti a evitare gli errori più comuni durante l’impostazione e la realizzazione di un sito o di una landing page.
In futuro non mancherò di mantenere aggiornata questo articolo con nuovi suggerimenti.

4 commenti su “Consigli utili di visual design per siti web e landing page”

  1. Ciao Tiziano, i tuoi articoli sono davvero ben fatti. Mi piacerebbe avere più tempo per leggerne diversi. Un saluto e complimenti.
    ps.
    C’è un plugin per inserire pulsanti dentro gli articoli di wordpress? non so come fare se non tramite un po’ di codice che ho imparato. Grazie.

    Rispondi
    • Ciao Maura. L’editor a blocchi di WordPress, che è quello predefinito, mette a disposizione un blocco chiamato “Pulsanti” che serve proprio a questo.

      Rispondi
  2. Ciao Tiziano anche se non ti conosco un grande ringraziamento per aver spiegato come dimensionare i font per i titoli perché faccio sempre fatica a farlo.
    Grazie ancora di tutto

    Rispondi

Lascia un commento