Come migliorare l’aspetto grafico del proprio sito

Per realizzare un sito web bello ma allo stesso semplice bisogna partire dal principio, dalla base cioè dalla grafica, questo aspetto può fare la differenza dal distinguere un buon sito da uno mediocre.

Nel mondo del web ci sono moltissimi spunti e idee da prendere in considerazione per la realizzazione del proprio sito web, basti pensare a librerie di temi come ThemeForest, graficamente perfette e curate nel più minimo dettaglio.

Una differenza sostanziale tra un sito realizzato da un professionista rispetto a quello costruito da un neofita del settore, sta proprio nella cura dei “minimi dettagli”.
I punti fondamentali sono 3: Tipografia, Colori e Immagini.

Tipografia

Nel mondo del web, più del 90% dei contenuti è testo, basti pensare che la grande maggioranza delle informazioni contenute nel sito web, sono testuali, ed è per questo che ogni web designer, deve conoscere le basi della tipografia.

La tipografia quindi deve essere studiata per rendere le informazioni il più chiare possibile per gli utenti che navigano, ciò significa riuscire a far cadere l’attenzione il più possibile sui punti di interesse, rendere la lettura piacevole sia da lato desktop che mobile.

Il risultato sarà un aumento di tempo medio di permanenza nelle pagine web e una grande possibilità di far recepire il messaggio.

Body Text o corpo del testo, è la parte principale di contenuti testuali all’interno di un sito web e nella progettazione della grafica bisogna concentrarsi su 4 punti fondamentali che sono:

  • Carattere tipografico (font-family)
  • Dimensione (font-size)
  • Interlinea (line-height)
  • Distanza tra le lettere (letter-spacing)

Font Family, è la scelta tipografica che deve fare il web designer e lo strumento da utilizzare consigliato è Google Font, una libreria con più di 900 tipologie di font, soprattutto perché questi sono caratteri web quindi visualizzabili da chiunque visiti una pagina web e vengono distinti in 5 categorie:

  1. Serif: con grazie.
  2. San Serif: senza grazie.
  3. Display: quelli con un po’ più di “dettagli”.
  4. Handwriting: simulazione di grafia umana.
  5. Monospace: mantengono lo spazio uguale tra le lettere.

Size, la dimensione del carattere, è importante distinguere tra quella per la carta stampata tradizionale e quella per la grafica web, se per la prima il corpo dei caratteri si aggira intorno ai 10 e 12 punti, per il web, la dimensione ottimale, è tra i 14 e i 16 pixel.
Attenzione però, bisogna anche verificare come sono stati composti i font, infatti ad oggi si può evitare di utilizzare i valori in pixel e adottare altre unità di misura come gli em.

Line height, l’interlinea ossia la distanza verticale tra le linee, generalmente dovrebbe essere tra il 120% e il 145% del size.
Quando viene regolata l’interlinea, si cerca di fare in modo che le linee non siano troppo attaccate tra loro, generalmente nella grafica web si può impostare l’interlinea con i numeri, come 1, 1.5, 2, etc, ma anche con i pixel e gli em.

Letter spacing, distanza tra le lettere, ossia una distanza che si può applicare tra ogni singola lettera all’interno di ogni parola.
E’ importante il non abusare troppo di questa funzione, perché può tornare utile invece per l’elaborazione di una titolazione particolare (h2, h3 e così via…).

Headings

Sono importantissime le titolazioni all’interno di una grafica web, perchè da subito l’idea di cosa si sta per leggere all’interno di una pagina o post.
Importantissimo dare una gerarchia ai titoli, nei temi, ad esempio, sono già pre-impostati con uno studio affinché siano ottimali, nessuno vieta però la loro modifica. 
Per i titoli, è possibile utilizzare un font-family diverso dal corpo del testo, Google Font offre la possibilità di associare, in base al testo, un carattere diverso ma equilibrato per le titolazioni.

Alcune regole da tenere bene in considerazione:

  • I titoli tutti in maiuscolo vanno bene solamente per titoli corti, ma soprattutto senza l’accapo.
  • Non utilizzare mai il sottolineato, questo vale anche per tutti i testi che non sono link.
  • Lasciare un buon margine sia sopra che sotto al titolo.

La scelta dei colori

Per rendere il proprio progetto gradevole, bisogna fare un’ottima scelta dei colori da utilizzare.

Quali colori utilizzare? La risposta è apparentemente semplice, da tenere sempre in considerazione il colore utilizzato nel logo, da li poi cercare e sviluppare la propria tavolozza colori.

Ad oggi ci sono molti software online gratuiti che si possono utilizzare per creare in pochi click il proprio set di colori, per esempio color.adobe.com, coolors.co, paletton.com e mycolor.space.

Una volta scelto il set di colori, è buon uso, far esperimenti per trovare le giuste combinazioni, l’ideale è non superare l’utilizzo di 4 colori.
Importante è il colore del testo, il nero è il colore migliore da utilizzare per il corpo del testo, se va in contrasto con uno sfondo bianco, altrimenti viceversa, il colore bianco se lo sfondo è nero. Si può utilizzare anche un grigio scuro anziché il nero, l’importante è che sia di buona lettura all’occhio dell’utente.

Le immagini

Per una grafica web accattivante è importantissimo che le immagini seguano le linee guida del proprio progetto, in rete ci sono moltissimi siti dove recepirle, sia gratuitamente che a pagamento, come pexels.com, pixabay.com e freepik.com.

E’ importante non esagerare troppo con l’utilizzo di immagini “finte”, altrimenti il risultato finale del proprio sito web, risulterebbe anonimo e poco personale, una fotografia “amatoriale” spesso può risultare più efficace.

In conclusione, una volta determinate queste semplici, ma fondamentali, regole, si può dar sfogo alla propria creatività nella realizzazione di un ottimo sito web semplice ma efficace e di impatto.