Case study · Portfolio · Designer freelance
Alexander Hantel
Un designer freelance che lavora a canone mensile o a progetto. Il sito doveva fare quello che un portfolio di solito non fa: trasformare chi guarda i lavori in chi prenota una chiamata.
- Progetto
- Alexander Hantel
- Settore
- Design freelancebrand, web, motion
- Tipo
- Portfoliocon listino e blog
- Cosa abbiamo fatto
- Design, sviluppo, CMSprogetti e articoli gestibili
- Tecnologie
- Framer · CMS
Il punto di partenza
Un portfolio che deve vendere, non solo mostrare
La maggior parte dei portfolio è una galleria: bei lavori, un indirizzo email in fondo. Chi guarda se ne va senza sapere quanto costa, come si lavora insieme, se c'è posto. E un freelance perde il contatto proprio nel momento in cui aveva convinto.
Qui il modello è chiaro: un abbonamento mensile con richieste illimitate, oppure il progetto singolo. Il sito doveva rendere chiaro anche quello, senza perdere il tono personale di chi lavora da solo e ci mette la faccia.
01
Fiducia
In cinque secondi: chi è, cosa fa, chi si è già fidato. Prima ancora di mostrare un lavoro.
02
Prezzo chiaro
Due formule, ognuna con cosa include. Niente «contattami per un preventivo» che fa scappare.
03
Una chiamata
L'azione chiesta è una sola, e si ripete lungo tutta la pagina: prenota una chiamata gratuita.
Cosa abbiamo costruito
Una pagina ordinata come una trattativa
Prova, lavori, persona, prezzo, testimonianze, domande, chiamata. Lo stesso ordine in cui un cliente si convince dal vivo.
01
Prima i risultati, poi i lavori
Il titolo non dice «benvenuto nel mio portfolio»: dice cosa ottiene il cliente. Sotto, il tasto per prenotare una chiamata, e subito la prova: i volti dei clienti, il numero, i loghi.
In alto un segnale piccolo ma decisivo: da quando è disponibile. Chi vuole lavorare con lui sa che deve muoversi.
02
I lavori come schede, non come galleria
Quattro progetti, non quaranta. Ognuno con il nome, il tipo di lavoro e un collegamento alla scheda. Chi vuole vedere tutto ha il suo tasto, chi vuole capire in fretta ha già capito.
I progetti vivono in un CMS: aggiungerne uno è compilare una scheda, non chiamare chi ha fatto il sito.
03
La faccia, la storia, la firma
Un freelance vende fiducia prima che design. La foto grande, tre paragrafi in prima persona, dove ha lavorato e per quanto, e una firma a mano che chiude come una lettera.
È la sezione che un'agenzia non può copiare. Per questo sta a metà pagina, subito prima del prezzo.
04
Il listino in chiaro
Come funziona in tre passi: ti abboni, chiedi, ricevi. Poi le due formule, con cifra, cosa include e cosa no. «Metti in pausa o disdici quando vuoi» toglie l'ultima paura.
Mostrare il prezzo filtra chi non è in target e fa prenotare chi lo è: la chiamata parte già da un sì di massima.
05
Prove e risposte, prima della chiamata
Sei testimonianze con nome e ruolo, poi cinque domande: quanto ci vuole, lavori con il mio brand, cosa succede dopo la consegna, chi possiede i file.
Accanto alle domande, il riquadro «Non sei ancora sicuro? Prenota una chiamata gratuita». Il dubbio e la risposta stanno nella stessa schermata.
Da telefono i due tasti, Contatto e Prenota una chiamata, restano sempre a portata di pollice, in fondo allo schermo.
Come è fatto
Sotto il cofano: molle, varianti e un CMS
Niente WebGL qui: cinque effetti del sistema di animazione di Framer, uno alla volta.
- Framer
- Framer CMS
- Motion
- Web Animations API
- Varianti di componente
Le animazioni d'ingresso partono prima di JavaScript
Cosa vedi. Titoli, schede e bottoni entrano con un movimento a molla appena la pagina si apre.
Come è fatto. Framer scrive le animazioni nell'HTML e uno script di 11 KB le avvia con la Web Animations API prima che l'app si carichi. La molla è precalcolata in una curva linear(). Le icone social entrano a un decimo di secondo l'una dall'altra.
Ticker
mask-image: linear-gradient(…)Il nastro dei loghi
Cosa vedi. I loghi dei clienti scorrono in continuo e sfumano ai bordi, senza inizio né fine.
Come è fatto. Un componente Ticker duplica la fila e la fa scorrere in loop. Le sfumature non sono immagini: una mask-image a gradiente rende trasparente il contenuto verso i bordi.
Da due settimane a due mesi, dipende dal progetto.
Ogni cosa risponde al mouse
Cosa vedi. Le schede si sollevano, i loghi dello stack mostrano il nome, le FAQ si aprono con un movimento morbido.
Come è fatto. Ogni elemento è un componente con varianti (Default e Hover, Open e Closed) e Framer passa dall'una all'altra con una transizione a molla. In pagina ci sono 176 stati hover.
Il riquadro della chiamata ti segue
Cosa vedi. Nelle FAQ, «Prenota una chiamata» resta fermo mentre scorri le risposte.
Come è fatto. Nessuno script: position: sticky con top: 88px, l'altezza della barra di navigazione. La cosa più semplice tiene la chiamata all'azione davanti agli occhi nel momento del dubbio.
CMS
select · where · limit
Progetti e articoli dal CMS
Cosa vedi. Quattro progetti in home, tutti nella pagina dedicata, un blog con le date. Schede tutte uguali.
Come è fatto. Due collezioni nel CMS di Framer. La home esegue una query (select, where, limit) alla pubblicazione e stampa le schede già pronte. Le pagine dei progetti nascono da un unico template.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni portfolio
Freelance, studio o azienda: se il sito mostra i lavori ma non porta contatti, di solito manca una di queste.
01
Di' subito cosa ottiene il cliente
«Design that delivers results» parla del cliente, non di te. Il titolo della tua home dovrebbe finire la frase «con me ottieni...».
02
Mostra il prezzo, o almeno la formula
Chi non trova il prezzo immagina il peggio e non scrive. Due opzioni con cosa includono bastano, anche senza la cifra.
03
Metti la faccia
Foto vera, storia breve in prima persona, firma. La fiducia si dà a una persona, non a un logo.
04
La prova sociale va vicino alla decisione
Le testimonianze accanto al listino e alle FAQ, non in fondo alla pagina dove nessuno arriva.
05
Una sola chiamata all'azione, ripetuta
«Prenota una chiamata» compare in alto, dopo il listino, dopo le domande e nel piede. Sempre la stessa azione, mai un'altra. Chi è pronto la trova, ovunque sia arrivato.
Il prossimo potrebbe essere il tuo
Vuoi un sito che porti chiamate, non solo complimenti?
Freelance, studio o azienda: se il tuo sito mostra i lavori ma non porta contatti, 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