Case study · Portfolio · Product designer
Creatie
Un portfolio di design deve dimostrare gusto prima ancora di mostrare i lavori. Qui la scelta è una metafora: il sito è una scrivania, con lo sfondo di un computer, i fogli appuntati e un dock in basso.
- Progetto
- Creatiebrand concept
- Settore
- Design freelanceweb, UI/UX, brand, illustrazione
- Tipo
- Portfolio in una paginacon progetti, servizi, recensioni, FAQ
- Cosa abbiamo fatto
- Design, sviluppo, illustrazionidal template al sistema
- Tecnologie
- Framerscroll interno, vetro, 3D trascinabile
Il punto di partenza
Un portfolio che si ricorda per una metafora
I portfolio dei designer si somigliano: griglia, hover, scheda. Per distinguersi non serve un effetto in più, serve un'idea che tenga insieme tutto. Qui l'idea è la scrivania: lo sfondo è il desktop di un computer con le colline, il contenuto sono fogli appuntati che scorrono sopra, e in basso c'è il dock.
La metafora dà le regole a ogni sezione: i numeri sono post-it, i progetti sono finestre con la graffetta, i servizi sono righe colorate, le recensioni sono foglietti, le domande sono etichette. Tutto sembra appoggiato, non impaginato.
01
Gusto in cinque secondi
Colline, nuvola, etichette che oscillano: chi arriva capisce il tono prima di leggere un progetto.
02
Una regola per tutto
La scrivania decide come sono fatti numeri, progetti, servizi e recensioni. Niente sezione fuori posto.
03
Il contatto sempre a portata
Il dock resta in basso mentre tutto scorre: mail, portfolio, note. Come su un computer.
Cosa abbiamo costruito
Una scrivania, i fogli e il dock
Una pagina sola. Lo sfondo resta fermo e le sezioni scorrono sopra come fogli su un tavolo.
01
Il desktop con le colline
Lo sfondo è il classico desktop con le colline e una nuvola. Sopra, il titolo a lettere bianche con tre etichette appuntate che oscillano: UI/UX design, illustrazione, 3D. In basso a sinistra una riga di presentazione, in basso il dock.
La pillola di vetro con nome, ruolo e «available for work» sta sopra il cielo come una notifica.
02
I numeri come post-it
«I make designs people remember» e sotto quattro fogli inclinati con l'angolo piegato: anni di esperienza, progetti, settori, siti fatti in Framer. Intorno, scarabocchi e adesivi.
Un numero su un post-it si legge come una nota personale, non come una statistica.
03
I progetti come finestre appuntate
Ogni progetto è una finestra del browser o una polaroid, con la graffetta e una leggera rotazione, sparsa sul tavolo. Sotto ognuna il nome, il tipo di lavoro, l'anno e «view case study».
Al passaggio del mouse il foglio si raddrizza e si solleva: lo prendi in mano.
04
I servizi come righe colorate
Cinque servizi, cinque righe di colore diverso con l'icona a destra: website design, UI/UX, brand identity, siti in Framer, esplorazioni con l'AI. Un elenco che sembra un blocco note.
Le righe entrano una alla volta, scorrendo, come se qualcuno le scrivesse.
05
Le recensioni come foglietti sul tavolo
«Clients liked the pixels»: le recensioni sono foglietti bianchi sparsi, con la foto, il nome e la frase. Sotto, le domande frequenti come etichette colorate che si aprono.
Chiude una scena: le colline, «let's build something memorable» e il tasto per scrivere.
Da telefono la scrivania resta: sfondo fermo, fogli che scorrono, dock in basso a portata di pollice.
Come è fatto
Sotto il cofano: uno sfondo fermo, fogli che scorrono e un dock
Sei effetti di Framer, uno alla volta. La metafora della scrivania costruita pezzo per pezzo.
- Framer
- Scroll interno
- backdrop-filter
- Varianti
- Tooltip
- 3D trascinabile
Sfondo fisso · contenuto che scorre dentro
Lo sfondo fermo e i fogli che scorrono
Cosa vedi. Le colline non si muovono mai. A scorrere sono le sezioni sopra, come fogli spinti su un tavolo, e il dock resta in basso.
Come è fatto. La pagina non scorre: è alta quanto lo schermo. Dentro c'è un contenitore con lo scorrimento interno e la barra nascosta, e tutto il contenuto vive lì. Lo sfondo e il dock stanno fuori dal contenitore, quindi restano fermi senza bisogno di position: fixed.
Dock · ingrandimento e tooltip
Il dock con i tooltip
Cosa vedi. In basso quattro icone come quelle di un computer. Al passaggio del mouse si ingrandiscono e sopra compare il nome.
Come è fatto. Ogni icona è un componente con la variante hover che la scala dal fondo, e un tooltip collegato allo stesso stato, con opacità da zero a uno. Il dock è una barra di vetro: fondo bianco semitrasparente con backdrop-filter.
angolo piegato · graffetta · spillo · hover
Il foglio con l'angolo piegato
Cosa vedi. I numeri e i progetti sono fogli leggermente storti, con uno spillo, una graffetta e l'angolo piegato. Al passaggio del mouse si raddrizzano e si sollevano.
Come è fatto. Il foglio è un rettangolo con ombra e una rotazione di due gradi; l'angolo piegato è un piccolo quadrato con un gradiente a 45 gradi, metà colore e metà retro. Graffetta e spillo sono grafiche vettoriali con la loro ombra. La variante hover toglie la rotazione e alza l'ombra.
Design that
makes people
look twice
etichette appuntate che oscillano
Le etichette che oscillano
Cosa vedi. Attorno al titolo, tre etichette con un pallino colorato oscillano piano, come appese a uno spillo.
Come è fatto. Ogni etichetta ruota avanti e indietro di pochi gradi con il punto di rotazione sullo spillo, non al centro. Le tre hanno la stessa animazione ma ritardi diversi, così non si muovono mai insieme.
backdrop-filter: blur(10px) · il cielo passa dietro
La pillola di vetro sopra il cielo
Cosa vedi. La presentazione con foto, nome e «available for work» sta sopra le colline in una pillola trasparente: il cielo passa dietro, sfocato.
Come è fatto. Fondo scuro al 35% con backdrop-filter: blur e un bordo bianco semitrasparente. Il pallino verde lampeggia con un'animazione di opacità. In pagina ci sono più di settanta superfici così.
cursor: grab · preserve-3d · canvas
L'oggetto 3D che si trascina
Cosa vedi. Un oggetto in tre dimensioni che puoi afferrare e far girare con il mouse.
Come è fatto. Un componente con perspective e preserve-3d che disegna su un canvas; il cursore diventa una mano e il trascinamento aggiorna la rotazione con un po' di inerzia. Quando lo lasci, continua a girare e rallenta.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni portfolio creativo
Designer, illustratori, studi piccoli: se vendi gusto, queste decisioni pesano più della griglia.
01
Scegli una metafora, non un effetto
La scrivania dà le regole a tutto: numeri, progetti, recensioni. Un effetto isolato si dimentica, una metafora no.
02
Falla rispettare a ogni sezione
Post-it, finestre, righe colorate, foglietti: ogni parte del sito è fatta con lo stesso materiale. La coerenza è il vero effetto.
03
Un dock vale un menu
Il contatto resta sempre in basso, come su un computer. Chi decide di scriverti non deve tornare su.
04
Il gusto si vede nei dettagli
Graffette, spilli, angoli piegati, scarabocchi. Sono le cose che un designer nota, e che fanno dire «questo ha occhio».
05
Muovi poco, ma sempre
Etichette che oscillano, pallino che lampeggia, fogli che si sollevano. Piccoli movimenti continui fanno sembrare vivo un sito senza stancare.
Il prossimo potrebbe essere il tuo
Vuoi un sito con un'idea dietro?
Designer, illustratori, studi creativi: se il tuo sito mostra i lavori ma non il tuo gusto, ripartiamo da un'idea che li tenga insieme. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti