Immagini: tutto quello che c'è da sapere
Non è facile entrare nella testa di un’azienda per rappresentare la sua immagine, qui sotto cerchiamo di spiegare il più possibile cosa rappresenta visivamente 2dispari.
tipo di immagini e aree testi
Le nostre immagini hanno sempre un denominatore comune: la freschezza. Abbiamo 2 categorie principali, le immagini di tipo fotografico, che occupano tutto lo spazio, e quelle di tipo “mockup” cioè anteprime di prodotti scontornate su sfondo tinta unita.
In entrambi i casi l’area dedicata ai testi deve essere sempre in alto e non meno del 30% dell’altezza del contenitore.
IMPORTANTE: mai sovrapporre l’area dei testi ad elementi importanti del soggetto. Per es. gli occhi delle persone non possono essere posizionati sotto i testi perché sono elementi di empatia, al massimo si può andare leggermente sopra la fronte.
Proporzioni 4/5, di tipo fotografico a tutto sfondo.
Proporzioni 1/1, di tipo fotografico a tutto sfondo.
Proporzioni 5/4, di tipo mockup scontornato su tutti i lati.
Proporzioni 5/4, di tipo mockup scontornato su tutti i lati con taglio del soggetto sotto.
Proporzioni 5/4, di tipo mockup scontornato con taglio del soggetto su entrambi i lati.
Proporzioni 5/4, di tipo mockup scontornato su tutti i lati con taglio del soggetto a lato.
proporzioni: 5/4
Il formato 4/5 è uno dei nostri preferiti perché versatile, dinamico e perfetto per il suo riadattamento desktop/mobile. Su Desktop è utilizzabile anche per immagini che superano l’altezza del monitor quando si vuole dare risalto ad immagini particolarmente creative. Ottimo anche in sequenza perché non risulta monotono.
proporzioni: 4/5
Questo formato è orizzontale anche se sembra quasi un quadrato. Si presta benissimo a lasciar spazio a contenuti testuali su mobile e su desktop risulta molto versatile. Perfetto in ripetizione per categorie di oggetti con ingombro maggiormente orizzontale.
proporzioni: 1/1
Il formato quadrato (1/1) è largamente usato sul web per la sua facilità di utilizzo, vedi Instagram. Noi lo usiamo sia per le immagini di tipo fotografico che per quelle di tipo mockup se il soggetto originale parte da questa proporzione. A volte può risultare noioso quindi va usato con cautela.
proporzioni: 9/16
Questa proporzione ci piace perché su mobile occupa l’intero schermo e quindi offre un alto impatto visivo e su desktop può essere sfruttata per immagini molto definite che possono essere fruite scorrendo lo schermo. La riteniamo difficile, però, da usare per 2 motivi:
1. sono necessari soggetti che si prestano a questa proporzione (es. persone intere in piedi) e che spesso sono difficili da reperire in foto;
2. non si presta alla sovrapposizione di testi, proprio perché verrebbe meno l’effetto visivo ad alto impatto, ma spesso la presenza di testi sovrapposti è necessaria a spiegare cosa offriamo all’utente medio.
proporzioni: 16/9
Lo evitiamo per 2 motivi principali:
1. su mobile risulta striminzito e praticamente non leggibile;
2. anche se su desktop ottiene un ottimo risultato una volta posizionato a piena larghezza e altezza necessita di una doppia immagine (quindi una aggiuntiva per mobile) perché quasi mai il soggetto nell’immagine può essere tagliato verticalmente riadattandosi in automatico.
Inoltre nella ripetizione appare troppo “vecchia scuola”/ primi anni del web.
1. sono necessari soggetti che si prestano a questa proporzione (es. persone intere in piedi) e che spesso sono difficili da reperire in foto;
2. non si presta alla sovrapposizione di testi, proprio perché verrebbe meno l’effetto visivo ad alto impatto, ma spesso la presenza di testi sovrapposti è necessaria a spiegare cosa offriamo all’utente medio.
Copertine
Un design per domarli tutti. La parola chiave è: coerenza. Abbiamo deciso di rappresentare la nostra immagine in un solo, semplice, modo, eccolo! Per i post, per le thumbnails, per le cover, tutto unificato.
Spazi e distanze. Il nostro logo di un colore differenti ogni volta (vendiamo immagine d’altronde) e, se serve, una parola chiave colorata per metterla in risalto. Il titolo può superare il 60% della larghezza totale solo se l’immagine lo consente, vedi esempi. La lunghezza ideale per il titolo è 2 righe mentre per il sottotitolo è 1 riga, vedi eccezioni sotto.
dettagli font
TITOLO
FONT: Montserrat Black
DIMENSIONE: 126 PT
SPAZIATURA: -17%
LARGHEZZA LETTERE: 93%
INTERLINEA: 126 PT
SOTTOTITOLO
FONT: Montserrat Bold
DIMENSIONE: 42 PT
SPAZIATURA: 25%
LARGHEZZA LETTERE: 93%
INTERLINEA: 63 PT
Esempio fotografico, logo e parola chiave colorati.
I colori del logo e della parola chiave vanno scelti con cura, sono l’unico fattore con cui distinguiamo le nostre immagini.
Andare a capo dove solo dove serve, altrimenti attenersi a 2 righe.
Le immagini tono su tono vengono associate molto al design e sono facili da realizzare, spesso risolvono i problemi di leggibilità della versione fotografica.
I soggetti devono sempre essere molto in risalto, prendere più spazio possibile del 40% a disposizione. Se necessario si può far sbordare.
Le immagini semi-reali o astratte sono ancora più preferibili perché rappresentano ancor meglio il design già dal primo impatto visivo.