Web Design  »  Articoli  »  Web design 

L'aspetto più evidente di un sito agli occhi di utenti esperti e non è l'aspetto grafico, il cosiddetto “look and feel”, che, come dice il termine stesso, indica la cosa che più immediatamente colpisce nell'entrare in un sito internet.

La grafica si è evoluta insieme alle tecniche XHTML e CSS oltre che con le più moderne techiche Ajax che permettono una maggiore interazione dell'utente con il sito nella cosiddetta era del Web 2.0. Si è evoluta perché maggiori sono diventate le possibilità di implementare aspetti grafici che senza l'uso dei CSS erano pressoché impossibili.

L'era del Web 2.0, inoltre, è stata affiancata, casualmente o meno, da una moda grafica piuttosto definita e che andremo qui ad evidenziare insieme ad altre tecniche recenti. Per meglio capire gli aspetti di questa tendenza (ebbene sì, anche nel web esistono le mode) procederemo per esempi:

Figura 1 - DesignBits, esempio di design 2.0 (click per ingrandire)

La luce come elemento primario

Come Caravaggio, che ne sapeva qualcosa, anche i moderni web designer hanno capito che i punti luce sono quelli che richiamano attenzione e danno risalto ed emozione agli elementi di una rappresentazione grafica. Ed ecco un fiorire di:

• fonti luminose (vedi l'alone più chiaro nella fascia centrale azzurra);
• luci ed ombre (il logo stesso ha una sfumatura da chiara a più scura dall'alto verso il basso e la fascia inferiore bianca ha una leggera ombratura nella parte superiore);
• riflessi più o meno realistici, soprattutto su superfici lucide (le tre immagini di anteprima dei siti nella fascia azzurra);
• bottoni e “call to action” tondeggianti o dal lettering evidente ma elegante al tempo stesso.

Notate inoltre come un buon lettering renda elegante e al tempo stesso chiaro un titolo, un paragrafo, una lista, se dietro c'è un minimo di studio della tipografia. Usare due tipi di font, ad esempio, aiuta in questo, e in questo sito è infatti evidente come l'uso di un Georgia, non appesantito dal bold di default dei titoli h1, h2, etc, renda più armonioso il rapporto con l'Arial/Helvetica del resto del sito.

Tutto è ancora più evidente e tondeggiante in quest'altro esempio:

Figura 2 - Quaffs Labs - Web 2.0 alla massima potenza (click per ingrandire)

Altri articoli

Altre guide

Altre newsletter