Case study · Sito web · Agenzia di digital marketing
Loomia
Un'agenzia di digital marketing deve fare due cose con il suo sito: dimostrare gusto e far prenotare una call. Loomia è costruito per questo: un'apertura scura con una sfera di luce, un manifesto che si accende mentre scorri, i servizi, il metodo, le voci dei clienti, il team, e la call che si fissa senza uscire dalla pagina.
- Progetto
- Loomiasito reale, online
- Settore
- Agenzia di digital marketingbrand, social, adv, foto e video, Milano
- Tipo
- Sito web in una paginaservizi, metodo, testimonianze, team, FAQ, contatti
- Cosa abbiamo fatto
- Design, sviluppo, motionsistema visivo scuro con lime
- Tecnologie
- FramerCalendly in pagina, Cookiebot
Il punto di partenza
Un sito che deve far prenotare una call
I siti delle agenzie parlano molto di sé e chiedono poco. Volevamo il contrario: un'apertura che dica il tono in tre secondi, un percorso corto, e alla fine una cosa sola da fare, prenotare mezz'ora. Il gusto si dimostra con la luce e il movimento, non con gli aggettivi.
La pagina segue un ordine semplice: la promessa, il manifesto che si accende, i numeri e i servizi in card di vetro, i brand con cui abbiamo lavorato, il metodo in tre passi, le voci dei clienti, il team, la call con il calendario dentro la pagina, le domande frequenti e il modulo.
01
Il tono in tre secondi
Nero, stelle, una sfera di luce che gira dietro il titolo. Chi arriva capisce che qui si fa design.
02
Un manifesto che si legge
Perché omologarsi quando puoi differenziarti: le parole si accendono una alla volta mentre scorri, e le si legge tutte.
03
Una sola azione
Prenota una call: il calendario è dentro la pagina, si sceglie giorno e ora e l'invito arriva da solo.
Cosa abbiamo costruito
Dalla luce alla call
Una pagina lunga, nove scene. Ognuna con la sua luce e il suo movimento, tutte verso la call.
01
La sfera di luce
Fondo nero con le stelle, e al centro una sfera sfocata verde acqua e pesca che gira piano dietro il titolo. «Diamo voce al tuo brand», con brand in lime, e un solo tasto.
È il colore del sito: nero, lime, e la luce.
02
Il manifesto che si accende
Sei righe a caratteri grandi con le parole chiave in lime e due emoji. Le parole sono spente e sfocate, e si accendono una dopo l'altra mentre scorri: si legge al ritmo dello scroll.
Sotto, i quattro numeri nei cerchi: anni, settori, ore di brainstorming, creatività.
03
I servizi e i brand
Tre card di vetro su una luce che passa dietro: graphic design, digital marketing, foto e video. Sopra, quattro pillole: supporto dedicato, result driven, focus sul cliente, collaborazioni durature.
Poi i loghi dei brand con cui abbiamo collaborato, in un nastro che sfuma ai bordi.
04
Il metodo in tre passi
A, C, O: analizziamo il mercato e il target, creiamo contenuti e strategie che parlano al target, ottimizziamo dati alla mano. A sinistra la sfera con «il tuo obiettivo» al centro.
Le voci dei clienti seguono: sette testimonianze in card, con nome, ruolo e azienda.
05
Il team e la call
Tre memoji, tre ruoli, tre link. Poi la chiamata: hai una storia da raccontare? Il calendario è dentro la pagina: scegli il giorno e l'ora di una call da trenta minuti e l'invito arriva da solo.
Chiudono le domande frequenti e il modulo per chi preferisce scrivere.
Da telefono la sfera resta dietro il titolo e il calendario si apre a tutto schermo: la call si prenota anche con il pollice.
Come è fatto
Sotto il cofano: la luce e la call
Sei effetti di Framer, uno alla volta. Dalla sfera al calendario.
- Framer
- conic-gradient
- backdrop-filter
- mask-image
- Varianti
- Calendly
rotazione 12 s · scala 1 → 1,12
seconda sfera: radial, va e viene
due sfere sfocate che girano dietro il titolo
La sfera di luce dietro il titolo
Cosa vedi. Dietro il titolo una sfera di colore sfocata, verde acqua, lime e pesca, che gira piano e respira. Non è un video.
Come è fatto. Due cerchi sovrapposti. Il primo ha un gradiente conico con tre colori e ruota su se stesso in dodici secondi, crescendo e tornando; il secondo ha un gradiente radiale e va avanti e indietro. Entrambi con una sfocatura forte, così i colori si fondono. Sopra, un livello di rumore e le stelle.
Perchè omologarsi quando puoi differenziarti? 🚀 il tuo brand è unico ✨ così come la tua storia Noi la raccontiamo.
ogni parola: sfocata e al 15% → nitida, in ordine, legata allo scroll
Il manifesto che si accende parola per parola
Cosa vedi. Le parole del manifesto sono spente e sfocate. Scorrendo si accendono in ordine, nitide, e quelle chiave in lime.
Come è fatto. Il testo è diviso in parole; ognuna parte al 15% di opacità, sfocata di dieci pixel e spostata in basso, e torna a posto in ordine con un piccolo ritardo. Il progresso è legato allo scroll: se torni indietro, le parole si spengono di nuovo.
Le card di vetro con la luce dietro
Cosa vedi. Le card dei servizi e delle voci sono lastre di vetro scuro: la luce che passa dietro si vede sfocata attraverso.
Come è fatto. Fondo bianco al 4%, bordo bianco al 10% e backdrop-filter con sfocatura: tutto ciò che sta dietro viene sfocato dentro la card. Sopra, un livello di rumore in miscela per dare grana. In pagina ce ne sono più di cento.
la maschera sfuma i bordi: i loghi nascono e svaniscono
I loghi che nascono e svaniscono ai bordi
Cosa vedi. I brand scorrono in un nastro senza fine. Non entrano di colpo: compaiono dal nulla a sinistra e svaniscono a destra.
Come è fatto. Il nastro è ripetuto due volte e trasla del 50% in loop. Sopra c'è una maschera a gradiente: trasparente ai bordi, piena tra il 17,5% e l'82,5%. I loghi passano sotto la maschera e sfumano da soli.
la freccia ruota, la risposta si apre, le altre scendono
Le domande con la freccia che gira
Cosa vedi. Ogni domanda ha un quadratino lime con la freccia. Cliccando, la freccia si capovolge e la risposta si apre spingendo giù le altre.
Come è fatto. Due varianti per domanda: chiusa e aperta. La freccia ruota di 180 gradi, l'altezza della risposta passa da zero al suo valore con una transizione, e le domande sotto seguono. Una sola aperta alla volta.
Calendly dentro la pagina: si prenota senza scrivere
La call prenotata dentro la pagina
Cosa vedi. Scegli un giorno, scegli un'ora, confermi. L'invito arriva nel calendario. Senza scrivere una mail.
Come è fatto. Il calendario è un componente Calendly incorporato nella pagina con l'evento da trenta minuti. Legge le disponibilità dal calendario dell'agenzia, propone gli orari liberi nel fuso di chi prenota e crea l'evento per entrambi. Il modulo resta per chi preferisce scrivere.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni agenzia o consulente
Agenzie, freelance, consulenti: se vendi tempo e competenza, il sito deve far prenotare, non far leggere.
01
Il tono si fa con la luce
Nero, un colore e una sfera che gira valgono più di dieci foto d'archivio. E pesano niente.
02
Fai leggere il manifesto
Un testo che si accende al ritmo dello scroll si legge tutto. Uno stampato si salta.
03
Metti il calendario in pagina
Chi deve scriverti una mail per fissare una call spesso non lo fa. Chi vede gli orari liberi clicca.
04
Un metodo in tre parole
Analizziamo, creiamo, ottimizziamo. Se il cliente lo ricorda, lo racconta ad altri.
05
Le voci prima del team
Sette clienti che parlano bene di te contano più delle tue tre memoji. Ma le memoji fanno simpatia.
Il prossimo potrebbe essere il tuo
Vuoi un sito che porti alla call?
Agenzie, freelance, consulenti: se il tuo sito racconta ma non fa prenotare, ripartiamo dall'azione. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti