Grafica web: dare enfasi agli elementi grafici

Nuovo appuntamento con il corso di grafica web. Siamo quasi giunti alla fine della prima parte del corso, quella più teorica e rivolta ai principi della progettazione grafica: dopo aver analizzato i principi di equilibrio e ritmo, è arrivato il momento di parlare del contrasto, ovvero di come dare enfasi a determinati elementi della nostra composizione grafica.

Enfasi

Il concetto di enfasi è particolarmente interessante, poiché  offre diversi spunti per creare una composizione grafica accattivante, grazie a delle strategie abbastanza elementari. Quando creiamo enfasi, definiamo semplicemente  il punto focale della nostra composizione grafica; scegliamo cioè quali sono gli elementi che vogliamo colpiscano maggiormente l’attenzione dell’utente e quali invece vogliamo porre in secondo piano.

La scelta di un punto focale dipende ovviamente dal tipo di azione che vogliamo far compiere all’utente quando visiterà il nostro sito web. Se vogliamo enfatizzare il design dei nostri prodotti, metteremo in risalto quest’ultimi; se vogliamo che l’utente ci contatti, potremo stimolarlo visivamente utilizzando alcune call-to-actions posizionate in punti strategici del layout. E cosi via.

Prima di enfatizzare questo o quell’elemento, occorre quindi compiere un’analisi: qual è il target del sito (la nicchia di mercato che visiterà il sito) e quale il prodotto/servizio che intendiamo offrire? Quali elementi del mio layout hanno maggiore rilevanza per quello che è il mio scopo finale?

Questo tipo di analisi è fondamentale, perché nella maggior parte dei casi una pagina web è ricca di stimoli visivi e non: pulsanti, testi, immagini, links e molto altro ancora. In mezzo a tutto questo marasma di informazioni, è fondamentale non stordire l’utente enfatizzando più elementi in un modo visivamente pesante.

Figura 1- Home page del sito Apple

La home page del sito Apple  è un’intramontabile esempio di punto focale sui prodotti offerti dall’azienda. Dato che il design e l’estetica di quest’ultimi sono la caratteristica su cui si poggia la strategia aziendale della Apple, è più che ovvio che nello store on-line si faccia leva su immagini ad alta qualità e di spiccate dimensioni dei prodotti in vendita.

Per dare enfasi ad un elemento piuttosto che ad un altro, è possibile lavorare sulla proporzione tra gli elementi della composizione grafica (abbiamo visto poche pagine addietro cosa si intende con proporzione), o, in alternativa, sul loro contrasto.

Vediamo nel dettaglio il significato di questi due termini.

Dare contrasto

Il modo più semplice per enfatizzare determinati elementi all’interno di un layout consiste nel creare contrasto tra gli elementi stessi, attraverso l’uso di colori, forme o dimensioni capaci di mettere in primo piano l’elemento che vogliamo evidenziare.

Contrasto di colore

L’uso del colore è un modo semplice e immediato per creare contrasto. I colori più vivaci e accesi, come il rosso, l’arancione e il giallo attirano maggiormente l’attenzione.

Se poniamo un elemento dal colore “caldo” accanto ad un elemento in scala di grigio, o dal colore freddo (come il blu o il verde), l’elemento con il colore acceso sarà il punto focale della nostra composizione grafica, e lo sarà sempre, a prescindere da cosa rappresenti l’elemento in questione.

I contrasti che più colpiscono l’occhio dell’utente sono generalmente molto forti, e dati dall’accostamenti di colori diametralmente opposti, come il bianco e il nero. Se poniamo un elemento bianco e un elemento verde su un background nero, è l’elemento bianco il punto focale dell’immagine, perché il contrasto tra il bianco e il nero è uno dei più forti quando si tratta di impatto visivo.

Vediamo qualche esempio di contrasto colore nel Web Design:

Figura 2 – Home page del sito Helldesign

La home page del sito dell’agenzia Helldesign ci offre un buon esempio di contrasto tra il colore scuro del background e il colore chiaro della maggior parte degli screenshot presenti nello slider che mostra i progetti curati dall’agenzia.

Il contrasto fa si che i lavori vengano enfatizzati ed appaiano luminosi su uno sfondo altrimenti molto cupo: impossibile non notarli!

Figura 3 – Home page del sito Calepino

Il background cosi chiaro del sito Calepino non fa altro che enfatizzare maggiormente le immagini dei prodotti, rese ancor più evidenti dal colore rosso che caratterizza lo sfondo di ogni immagine e che esalta ancora di più il colore bianco delle copertine dei taccuini.

