Web design: mettere immagine portrait in landscape e viceversa

Collocare immagini orizzontali in spazi progettati per spazi verticali (e viceversa) è un problema che si incontra frequentemente in ogni progetto di web design. Ecco 4 possibili soluzioni.

 

Hai progettato un nuovo sito con i fiocchi e i controfiocchi. Leggero, chiaro, efficace, spettacolare. Hai usato immagini di stock o immagini di esempio. Hai previsto di mettere foto spettacolari a taglio orizzontale (“landscape”). Ora devi completarlo inserendo le immagini “vere”. Apri le immagini finali che ti sono arrivate e… sono tutte a taglio verticale (“portrait”). Irritazione. Ma ci sono delle soluzioni che puoi attuare anche se hai già scaricato o scattato le foto

PORTRAIT E LANDSCAPE – DIFFERENZE

Le immagini portrait vengono definite anche fotografie di ritratto mentre quelle landscape, come dice la parola stessa, sono quelle di paesaggio ritenute fino a qualche anno fa le tipologie classiche di foto.

Torniamo indietro di una ventina di anni quando andavamo in vacanza e poi facevamo sviluppare le foto dal fotografo…era difficile che scattassimo foto in verticale.

Cos’è successo che ha cambiato questa tradizione?

Sono arrivati i dispositivi mobile. Smartphone e dispositivi mobile stanno variando il nostro modo di concepire queste visualizzazioni. In quanti di voi utilizzano il cellulare in orizzontale?

La visualizzazione orizzontale / landscape è diventata per certi versi quasi innaturale sui nostri dispositivi, ma dobbiamo tenere conto che quando realizziamo un sito web è più probabile che vengano richieste immagini in formato landscape.

La differenza tra le due tipologie è il formato

Il problema di collocare immagini portrait in spazi pensati per immagini landscape è molto comune e si pone in pressoché tutti i progetti di realizzazione di siti web

È impossibile mettere una foto a taglio orizzontale in uno spazio pensato per una foto a taglio verticale e, viceversa, non è possibile mettere una foto “portrait” in uno spazio “landscape”. Il problema che ti si pone è l’equivalente digitale del problema (che ti ponevano da piccolo, ricordi?) di mettere un cubo dentro un buco rotondo, o viceversa.

Se hai progettato nel tuo sito web di includere in pagina un’immagine a taglio orizzontale, mettere una foto portrait renderebbe minuscola la foto e lascerebbe un’enormità di spazio morto/bianco. Allo stesso modo, mettere una immagine landscape in uno spazio portrait porterebbe a visualizzare l’immagine in misura minuscola, e a creare spazi bianchi incomprensibili e fastidiosi alla vista.

RISOLVERE IL PROBLEMA DELLE IMMAGINI PORTRAIT IN LANDSCAPE E VICEVERSA

Come fare, allora, se ti trovi in questa situazione? Ecco 4 suggerimenti che ti consentono di risolvere o prevenire questo problema.

01 – Chiedile prima

Chiarisci il problema in fase di start-up a chi ha il compito di fornire le immagini. In fase di avvio di progetto, assicurati che, anzitutto, ci sia qualcuno che si occupi di reperire le immagini giuste. Prenditi del tempo per parlarci insieme e chiarisci che per ogni soggetto da includere nel sito avrai bisogno sia di immagini landscape, sia portrait.

Oppure, se hai già le idee chiare, comunica che avrai bisogno solo di immagini landscape, oppure solo portrait, oppure di quali soggetti avrai bisogno di foto in un modo o nell’altro. Prevenire e intendersi è sempre la migliore soluzione.

02 – Aggiungi informazioni

Se lo spazio a disposizione nella tua pagina è landscape e il soggetto che devi includere è fortemente tagliato portrait, allora puoi arricchire lo spazio con elementi grafici a supporto, P.es. nell’immagine sotto si è partiti da un’immagine base di logo e biscotti a taglio verticale, ma lo spazio da occupare era di taglio orizzontale. Aggiungendo elementi informativi e call-to-action laterali, l’immagine finale occupa perfettamente e pienamente uno spazio orizzontale.

Se nel nostro caso non avessimo un immagine che si possa adattare perchè ha uno sfondo possiamo utilizzare questa soluzione per ovviare al problema.

Per esempio, se i nostri biscotti avessero avuto un formato portrait e uno sfondo possiamo andare su remove.bg e togliere lo sfondo e utilizzando un software come canva adattare la nostra foto ad un formato landscape

03 – Crea spazi laterali

Se ti trovi nella fortunata condizione in cui le immagini devono ancora essere prodotte da un fotografo, allora fai presente il problema in fase di avvio di progetto. Chiedi che, assieme agli scatti tradizionali in modalità ritratto, vengano prodotte anche foto con spazio aggiuntivo laterale, a destra e sinistra. Per esempio, per la produzione di una foto portrait di questo tipo

…chiedi che vengano realizzati anche scatti di questo tipo:

Con immagini di questo tipo, che con una semplice elaborazione grafica di mirroring possono diventare anche così…

…avrai modo di collocare questo soggetto fortemente verticale anche in uno spazio a taglio fortemente orizzontale. P.es. puoi costruire una efficacissima immagine per lo slider di homepage, aggiungendo testo e call-to-action a supporto:

04 – Taglia e ingrandisci

Prendi il dettaglio più significativo dell’immagine e evidenzialo nel formato che hai bisogno. Questa soluzione vale sia che tu necessiti una portrait o una landscape.

Nell’immagine sotto, la foto originale era a taglio verticale. Tuttavia, l’immagine è stata isolata e ingrandita evidenziando una sua parte (la più succulenta, la più significativa), sempre abbinandola a testi e semplici soluzioni tipografiche.

Soluzioni come queste (taglia e ingrandisci) tendono a sottolineare maggiormente l’aspetto emotivo della comunicazione. Isolare e mostrare il giusto dettaglio spesso porta chi guarda ad una emozione più intensa.

SILVIA PELUCCHI

Graphic designer | Visual designer | Packaging | Siti web | Materiali marketing |
Visual identity | Supporto aziende e PMI progettando linee esclusive di identità aziendale e per materiali di comunicazione

ALBERTO POZZI

Consulente di comunicazione digitale e digital marketing | Strategia digitale | Contenuti di qualità | Siti web | SEO | Social Media | Email marketing |
Reputation | Advertising | Formazione