EN #02 · Lab
Backdrop Factory
Nel nostro lavoro capita di continuo di dover creare uno sfondo, per le sezioni di un sito o per qualsiasi altra superficie. Abbiamo costruito il laboratorio per provarli tutti: colore, effetti, immagini, animazioni, combinati dal vivo.
Il problema
La ricerca dell’armonia
Un sito non si legge una sezione alla volta: si scorre. E scorrendo, quello che orienta il lettore è il contrasto tra una sezione e l’altra: un cambio di fondo che dice «qui inizia un altro discorso» prima ancora che lo dica un titolo. Non conta quanto sia ricco o quanto sia spoglio ogni singolo sfondo: un progetto può essere tutto intenso, tutto essenziale, o mescolare le due cose. Conta che il salto tra una sezione e l’altra sia quello giusto, e che il lettore le isoli senza sforzo mentre scorre.
Uno sfondo però è la somma di più fattori: un colore, un’immagine, un effetto, un movimento, e ogni combinazione ne cambia il carattere. Le varianti possibili sono praticamente infinite, e provarle nel codice, una alla volta, ricaricando ogni volta, è il modo più lento che esista. Serviva uno strumento per provarne molte in fretta, senza toccare il codice. Da questa esigenza è nata la Backdrop Factory.
Gli elementi
L’arte della combinazione
Il Backdrop Factory mette gli elementi di uno sfondo su un palco dal vivo e li lascia combinare uno sull’altro:
- il fondo, un colore pieno, un gradiente o una tinta scelta a mano, con una tonalità da scurire o schiarire;
- l’immagine, con opacità, finestra di trasparenza, punto focale, zoom e rotazione lenti;
- il pattern, uno o più effetti impilabili scelti da un catalogo di effetti e overlay, ognuno con i suoi parametri;
- il contenuto, un occhiello, un titolo, un testo e un bottone di prova, su scuro o su chiaro, per verificare che quello che c’è sotto non se li mangi.
Ogni elemento cambia gli altri, e ogni ritocco si vede subito. Quando la combinazione convince, si salva con un nome e finisce nella vetrina, dove si riordina, si duplica e si raggruppa in cartelle. Da lì si riapre, si modifica e si esporta.
In bottega
Nato per i nostri siti
Lo strumento è nato in casa, per un’esigenza concreta: i siti del gruppo condividono una stessa libreria di effetti, e serviva un posto dove comporli e un modo per portarli nei progetti senza riscriverli. La preview e l’export leggono la stessa sorgente: il CSS e il JavaScript che vedete sul palco sono esattamente quelli che vengono estratti, quindi il risultato incollato in un sito non può divergere da quello provato qui.
Quattro sezioni dei nostri siti con lo sfondo composto nel Factory: la home e i contatti di overall.it, i prezzi e i vantaggi della landing okTicket.
Cosa puoi fare
Quello che trovate qui
Questa è la stessa macchina, con un compromesso dichiarato: nella versione in casa le
combinazioni si salvano su file, qui si salvano nel vostro browser. Tutto quello che
componete, riordinate o eliminate resta nel localStorage del dispositivo e non lascia mai il
vostro computer. Non c’è registrazione e non c’è un nostro server dietro.
La libreria è precaricata con decine di immagini e con le combinazioni che usiamo davvero, così si parte da qualcosa di fatto invece che da un palco vuoto. Le immagini sono un insieme fisso, non si caricano le proprie. Tutto il resto funziona: le palette si creano, il catalogo degli effetti si riorganizza.
Su esportazione e condivisione, invece, nessun limite: sono le stesse funzioni della versione in casa. L’export produce HTML, CSS e, quando serve, JavaScript pronti da incollare, senza dipendenze da framework. In alternativa si scarica un file unico con tutto incorporato, comodo da passare a qualcuno, o uno zip con l’immagine inclusa che si apre con un doppio clic. La pagina di errore di questo sito è stata composta così.
