Case study · Sito web · Studio digitale
Fabrica
Uno studio che fa siti, brand e marketing deve dimostrare che sa vendere, non solo disegnare. Qui la pagina è costruita come un percorso di vendita: prova, servizi, numeri, prezzo, squadra, domande. E apre con un'entrata che si ricorda.
- Progetto
- Fabrica Studiobrand concept
- Settore
- Studio digitaleweb, brand, social, SEO
- Tipo
- Sito webhome, studio, progetti, blog, contatti
- Cosa abbiamo fatto
- Design, sviluppo, struttura di venditadal template al sistema
- Tecnologie
- Framervideo, intro, parole a scalare, prezzo dinamico
Il punto di partenza
Un sito che deve convincere, non solo piacere
I siti degli studi digitali cadono spesso in due trappole: o sono una vetrina di lavori senza un'offerta, o sono una pagina di vendita senza gusto. Fabrica doveva tenere insieme le due cose: un'entrata che colpisce e poi una struttura che accompagna fino al prezzo.
La pagina segue l'ordine di una trattativa: prima i clienti e i progetti, poi perché noi con i numeri, i servizi aperti uno per uno, come lavoriamo con lo showreel, le recensioni, un case study con i risultati, il prezzo con le opzioni, la squadra, le domande, il modulo.
01
Entrare con carattere
Le lettere sparse sul nero, il sipario che si alza, l'inchiostro dietro il titolo: dieci secondi che si ricordano.
02
Portare al prezzo
Ogni sezione risponde a un'obiezione, e alla fine c'è un prezzo chiaro con un interruttore per aggiungere il marketing.
03
Mostrare risultati, non promesse
Numeri, percentuali, un case study con il grafico: la prova viene prima della parola.
Cosa abbiamo costruito
Un percorso di vendita in una pagina
Tredici sezioni, nell'ordine in cui un cliente decide. Ognuna ha la sua etichetta, la sua parentesi e il suo anno.
01
L'intro con le lettere sparse
La pagina non parte con la home: parte con il nero. La scritta «fabrica®» compare una lettera alla volta, ogni volta in un punto diverso, come se qualcuno la stesse componendo. Poi il sipario si alza e sotto c'è il sito.
Dura pochi secondi ed è la cosa che chi visita racconta agli altri.
02
L'inchiostro dietro il titolo
Il titolo enorme sta su un video di inchiostro che si espande nell'acqua, in loop e muto. A destra i quattro servizi, in basso la promessa: niente siti generici, niente promesse vuote. E la card della responsabile con il tasto per parlarle.
Un video di sfondo ben scelto vale più di qualsiasi animazione.
03
I progetti che si accendono
Dopo la fila dei clienti, «Projects.»: sei lavori in due colonne, ognuno con la foto grande, il nome e l'anno. Al passaggio del mouse la foto si scurisce di poco, compare il logo del cliente e i tre pallini in alto si accendono.
Sotto, «Why choose us» con i numeri: progetti completati, soddisfazione.
04
I servizi aperti uno per uno
«Services. (4)» su nero: quattro voci numerate, una aperta alla volta con la descrizione e le categorie come etichette. Sotto, «How we launch» con i quattro passaggi e lo showreel.
Poi «Experiences.»: il voto 4.9, le recensioni e i numeri grandi.
05
Il case study e il prezzo con l'interruttore
Prima del prezzo, la prova: un case study con velocità di pagina, tasso di conversione, il punteggio 100 e il grafico delle visite che cresce. Poi «Pricing.»: un prezzo a progetto o mensile, le voci incluse, i tempi, e un interruttore che aggiunge il pacchetto marketing e aggiorna il totale.
Chiudono la squadra con le foto, le domande frequenti, il blog e il modulo.
Da telefono il percorso resta identico: stesse tredici sezioni, stesso ordine, una colonna sola.
Come è fatto
Sotto il cofano: lettere, inchiostro e un interruttore
Sei effetti di Framer, uno alla volta. Dall'entrata al prezzo.
- Framer
- Video di sfondo
- Intro
- Parole a scalare
- Varianti
- Prezzo dinamico
lettere sparse · poi il sipario si alza
L'intro con le lettere sparse e il sipario
Cosa vedi. Schermo nero. La scritta compare lettera per lettera, ogni volta in un punto diverso. Poi un sipario si alza e scopre la home.
Come è fatto. Un livello nero fisso sopra tutto con un componente che cambia variante ogni frazione di secondo: ogni variante ha la scritta più lunga di una lettera e in una posizione diversa. All'ultima variante il livello si chiude verso l'alto con scaleY e origine in cima, e viene tolto dalla pagina.
Social Media Marketing
Web Design and Development
SEO Optimization
Lauren Thompson
video in loop, muto · velo nero al 15%
Il video di inchiostro dietro il titolo
Cosa vedi. Dietro il titolo una nuvola di inchiostro nero che si espande piano, senza fine.
Come è fatto. Un video muto in loop con object-fit: cover, che parte solo quando il poster è già visibile. Sopra, un velo nero al 15% per far leggere il testo bianco, poi il titolo, la lista e la card in livelli separati.
hover: velo, logo e pallini
La card del progetto al passaggio del mouse
Cosa vedi. Sopra la foto compare un velo scuro leggero e il logo del cliente. I tre pallini in alto a destra si colorano.
Come è fatto. Due varianti della card: nella seconda un livello nero passa da 0 a 15% di opacità, il logo sale di qualche pixel e diventa visibile, e i tre cerchi cambiano colore. Tutto in trecento millisecondi con una curva morbida.
Our approach is simple: we focus on functionality, speed, and clarity, ensuring that every project serves a clear purpose without unnecessary complexity.
una parola ogni 120 ms · quando entra nello schermo
Il manifesto una parola alla volta
Cosa vedi. «Our approach is simple»: le parole compaiono una dopo l'altra, dal basso, mentre scorri fino a lì.
Come è fatto. Ogni parola è un elemento a sé, trasparente e spostato di dieci pixel in basso. Quando il paragrafo entra nello schermo, ognuna torna a posto con un ritardo di 120 millisecondi rispetto alla precedente. Le prime parole sono grigie, le altre nere: la frase si legge in due tempi.
l'interruttore somma il pacchetto al prezzo
Il prezzo che si aggiorna con l'interruttore
Cosa vedi. Due schede, a progetto o mensile. Sotto, un interruttore: se lo accendi il pacchetto marketing si somma al prezzo.
Come è fatto. Il prezzo è un componente con quattro varianti: progetto o mensile, con o senza pacchetto. Le schede e l'interruttore cambiano variante, e il numero passa da una all'altra con una dissolvenza. Il totale non è calcolato: è scritto in ogni variante, così è sempre sotto controllo.
barre e punteggio partono quando li vedi
Il grafico e il punteggio che partono quando li vedi
Cosa vedi. Nel case study le barre delle visite crescono una dopo l'altra e il cerchio del punteggio si riempie fino a 100.
Come è fatto. Le barre sono rettangoli con scaleY da 0 a 1 e origine in basso, ritardate di 150 millisecondi l'una dall'altra. Il cerchio è un gradiente conico che cresce di percentuale, e il numero al centro scatta a soglie fino a 100. Tutto parte quando la sezione entra nello schermo.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni studio o agenzia
Studi, agenzie, consulenti: se il tuo sito deve vendere un servizio, questa struttura vale più di qualsiasi effetto.
01
Entra con una cosa sola
Un'intro di pochi secondi, ben fatta, si ricorda. Dieci animazioni no.
02
Segui l'ordine della trattativa
Prova, perché noi, servizi, come lavoriamo, recensioni, risultati, prezzo, squadra, domande. Chi arriva in fondo ha già risposto alle sue obiezioni.
03
Metti il prezzo, e rendilo componibile
Un prezzo a progetto o mensile e un interruttore per l'aggiunta. Chi sceglie da solo si sente in controllo.
04
I numeri devono muoversi
Barre che crescono e un punteggio che sale sono più credibili di un numero stampato.
05
Un video di sfondo, se è giusto
Inchiostro, muto, in loop, con un velo sopra: fa il tono dell'intera pagina senza distrarre.
Il prossimo potrebbe essere il tuo
Vuoi un sito che porti al prezzo?
Studi, agenzie, consulenti, freelance: se il tuo sito piace ma non vende, ripartiamo dalla struttura. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti