Case study · Sito web · Agenzia creativa
Fuel X
Un'agenzia creativa vende ordine e carattere insieme. Qui il sito è costruito come un impaginato svizzero: griglia rigorosa, numeri grandi, foto che parlano, e pochi movimenti precisi che fanno sembrare tutto in controllo.
- Progetto
- Fuel Xbrand concept
- Settore
- Agenzia creativaart direction, fotografia, strategia
- Tipo
- Sito webhome, portfolio, about, contatti, articoli
- Cosa abbiamo fatto
- Design, sviluppo, sistema tipograficodal template al sistema
- Tecnologie
- FramerLenis, card impilate, nastro, diagonali
Il punto di partenza
Un'agenzia che deve sembrare precisa prima ancora di mostrare i lavori
Chi cerca un'agenzia creativa guarda due cose insieme: se ha gusto e se è affidabile. Un sito pieno di effetti risponde solo alla prima. Qui abbiamo scelto la strada opposta: un impaginato quasi da rivista, con la griglia a vista, i numeri di sezione tra parentesi, le crocette agli angoli e lo spazio bianco che ordina tutto.
I movimenti ci sono, ma pochi e precisi: le card del portfolio che si impilano, un nastro di testo che scorre dietro un ritratto, i tagli diagonali tra una sezione e l'altra, uno scorrimento morbido che rende tutto più pesante e più caro.
01
Ordine che si vede
Numeri di sezione, righe, parentesi, crocette: chi arriva capisce che qui le cose sono sotto controllo.
02
Lavori al centro
Portfolio, archivio e servizi occupano metà della pagina. Le foto grandi fanno il lavoro che il testo non deve fare.
03
Un prezzo chiaro
Tre piani con il canone mensile in evidenza. Chi arriva sa quanto costa prima di scrivere.
Cosa abbiamo costruito
Un impaginato svizzero che scorre
Nove sezioni numerate, dalla presentazione alle domande frequenti. Ognuna con la sua etichetta tra parentesi e il suo anno.
01
L'apertura che promette una cosa sola
Un ritratto a tutto schermo, virato rosso e blu. In alto a sinistra la promessa: scegli un piano, manda una richiesta, il lavoro parte entro 24 ore. In basso i tre servizi e il logotipo cromato.
Sotto, un righello con l'anno e il minuto: un dettaglio da impaginato che dà il tono.
02
Il manifesto e i risultati
«(01) About Us»: il manifesto a caratteri grandi, poi tre paragrafi etichettati Pre, Post e Results, con i numeri dei clienti e il tasso di successo.
Le etichette tra parentesi e i numeri di sezione tornano identici in tutta la pagina: è il sistema che fa sembrare tutto voluto.
03
Il portfolio che si impila
«FX-25»: quattro progetti, ognuno una card grande con la foto. Scorrendo, ogni card resta ferma in cima mentre la successiva sale e le si appoggia sopra, un po' più in basso.
Alla fine hai una pila di fogli, come sul tavolo di uno studio. A destra, «See all (07)».
04
I servizi numerati e i tre piani
I servizi sono tre righe con il numero enorme, una foto e il titolo: Art Direction, Photography, Strategy. La sezione nera finisce con un taglio in diagonale che apre sui prezzi.
Tre piani con il canone mensile, il terzo nero per farlo scegliere. Sotto, la recensione con le frecce e i numeri di soddisfazione.
05
L'archivio e la chiamata
L'archivio è una lista con anno, nome e le miniature: sei lavori in una schermata. Poi la chiamata: una foto notturna, un ritratto al centro e dietro un nastro che scorre: «We Are Faster, Better And Cheaper».
Chiudono i numeri grandi, gli articoli, le domande frequenti con lo showreel e il piede con la mail.
Da telefono la griglia si chiude in una colonna ma tiene numeri, parentesi e righe: il sistema resta riconoscibile.
Come è fatto
Sotto il cofano: pile, nastri e diagonali
Sei effetti di Framer, uno alla volta. Pochi movimenti, tutti al servizio dell'impaginato.
- Framer
- Lenis
- Card impilate
- Nastro
- skewY
- Varianti
Scorri · le card si impilano
Le card che si impilano scorrendo
Cosa vedi. Nel portfolio ogni card resta ferma in cima mentre la successiva le sale sopra, un po' più in basso. Alla fine hai una pila.
Come è fatto. Ogni card è position: sticky con un top diverso: la prima a zero, la seconda a 50 pixel, la terza a 90, la quarta a 130. Il contenitore è alto quanto tutte le card insieme, così scorrendo ognuna si blocca al suo punto e le altre le passano sopra.
nastro infinito · mask ai bordi · ritratto sopra
Il nastro di testo dietro il ritratto
Cosa vedi. Nella chiamata finale una frase enorme scorre da destra a sinistra senza fine, e in mezzo c'è un ritratto fermo che la copre.
Come è fatto. Il testo è ripetuto due volte in una riga e trasla del 50% in loop: quando la prima copia esce, la seconda è esattamente al suo posto. Ai bordi una mask-image con gradiente lo fa sfumare. Il ritratto sta in un livello sopra, con la sua ombra.
skewY(-6deg) · contenuto contro-inclinato
Le sezioni tagliate in diagonale
Cosa vedi. Tra i servizi neri e i prezzi bianchi il confine non è dritto: è una diagonale che sale verso destra.
Come è fatto. La sezione nera è inclinata con skewY(-6deg) e origine a sinistra. Il contenuto dentro è inclinato al contrario della stessa misura, così testi e foto restano dritti e solo lo sfondo taglia.
stesso scatto della rotella · due risposte
Lo scorrimento morbido con Lenis
Cosa vedi. Quando muovi la rotella la pagina non scatta: parte e frena con inerzia, come se avesse peso.
Come è fatto. Lenis intercetta la rotella e il tocco e sposta la pagina con un'interpolazione a ogni frame, invece del salto nativo. Un'impostazione di durata e di curva decide quanto è pesante. Le animazioni di Framer leggono la posizione di Lenis, non quella del browser.
entrano una alla volta, dal basso
I servizi che entrano uno alla volta
Cosa vedi. Le tre righe dei servizi, con il numero enorme e la foto, non ci sono finché non arrivi: entrano dal basso una dopo l'altra.
Come è fatto. Ogni riga è un componente con l'animazione di comparsa di Framer: parte trasparente e spostata in basso, e quando entra nello schermo torna a posto. Il ritardo cresce di un terzo di secondo a riga, per l'effetto a scaletta.
il più ruota di 45° e diventa una x
Le domande che si aprono con il più
Cosa vedi. Ogni domanda ha un più a destra. Cliccando, la risposta si apre e il più ruota e diventa una x.
Come è fatto. Una variante aperta e una chiusa per ogni domanda. L'altezza della risposta va da zero al suo valore naturale con una transizione, e l'icona ruota di 45 gradi nello stesso tempo. Le domande sotto scendono di conseguenza.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni agenzia o studio
Agenzie, studi, fotografi: se vendi precisione, il sito deve dimostrarla prima di raccontarla.
01
Un sistema, non una grafica
Numeri di sezione, parentesi, righe, crocette: quando un dettaglio torna uguale ovunque, tutto sembra deciso. Un solo effetto non fa lo stesso lavoro.
02
Muovi poco, ma con peso
Uno scorrimento morbido e tre effetti ben fatti valgono più di dieci animazioni. Il peso comunica prezzo.
03
Le foto grandi, il testo corto
Se hai lavori da mostrare, dagli metà della pagina. Il manifesto sta in tre righe.
04
Metti il prezzo
Tre piani con il canone visibile filtrano chi non è il tuo cliente e rassicurano chi lo è.
05
Chiudi con una frase sola
Un nastro che ripete la promessa e un tasto. Niente riassunti: chi è arrivato in fondo ha già deciso.
Il prossimo potrebbe essere il tuo
Vuoi un sito che sembri sotto controllo?
Agenzie, studi, fotografi, consulenti: se il tuo sito mostra i lavori ma non la precisione, ripartiamo dal sistema. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti