L’uso artistico dello sfondo a tutto schermo è diventato negli ultimi anni una delle tendenze più in voga tra i web designer. Siti web, portali e social network con immagini fullscreen di sfondo riescono in questo senso ad esercitare un potere di attrazione maggiore sugli utenti e quindi a veicolare al meglio il brand aziendale. In questo articolo ci proponiamo di descrivere brevemente alcune buone pratiche di implementazione di questa tecnica, ormai sempre più diffusa, condite da qualche bel esempio.
Sfondo a tutto schermo con immagini e video
Iniziamo con il dire innanzitutto che lo sfondo a tutto schermo nei siti web può essere realizzato sia attraverso l’utilizzo di immagini statiche che di video. Nel primo caso ci riferiamo in particolare a fotografie e illustrazioni sia come immagini fisse sia in modalità slideshow e carosello; mentre per quel che riguarda il video l’implementazione a volte può essere un po’ più elaborata. Ad ogni modo è importante sottolineare che questa tecnica non è indispensabile per una corretta fruizione delle informazioni per cui è sempre bene prevedere delle pagine di fallback nel caso in cui ci fossero problemi di visualizzazione da parte degli utenti.
Buone pratiche di implementazione dello sfondo a tutto schermo
La homepage di InVision rappresenta un buon esempio di sito web con sfondo a tutto schermo. Da notare in questo caso l’applicazione sull’immagine di una trasparenza scura che consente una lettura più agevole dei contenuti testuali.
Per quel che riguarda leggibilità dei testi ovviamente con i video le cose si complicano e la cosa migliore da fare in questi casi è ispirarsi a quanto fatto da Story & Heart in cui il video è stato trattato in post-produzione con l’obiettivo di renderlo cromaticamente uniforme.
Come abbiamo già avuto modo di sottolineare pocanzi nel momento in cui si decide di implementare uno sfondo a tutto schermo per il proprio progetto web, è fondamentale assicurare un contrasto visivo con i contenuti testuali. Una valida soluzione può essere quella proposta da Core 4.
Per quel che riguarda le slideshow di sfondo vi proponiamo l’esempio di Coal Headwear che oltretutto “linka” ciascuna immagine alla corrispondente sezione interna al sito in cui è implementata l’immagine stessa come sfondo.
La modalità slideshow come sfondo può essere utilizzata anche con i video come fatto nel sito de L’Attrape Reve
Infine uno sguardo a Seed Spot 2014 in cui le immagini e i video utilizzati come sfondo a tutto schermo sono ben integrati anche al tecnologia responsive che permette una perfetta visualizzazione dei contenuti anche su dispositivi di tipo mobile.
