Web Design  »  Articoli  »  Web design 

Mettere mano agli stili

Ora viene la parte divertente: iniziate a lavorare sul livello della presentazione. Lasciatevi guidare nelle scelte da considerazioni corrette in fatto di usabilità, specie per il colore e per la tipografia. Usate colori forti e caratteri tipografici contrastati sugli elementi che volete enfatizzare.

Usare RGBA

Introdurre i colori è facile con RGBA. A me piace iniziare con il colore principale della pagina. Poi uso il bianco con varie opacità per dare enfasi alle sezioni dei contenuti.

Figura 6 - Nel bozzetto grafico dell'esempio lo sfondo del body è settato su rgba(203,111,21); i contenitori dell'area del contenuto su rgba(255,255,255,0.7); pochi altri elementi hanno il valore rgba(255,255,255,0.1)

Tipografia

Proprio come per il colore, potete usare la tipografia per evocare un certo feeling e attirare l'attenzione dell'utente. Usate caratteri tipografici contrastanti (tipo serif per i titoli e sans-serif per il corpo del testo) per raggruppare il contenuto in sezioni significative.

In un articolo recente, il maestro della tipografia per il web, Jason Santa Maria, offre un eccellente consiglio sul modo in cui scegliere i caratteri tipografici:

"Scrivete una descrizione generale delle qualità del messaggio che state provando a comunicare e considerate poi i font che possiedono quelle qualità"

Mi pare molto chiaro. Volevo dare al mio design un tocco classico, con qualche elemento di nostalgia, così ho usato Georgia per i titoli e ho incorporato la lettera & ornata di Baskerville nell'header.

Figura 7 - Dettaglio dell'header

Abbellimenti

Così com'è, il design non è poi così male, ma è ancora un po' piatto. Possiamo fare meglio, e dopo aver messo nel mix un po' di CSS3 e un paio di immagini PNG, tutto sarà ancora più bello.

Giocare con la luce

Gli oggetti nel mondo naturale riflettono la luce. Cerchiamo dunque di rendere il design più organico, aggiungiamo degli effetti che sfruttino la luminosità. Ho ottenuto questo risultato nel design dell'esempio creando due gradienti da bianco a trasparente di opacità variabile. Entrambi hanno un bordo bianco solido sulla parte superiore, cosa che dà al tutto un effetto doppio bordo e un aspetto più preciso. Usando la proprietà CSS3 text-shadow sui titoli e la proprietà box-shadow sui moduli per il contenuto, inoltre, abbiamo aggiunto facilmente profondità al design.

Figura 8 - Vista del design con i gradienti e le ombreggiature su testo e box

Altri articoli

Altre guide

Altre newsletter