Case study · Sito agenzia · Brand, prodotto, web, motion
Spector
Un'agenzia creativa vende il modo in cui pensa. Il sito doveva avere un'opinione dalla prima riga, mostrare pochi lavori a tutto schermo e far capire il metodo, senza mai sembrare un portfolio qualunque.
- Progetto
- Spectorbrand concept
- Settore
- Agenzia creativabrand, prodotto, web, motion
- Tipo
- Sito multipaginahome, progetti, about, lab, contatti
- Cosa abbiamo fatto
- Design, sviluppo, strutturadal template al sistema
- Tecnologie
- Framer19 pagine, CMS per progetti e articoli
Il punto di partenza
Un'agenzia si vende con un'opinione
I siti delle agenzie si somigliano: griglia di lavori, elenco di servizi, tre loghi di premi. Chi sceglie un partner creativo però non compra una griglia: compra un punto di vista, e vuole capirlo prima della prima call.
Il sito doveva quindi aprirsi con una frase che prende posizione, mostrare pochi progetti come se fossero manifesti, raccontare il metodo in tre parole e, con il lab, far leggere come ragiona lo studio. In inglese, per un pubblico internazionale.
01
Prendere posizione
«Our brands just refuse to blend in» in rosso su nero. Chi non è d'accordo se ne va, e va bene così.
02
Pochi lavori, enormi
Sei progetti, ognuno a tutto schermo con una riga di descrizione. Nessuna griglia da scorrere in fretta.
03
Mostrare il metodo
Discovery, Strategy, Concept: tre parole con una scheda ciascuna. Poi i numeri e le collaborazioni lunghe, che valgono più dei premi.
Cosa abbiamo costruito
Nero, rosso, e il lavoro a tutto schermo
Home, progetti, about, lab e contatti. Ogni pagina ha lo stesso ritmo: un titolo con un'opinione, poi il lavoro.
01
Un titolo che si alza in tre dimensioni
Il ritratto in bianco e nero, il titolo rosso che entra ruotando come una pagina che si apre, e sopra un kicker in giapponese: un dettaglio che dice «studio internazionale» senza scriverlo.
A destra le quattro aree, brand, prodotto, web, motion, come un indice.
02
I progetti come manifesti
Tre immagini grandi in home, sei nella pagina dei progetti, ognuna a tutto schermo con titolo, cliente e una riga. Si scorre come un carosello, non come un archivio.
Ogni progetto ha la sua scheda con settore, ruolo, consegne e tempi, prima ancora delle immagini.
03
I servizi come un accordion con l'immagine
«We build brands. Then we give them somewhere to live.» Quattro aree numerate, .01 .02 .03 .04: si apre quella che ti interessa e cambia l'immagine accanto, con l'elenco delle cose che comprende.
Un modo per elencare tredici servizi senza una lista di tredici righe.
04
Numeri con la barra, non solo la cifra
Brand partner, retention, settori, collaborazioni di lungo periodo: ogni numero conta fino al valore e ha una barra rossa che si riempie. Sopra, i premi; sotto, lo showreel con il tasto play.
I premi dicono «ci hanno notati»; la retention dice «ci hanno tenuti». La seconda pesa di più.
05
Il lab: come pensa lo studio
Una sezione editoriale con cinque articoli sul mestiere: perché i brand system crollano dopo il lancio, il costo di spiegare troppo, interfacce che guidano invece di farsi operare.
Chi legge un articolo capisce come ragiona lo studio prima di scrivergli. È il pezzo che trasforma un portfolio in un'agenzia.
Da telefono il ritratto resta a tutto schermo con il titolo rosso in basso, i progetti si impilano e l'accordion dei servizi mette l'immagine tra le voci.
Come è fatto
Sotto il cofano: prospettiva, maschere e contatori
Sette effetti di Framer, uno alla volta. Niente WebGL: trasformazioni 3D, maschere e stati.
- Framer
- Framer CMS
- Trasformazioni 3D
- Cursore personalizzato
- Maschere
- Contatori
- Carosello
- mix-blend-mode
Our brandsjust refuseto blend in
PARTICIPATEINNOVATEORCHESTRATERESONATECAPTIVATEELEVATE
rotateX / rotateY dal puntatore · translateZ sui livelli
La hero che si inclina con il mouse
Cosa vedi. Muovi il mouse sull'apertura e tutto il blocco, ritratto e titolo, si inclina verso il puntatore come una lastra. Accanto al cursore una parola cambia a ogni movimento: Participate, Innovate, Orchestrate, Resonate, Captivate, Elevate.
Come è fatto. Il blocco sta in un contenitore con perspective; la posizione del puntatore, da meno uno a uno sui due assi, diventa due rotazioni di pochi gradi, rotateX e rotateY, con una molla che le ammorbidisce. Titolo e dettagli sono spinti in avanti con translateZ, così si muovono più della foto. Il cursore nativo è nascosto e un elemento lo segue con una parola presa a turno da una lista.
デザインスタジオ · Y2K26
Our brandsjust refuseto blend in
translateY(70px) scale(.7) rotateX(-82deg) → none
Il titolo che si alza in tre dimensioni
Cosa vedi. Le righe del titolo entrano una dopo l'altra come pagine che si aprono verso di te, poi si fermano piatte.
Come è fatto. Ogni riga parte spostata in basso, rimpicciolita al 70% e ruotata di 82 gradi sull'asse orizzontale, dentro un contenitore con perspective. Un'animazione a molla la porta a zero. Le righe partono con 160 millisecondi di distanza.
We build brands.Then we give themsomewhere to live
overflow: hidden · una riga alla volta
Le righe che escono dalla maschera
Cosa vedi. I titoli delle sezioni non compaiono: salgono da sotto una linea invisibile, riga per riga.
Come è fatto. Ogni riga sta in un contenitore con overflow: hidden alto quanto lei. Il testo parte spostato in basso del 110% e sale a zero: finché è fuori, il contenitore lo taglia. Nessuna dissolvenza, solo il taglio.
contatore + barra · role=progressbar
I numeri che contano fino al valore
Cosa vedi. 45+, 94%, 24, 78%: le cifre salgono da zero mentre una barra rossa si riempie sotto ognuna.
Come è fatto. Il contatore è un componente che interpola da zero al valore in un secondo e mezzo; la barra è un elemento con ruolo progressbar, così anche chi usa un lettore di schermo sente la percentuale. Partono quando la sezione entra in vista.
accordion · l’immagine cambia con la voce
L'accordion che cambia l'immagine
Cosa vedi. Clicchi un'area di servizio: la voce si apre con il suo elenco e l'immagine accanto cambia.
Come è fatto. Ogni voce è un componente con due varianti, chiusa e aperta, e l'immagine è collegata alla voce attiva. Aprirne una chiude le altre. Le immagini sono già in pagina e si scambiano con una dissolvenza: nessun caricamento al clic.
SPECTOR
mix-blend-mode: difference
Il testo che si inverte sopra la foto
Cosa vedi. Il logo e i dettagli sopra il ritratto restano leggibili sia sulle parti chiare sia su quelle scure: dove la foto è chiara diventano scuri, e viceversa.
Come è fatto. mix-blend-mode: difference su testo bianco: il colore risultante è la differenza tra il bianco e quello che c'è sotto. Sul nero resta bianco, sul bianco diventa nero. Nessuna ombra, nessun contorno.
I progetti a tutto schermo
Cosa vedi. Nella pagina dei progetti ogni lavoro occupa lo schermo intero. Si scorre di lato, con i puntini che segnano dove sei.
Come è fatto. Un carosello con le slide a larghezza piena e lo scatto sul bordo; i titoli sono centrati con l'immagine dietro, scurita da un velo. I progetti vengono dal CMS: aggiungerne uno aggiunge una slide.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni studio
Agenzia, studio, freelance senior: se vendi il modo in cui pensi, queste decisioni contano più della griglia dei lavori.
01
Apri con un'opinione
«Our brands just refuse to blend in» scarta i clienti sbagliati e conquista quelli giusti. Un titolo neutro non fa nessuna delle due cose.
02
Pochi lavori, enormi
Sei progetti a tutto schermo si ricordano; trenta anteprime in griglia no. La selezione è già un messaggio.
03
Il numero che pesa è la retention
I premi dicono che ti hanno notato. Il 94% di clienti che restano dice che ti hanno tenuto. Mostra il secondo con la stessa evidenza del primo.
04
Un processo in tre parole
Discovery, Strategy, Concept. Chi ti valuta vuole sapere cosa succede nelle prime settimane, non leggere un manifesto.
05
Scrivi quello che pensi
Cinque articoli sul mestiere valgono più di una pagina «chi siamo». Chi li legge arriva alla call già convinto del metodo.
Il prossimo potrebbe essere il tuo
Anche il tuo studio ha un'opinione?
Agenzie, studi, professionisti che vendono un modo di pensare: se il tuo sito mostra i lavori ma non il punto di vista, ripartiamo da lì. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti