Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Composizione fotografica e web design

Sfruttare le tecniche della buona composizione fotografica per migliorare le nostre pagine web
Sfruttare le tecniche della buona composizione fotografica per migliorare le nostre pagine web
Link copiato negli appunti

Pensate a ieri sera. Eravate di fronte alla vostra TV, guardavate la vostra soap-opera preferita con una bella tazza di the in mano. Avete notato, mentre eravate coinvolti nell'ultimo appassionante triangolo amoroso, che il cameraman ha lavorato duramente per assecondare il movimento naturale del vostro sguardo sullo schermo? Con grande cura ha impostato le singole inquadrature per creare qualcosa di equilibrato e bilanciato.

Pensate ora alla scorsa settimana. Eravate seduti con la vostra fidanzata a guardare una bella partita. Avete notato che il cameraman che inquadra la scena per accompagnare la direzione del gioco? Un giocatore che si muove verso destra sarà sempre inquadrato in modo tale che tale che si trovi sempre all'estrema sinistra dello schermo, avendo così molto spazio in cui muoversi.

Queste due tecniche di inquadratura usate dai nostri cameraman si chiamano 'Looking room', dette anche 'Lead room'. Si definisce looking room lo spazio tra il soggetto (sia esso un giocatore di calcio o una faccia) e il bordo dello schermo. Specificamente, looking room è lo spazio negativo sul lato in cui il soggetto sta guardando o si sta muovendo. La cosa interessante è che si tratta di un concetto non applicabile solo alla fotografia, ai film o alla televisione, ma anche al web design.

Le basi dell'inquadratura

Prima di scendere nei dettagli e di vedere come tale concetto possa essere applicato al web, dobbiamo accennare ad alcuni concetti di base della composizione fotografica.

Molti siti web usano immagini o fotografie per arricchire i contenuti. Ma anche avendo a disposizione fotografie professionali, senza una comprensione minima dell'inquadratura e delle composizione, potete arrecare danni al modo in cui un'immagine viene percepita.

Un modo semplice per rendere interessanti le foto consiste nel riempire l'inquadratura.

Prendiamo questo semplice scatto di un cavallo:

Figura 1 - Cavallo
screenshot

Una cosa davvero semplice. Ma possiamo lavorarci un po'.

Facendo un bel crop e riempiendo così l'inquadratura possiamo immediatamente l'impatto della foto.

Figura 2 - Immagine del cavallo dopo il crop
screenshot

Ho anche aggiunto dello spazio (looking room) alla destra del cavallo. È lo spazio in cui il cavallo potrebbe camminare o muoversi. Da un senso di movimento all'immagine.

Soggetto, spazio, movimento

In generale, un ritratto fotografico avrà un soggetto e dello spazio intorno ad esso. L'interesse visuale nella fotografia di ritratto può venire dal movimento, dal modo in cui l'occhio si sposta intorno allo scatto. Per far muovere l'occhio, il fotografo modifica lo spazio intorno al soggetto.

Osservate questo ritratto.

Figura 3 - Ritratto
screenshot

Il fotografo ha inquadrato il soggetto sulla parte destra, lasciando dello spazio nella direzione in cui il soggetto sta guardando. L'inquadratura del soggetto (1), con lo spazio sulla sinistra (2), crea movimento, come mostrato dalla freccia (3).

Figura 4 - Schema del ritratto
screenshot

Notate che il soggetto non è inquadrato centralmente (come viene mostrato dalla linea a puntini).

Se il fotografo avesse inquadrato il soggetto con lo stesso spazio su entrambi i lati, la composizione risultante sarebbe stata statica, come quella del cavallo nella prima foto.

Figura 5 - Ritratto centrato
screenshot

Se il fotografo avesse inquadrato il soggetto lungo la parte sinistra, ovvero nella direzione in cui sta guardando, lo spazio rimanente sulla destra avrebbe portato ad una composizione molto poco equilibrata.

Figura 6 - Ritratto inquadrato a sinistra
screenshot

L'origine di tale sensazione di disequilibrio è ciò che l'inquadratura sta dicendo al vostro occhio di fare. Il soggetto, guardando verso sinistra, ci suggerisce che noi dovremmo fare lo stesso. Tuttavia, il looking room sulla destra sta suggerendo al vostro occhio di occupare quello spazio. Il risultato confonde.

Applicare il looking room al web

Possiamo applicare la stessa teoria al layout di una pagina web o di un'applicazione. Prendendo questi stessi tre elementi (soggetto, spazio e movimento) possiamo guidare l'occhio dell'utente verso l'elemento che vogliamo. Come desiger o editor di contenuti, rendere al meglio l'inquadratura delle foto può avere un effetto sottile ma importante su come la pagina viene percepita visivamente. Prendiamo questo esempio:

Figura 7 - Home page della BBC
screenshot

La home page della BBC usa splendide fotografie come un modo per promuovere i contenuti. In questo caso, hanno fatto un crop sulla foto principale per guidare l'occhio dell'utente verso il contenuto.

Applicando la stessa teoria, il designer o l'editor hanno applicato una notevole quantità di looking room (2) alla fotografia per creare equilibrio e bilanciamento rispetto al design complessivo della pagina, ma anche per creare un movimento dell'occhio dell'utente verso i contenuti (1).

Figura - Home page della BCC con note
screenshot

Se l'immagine venisse riflessa orizzontalmente cosa accadrebbe? Ora il looking room è sulla destra. Il soggetto della fotografia sembra che guardi fuori dalla pagina, portando lo sguardo dell'utente lontano dal contenuto. Di nuovo, ciò risulta in qualcosa di confuso perché i nostri occhi devono lottare per portare lo sguardo verso il lato sinistro della pagina.

Figura 9 - Immagine riflessa orizzontalmente
screenshot

Un pizzico di Art Direction

L'Art Direction può essere descritta come l'atto o il processo di gestire al presentazione visuale di un contenuto. È qualcosa di difficile da fare sul web, perché il contenuto e la presentazione sono quasi sempre separati. Ma dove ci sono immagini e quando conosciamo i template su cui queste immagini appariranno, possiamo provare a colmare il gap tra contenuto e presentazione.

Capendo il valore dell'inquadratura e del looking room, e il fatto che esso si estende oltre la fotografia, possiamo iniziare a vedere come la fotografia possa giocare un ruolo cruciale nella presentazione e comunicazione del contenuto.

Non ci limiteremo a riempire template. Faremo Art Direction.

Crediti per le foto

Ritratto: Carsten Tolmkit

Cavallo: Mike Pedroncelli

Ti consigliamo anche