Figura 4 – Home page del sito Get Clock

L’header in bianco e nero del sito Get Clock mette particolarmente in evidenza la call-to-action verde fosforescente inserita sopra l’immagine, creando un punto focale visivamente molto forte.

Ci sono diversi modi di creare contrasto lavorando sulle tonalità cromatiche che scegliamo per la grafica dei siti che stiamo progettando.

Quello più utilizzato nella progettazione grafica (web e non) è senz’altro il contrasto che si viene a creare quando si immette un particolare a colori in una composizione grafica in bianco e nero. Un classico che si rivela spesso vincente, soprattutto per la carica emozionale che questa combinazione di colori spesso è capace di infondere.

Vediamo qualche esempio.

La sfumatura azzurra in background, l’iride che richiama il colore dell’acqua, resa ancora più accesa grazie al contrasto con il volto in scala di grigio: tutto in questa immagine esprime i concept di freschezza e comfort: la combinazione perfetta per una rèclame di una lente a contatto.

In questo esempio, abbiamo selezionato l’immagine di una modella da un sito di immagini stock per utilizzarla in un banner atto a pubblicizzare un nuovo modello di Smartphone appena messo in commercio. Il target è decisamente giovanile, e proprio per questo abbiamo scelto l’immagine di una ragazza capace di rappresentare il mercato in cui il prodotto verrà immesso. L’immagine iniziale, anche se carina, è troppo uniforme e non presenta punti focali che possiamo sfruttare per mettere in evidenza il prodotto; inoltre le righe rosse della maglietta della modella potrebbero in qualche modo distrarre l’utente da quello che è il prodotto reclamizzato.

Anche in questo caso utilizzare un contrasto colore basato sull’effetto bianco/nero in combinazione con elementi dai colori accesi si rivela una soluzione molto efficace: la modella viene in questo modo posta in secondo piano rispetto al prodotto, che diventa cosi il punto focale dell’intera composizione.

I ghirigori e le decorazioni colorate, sottolineano ancora di più la differenza tra la vivacità del prodotto e il grigiore della ragazza. Il messaggio inconscio? Questo Smartphone è una vera novità, è vitalità, entusiasmo, colore ed energia.

Contrasto di dimensioni o di prospettiva

Il contrasto di dimensioni è un concetto abbastanza elementare: per enfatizzare un elemento, ne aumentiamo le dimensioni rispetto al contesto a cui appartiene o agli altri elementi della composizione grafica.

Nell’header del sito Nokia, per mettere in evidenza lo smartphone C3, lo stesso è posto in primo piano rispetto agli altri cellulari. Il focus sulla prospettiva è inoltre enfatizzato dalle dimensioni dello smartphone, visibilmente superiori a quelle dei telefoni posti in secondo piano.


 Contrasto di nitidezza o di luminosità

Un altro modo efficace per dare enfasi ad un elemento consiste nel creare un contrasto tra quest’ultimo e il background in cui è inserito: nell’esempio che segue ci accorgiamo che, nonostante la figura della donna con il talleiur beige sia posta in primo piano, a causa del contrasto colore poco pronunciato finisce con l’amalgamarsi con gli altri elementi dell’immagine, causando una perdita di focus visivo.

Se evidenziamo maggiormente il contrasto tra la donna e il background, sfocando leggermente quest’ultimo, rafforziamo il punto focale, che apparirà in questo modo più nitido e definito.

Conclusioni

Quelli che abbiamo visto sono ovviamente solo alcuni modi per dare enfasi a determinati elementi di una composizione grafica. Ci siamo limitati a vedere le tecniche più semplici e di uso comune, che metteremo in pratica quando cominceremo a progettare i nostri layout. La prossima settimana parleremo di…atmosfera. Non mancare!

Indice del corso

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag:

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

8 commenti

  1. Matteo

Trackback e pingback

  1. Grafica web: dare equilibrio e ritmo ai nostri layout | Your Inspiration Web
    [...] L’enfasi [...]
  2. Corso grafica web | Your Inspiration Web
    [...] L’enfasi [...]
  3. I principi della progettazione grafica: la sezione aurea nel web design | Your Inspiration Web
    [...] L’enfasi [...]
  4. Corso grafica web: utilizzare le griglie | Your Inspiration Web
    […] L’enfasi […]

Lascia un Commento

Current day month ye@r *