Il brief che non c’era
Questo cliente è del cliente più impegnativo mai avuto: me stesso. Non un brief ma una domanda se dovessi dimostrare tutto quello che so fare in un unico progetto, come lo farei? La risposta più onesta era costruire qualcosa che si presentasse da solo. Non una raccolta di lavori passati con descrizioni ottimistiche. Un prodotto digitale reale, progettato con lo stesso metodo che applico ai progetti dei clienti, visibile e verificabile da chiunque. Il portfolio è il case study. Il case study è il portfolio. Se funziona, non hai bisogno di credere a quello che scrivo qui. Lo stai già sperimentando.
Il problema da risolvere
I portfolio dei designer hanno un problema strutturale. Quasi tutti raccontano il lavoro degli altri. Mostrano cosa hanno costruito per qualcuno, ma raramente dimostrano come pensano. Ancora più raramente provano, con lo stesso sito che stai guardando, che sanno costruire davvero. Il secondo problema era il doppio target. Stesso sito, comportamenti opposti. La struttura doveva servire entrambi senza servire nessuno dei due a metà. Il terzo problema era il posizionamento. Design Director & Digital Strategist non è una categoria standard. Non esiste un template per questo. Dovevo costruire un sistema visivo e narrativo capace di comunicare seniority, competenza tecnica e visione strategica nello stesso momento, senza sembrare né un portfolio di schermate né un CV interattivo.
Il sistema visivo
Il dark mode non è una tendenza
Il fondo è #060A0E.
Non nero puro. È il colore di uno schermo acceso in una stanza buia alle tre di mattina. Chiunque abbia costruito qualcosa da zero riconosce quella tonalità. La scelta cromatica non è solo estetica. È semantica. In questo progetto, il sistema dark doveva comunicare precisione tecnica, profondità e controllo: lo stesso registro del posizionamento da Design Director. Il light mode è lo stesso sistema ribaltato. Stesse proporzioni, stessi ruoli, stessa gerarchia su fondo chiaro. Cambia la superficie. Non cambia il ragionamento.
Tre font. Non quattro.
I font sono tre perché hanno tre funzioni diverse. Syne per tutto ciò che afferma: numeri, headline, titoli. Geometrico ma imperfetto, porta peso senza occupare massa. DM Mono per tutto ciò che documenta: label, tag, metadata, codice. Il monospazio è il linguaggio dei sistemi tecnici. Ogni carattere ha lo stesso valore. DM Sans per tutto ciò che racconta: corpo testo, paragrafi, contenuti lunghi. Il suo compito è non distrarre. Aggiungere un quarto font avrebbe significato aggiungere rumore senza aggiungere significato.
Quattro colori con funzioni dichiarate
#0057FF è il segnale: connessione, azioni, flussi attivi. #00C896 appare solo su dati positivi verificati. Quando lo vedi, c’è un numero dietro. #7055FF classifica il contesto AI e tecnologia avanzata. Appare raramente, per questo conta. #060A0E è il fondo. L’assenza controllata su cui tutto acquista presenza. Nessun colore è decorativo.
Ognuno ha una regola d’uso.
Il logo come firma
l logo nasce dalla mia sigla e si anima come una firma. Non è un elemento decorativo. È un gesto di responsabilità: quando un progetto è fatto da me, deve poter portare il mio nome anche dopo il lancio. Firmare un lavoro significa questo. Non rivendicarlo. Risponderne. Ognuno ha una regola d’uso.
Le decisioni difficili
Locomotive Scroll vs performance
Locomotive Scroll aggiunge uno smooth scrolling più cinematografico, ma ha un costo: peso, complessità di sincronizzazione con GSAP e comportamento instabile su mobile se non viene gestito correttamente. La scelta era tra un’esperienza desktop premium e un comportamento mobile sicuro. La soluzione è stata attivare Locomotive solo sopra i 768px e mantenere lo scroll nativo sotto quella soglia. Non è una rinuncia. È una decisione di architettura.
Il grain animato
Il grain animato è un canvas HTML5 che genera noise a 12fps, con blend mode overlay e opacity 0.04. Quasi invisibile La tentazione era aumentarlo per renderlo più evidente. Ho scelto di non farlo..Il suo scopo non è essere visto. È aggiungere una qualità percepita, sottile, quasi inconscia. Appena diventa protagonista, distrae.
Le immagini AI
La foto hero è reale. È stata scattata appositamente. Le altre immagini sono generate con AI a partire da prompt costruiti intorno al mood del sistema visivo e poi elaborate in CSS con filter: grayscale(1), tornando al colore durante lo scroll. La decisione di dichiararlo non è trasparenza performativa. È coerenza. Chi usa l’AI nascondendola costruisce su fondamenta fragili. Chi la dichiara come strumento, controllato da un metodo preciso, è in una posizione diversa.
Il doppio target senza split page
La soluzione più semplice sarebbe stata creare due versioni del sito: una per recruiter, una per clienti.
Ho scelto di non farlo. Un sito diviso avrebbe comunicato insicurezza di posizionamento. La gerarchia delle sezioni, invece, gestisce i due target senza dichiararlo. Chi ha poco tempo trova subito ruolo, competenze, KPI e prove.
Chi vuole capire più a fondo può entrare nel metodo, nella storia e nei case study. La struttura serve entrambi senza spezzare l’identità del sito.
Come è stato costruito
WordPress custom da zero
Il sito è costruito in WordPress, con un tema custom scritto da zero. Nessun page builder.
Nessun template. Nessun framework di terze parti per il layout. Ogni sezione è un template PHP costruito attorno alla struttura del contenuto, non il contrario. La scelta di WordPress non è nostalgia. È pragmatica: il contenuto deve poter essere aggiornato senza dipendere da uno sviluppatore per ogni modifica.
GSAP + Locomotive Scroll
GSAP gestisce le timeline di entrata: text reveal, clip-path sulla foto hero, counter animati dei KPI e transizioni controllate. Locomotive Scroll gestisce smooth scroll e parallax nelle aree in cui ha senso usarli. La sincronizzazione tra i due richiede uno scrollerProxy preciso. Senza quello, le animazioni scattano nel posto sbagliato. È uno di quei dettagli tecnici che non si vedono quando funzionano.
Ma si notano subito quando mancano.
Il cursore custom
Il cursore custom è costruito con requestAnimationFrame. Il cerchio principale ha un leggero ritardo. Il dot centrale segue il mouse senza latenza. La differenza tra i due movimenti crea la sensazione di fluidità. Il cursore cambia comportamento ed etichetta in base all’elemento: link, card, foto, CTA. È un dettaglio piccolo, ma comunica una cosa precisa: ogni interazione è stata pensata.
L’AI nel processo
Questo sito non sarebbe lo stesso senza Claude, ChatGPT e Gemini. Non perché li abbia usati per generare testi da incollare, ma perché hanno cambiato la velocità e la profondità con cui ho potuto iterare su copy, struttura, codice e sistema visivo nello stesso momento. 40 giorni. Senza AI sarebbero stati probabilmente il doppio, con risultati inferiori su almeno due fronti. Il punto non è l’AI come acceleratore.
È l’AI come specchio critico. Ogni volta che un output non mi convinceva, capivo qualcosa di più preciso su quello che stavo cercando. L’AI non ha preso decisioni. Ha reso le mie decisioni più rapide da identificare. La distinzione conta: questo sito è AI-assisted, non AI-generated. Ogni scelta è difendibile. Ogni riga di codice è stata scritta o validata consapevolmente. Ogni parola è stata verificata contro il posizionamento e il sistema di valori definiti prima di iniziare.
Retrospettiva
Il cliente più difficile di questo progetto sono stato io.
Per un designer, il proprio portfolio non è mai finito. È sempre all’inizio. C’è sempre una sezione da riscrivere, un’animazione da rifinire, un case study che manca. Il rischio reale non era costruire qualcosa di sbagliato. Era non pubblicare mai niente perché niente era abbastanza. A un certo punto ho smesso di cercare la perfezione e ho iniziato a cercare la coerenza. Un sistema visivo che reggesse.
Un copy che non mentisse. Un’architettura che servisse davvero chi arriva qui. Quello che vedi adesso è il risultato di quella decisione. Non è finito. Non lo sarà mai del tutto. Ma è onesto. E per un portfolio, l’onestà vale più della perfezione.
Cosa rifarei diversament
Rifarei i mockup prima del codice
Ho costruito alcune sezioni direttamente in WordPress senza passare da Figma. È stato veloce, ma ha creato inconsistenze che ho risolto in fase tardiva. La prossima volta separerei meglio il momento della progettazione visiva dal momento dell’implementazione.
Gestirei il mobile dall’inizio
Locomotive Scroll su mobile ha richiesto più lavoro del previsto. Una strategia mobile-first definita prima dello sviluppo avrebbe ridotto il debito tecnico e reso alcune decisioni più semplici.
Completerei i case study prima del lancio
Il sito è online con una struttura già pronta ad accoglierli.
Stato attuale
Il sito è online, attivo e in evoluzione. La struttura, il sistema visivo, le animazioni e il tema custom sono già la dimostrazione del metodo che racconto nelle altre pagine. Non è finito.
Nessun sistema lo è davvero. Ma è esattamente quello che doveva essere: un prodotto che si presenta da solo.