Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Tendenze: mettiamo una foto come background del sito?
Sembra che nel web design del futuro ci sia sempre meno spazio per la grafica e per i fronzoli:
presto, a spopolare, saranno le foto. Larghe e ovviamente bellissime, si sono messe in testa di
sostituire noi web designer e di rendere, da sole, un sito accattivante e moderno.
Una volta venivano usate perlopiù da fotografi che riuscivano così a evidenziare in modo
immediato le loro capacità; adesso la scelta di immagini e paesaggi come background, a
sostituzione di pattern e sfumature, è sempre meno un fenomeno di nicchia. Anzi.
Pizzerie, alberghi, negozi di intimo, rock band: in molti ormai scelgono quest’impostazione grafica,
ritenendola semplice ed efficace visivamente.
Come dare torto a questa convinzione? Una bella immagine può, effettivamente, fare la fortuna
di un sito. Invoglia l’utente a rimanere nella pagina e sempre più spesso una foto può esprimere
in pochi istanti concetti che, scritti o manifestati a parole, molto probabilmente perderebbero tutto il
loro fascino.
Ma anche in questo caso il lavoro di un buon grafico non è da sottovalutare. Senza il giusto
gusto estetico e determinati accorgimenti, è facile scadere in un lavoro rozzo e dall’effetto
tutt’altro che attraente.
Come ogni altra scelta grafica, anche l’utilizzo di foto come background ha punti di forza e lacune.
Vediamo insieme quali sono.
1 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Coerenza comunicativa
Devi realizzare il sito di un agenzia di viaggi, i cui concept basilari sono relax, turismo, paesi
esotici? Una bella foto di un paesaggio di mare (una spiaggietta hawaiana, per intenderci) o di un
panorama immerso nel verde, ha un impatto visivo molto forte e a livello irrazionale accende subito
i desideri inconsci dell’utente.
Lo stesso discorso vale se si progetta un sito fotografico: inserire nel background alcune foto è
una tecnica astuta per coinvolgere l'utente e presentargli in modo immediato le competenze
dell’artista. In questo modo, gli eventuali contenuti testuali passano in secondo piano com’è
giusto che sia, dato che saranno le opere a parlare.
2 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Il concetto chiave è: se utilizzate nei giusti contesti, le foto come background possono
evidenziare graficamente i punti di forza dell’attività.
Contenuti testuali in secondo piano per far risaltare il background
3 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Se proprio si vuole puntare sulle immagini, è necessario dargli ampio spazio. Allineare il sito a
sinistra, come accennato in questo articolo, potrebbe essere un’interessante soluzione: infatti in
questo modo l’immagine non viene soffocata dal sito, che altrimenti ne coprirebbe una buona metà.
Trasparenze
Un’altra ottima scelta, sempre azzeccata, è quella di inserire i contenuti testuali su sezioni che
conservano una percentuale di trasparenza tale da celare solo in parte l’immagine di sfondo. Le
4 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
trasparenze non solo sono eleganti e possono dare un certo tocco di classe al sito, ma nelle
tonalità del bianco e del nero sono facilmente adattabili a qualsiasi background. E dato che le foto
sono generalmente composte da migliaia di pixel di ogni colore e sfumatura, questo è un
particolare da non sottovalutare.
Effetti sulle foto
Bianco e nero, magari con un solo accenno di colore. Color seppia. Anticato. Effetto pixelatura o
sfocato. Ombreggiatura interna. Chi ha un minimo di conoscenza dei filtri di Photoshop (e chi non li
ha, può sempre appoggiarsi alle centinaia di azioni già pronte reperibili on-line) può finalmente
sbizzarrirsi. Attenzione a non esagerare o a non andare fuori tema, però! Utilizzando gli esempi
di prima: se per un sito di un fotografo un soggetto in bianco e nero può essere una scelta ovvia e
adatta, in un sito di un agenzia di viaggi è ovviamente da evitare. Il mare in bianco e nero non è
certo una meta allettante per le proprie vacanze, no?
5 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
In-coerenza comunicativa
Che i paesaggi siano la pace dei sensi si sa, non è cosa nuova. Ma non è un buon motivo per
abusare di colline e montagne, non ti pare? Si sta sempre più espandendo l’abitudine di utilizzare
scenari panoramici per i propri background, indipendentemente dal soggetto della foto o
dall’attività da promuovere. Ricordati sempre che lo sfondo non deve solo essere attraente ma
deve anche e soprattutto essere coerente con il sito e rappresentarlo visivamente, in modo più o
meno indiretto.
Evita di dare all’utente messaggi contraddittori o equivoci!
6 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Scarsa leggibilità
Il rischio di rendere i contenuti poco illeggibili c’è, e basta sfogliare qualche sito per rendersene
conto. A meno che l’immagine non sia prevalentemente di un unico colore, è assolutamente da
evitare l’inserimento dei testi direttamente sul background senza un’immagine di sfondo a fare da
contrasto o una trasparenza che copre, almeno parzialmente, la foto.
7 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Immagini di bassa qualità
Le immagini “pixelate” , che sono fastidiose già a piccole dimensioni, a 1000 pixel di larghezza
sono un vero pugno in un occhio. La regola basilare per una foto in background è, manco a dirlo,
che essa sia ad altissima risoluzione: le immagini di bassa qualità oltre a imbruttire tutta l’estetica
trasmettono un chiaro messaggio di sciatteria che è, per gli utenti, un deterrente a lasciare
immediatamente il sito in cui si trovano.
8 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
Foto a discapito della grafica
Ricordati sempre che una foto, per quanto accattivante possa essere, non può e non deve
sostituire completamente la grafica. E, soprattutto, non basta appiccicare sullo sfondo una bella
foto per dire di aver fatto un buon sito: bellezza e senso estetico sono due componenti che è
possibile rintracciare in ogni dettaglio.
Quindi che foto sia, ma con un particolare occhio di riguardo alla tipografia, agli abbinamenti di
colore e a tutti gli altri elementi grafici della pagina.
E attento a non confondere la grafica minimalista con la grafica inesistente: sono due cose
completamente diverse.
E ora, ispirazione.
Ti piace questo stile e cerchi l'ispirazione per un tuo progetto? Questa raccolta fa al caso tuo.
Questi siti utilizzano le foto in background in modo molto creativo, senza mai apparire scarni o
disordinati.
1. All Jarreau
9 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
2. Art of seduction
3. Cie de Oorsprong
10 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
4. Ewt
5. Frizo
11 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
6. Guillaume Verdon
7. Hoddow
12 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
8. La Novia
9. Mellow
13 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
10. Mobitec
11. This is leaf
14 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
12. Soaky
13. G2
15 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
14. Easy bistro
15. The salon
16 / 17
Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
17 / 17
Powered by TCPDF (www.tcpdf.org)
