Anatomia di un bottone
Un bottone non è un rettangolo cliccabile. È una promessa di azione, un piccolo contratto fisico tra dito e schermo. Lo smontiamo qui, pezzo per pezzo.
Un playground a capitoli
Altrove.
Un viaggio personale di UX, motion design e tipografia.
La UX migliore lascia l'utente essere altrove con la mente — perché lei lavora per lui. Tutto quello che succede senza che l'utente se ne accorga è la vera potenza dell'interfaccia. Qui ne raccolgo i frammenti, un capitolo alla volta.
Le interfacce migliori sono invisibili. Lavorano in silenzio mentre la tua mente è altrove.
La skill
Porta Altrove nel tuo agente
I principi del libro — timing in millisecondi nominati, stati che dicono la verità, motion che rispetta chi lo riduce — distillati in una skill. Il tuo agente li applica mentre tu sei altrove.
La skill nel repositorynpx skills add MatteoSchifano/altroveSi installa in .claude/skills — Claude Code, Cursor e più di 40 agenti.
Come lavoro
Pochi vincoli, tenuti con disciplina.
-
Un capitolo alla volta
Finito al 100% prima del prossimo. Un capitolo intero vale più di tre lasciati a metà.
- cap. 01 · il bottone Salva press · scale(0.97)
-
Prima la motivazione
Si scrive il perché prima del codice. Perché questa curva, perché questo timing.
- cap. 02 · l’attesa niente spinner sotto i 400ms
-
Il motion in millisecondi
Quattro preset di spring, durate con un nome. Si misura, non si va a sentimento.
- cap. 09 · il toggle Riduci il movimento entra 220ms · esce 160ms
-
Reduced-motion non è opzionale
Ogni animazione collassa con grazia. Niente librerie: solo CSS, clamp e container query.
Capitoli
10 esplorazioni finite
-
Capitolo 01 -
Capitolo 02 L'arte dell'attesa
La rete è lenta, l'utente no. La UX migliore finta di sapere già — e quasi sempre indovina. Skeleton, optimistic UI, errori che non gridano: il vocabolario di un'interfaccia che si fida del proprio prossimo click.
-
Capitolo 03 La voce del vuoto
Un'interfaccia che non ha niente da mostrare non è muta — è il momento in cui la sua voce si sente meglio. 404, liste vuote, ricerche senza risultati: piccoli vuoti che pesano molto, e che la cura distingue dall'abbandono.
-
Capitolo 04 Il dialogo silenzioso
Un dialog è un'interruzione che chiede permesso. Quando deve davvero parlare, lo fa con la tastiera in mano: focus dove serve, Escape che ricuce, animazioni che entrano come un sospiro e mai come un grido.
-
Capitolo 05 Lo scroll che racconta
Lo scroll è il gesto più trasparente che abbiamo. Non chiede permesso, non interrompe, non si insegna: già lo sappiamo fare. Una pagina che lo asseconda — invece di rincorrerlo — è una pagina che si lascia leggere fino in fondo.
-
Capitolo 06 Numeri che hanno peso
I numeri non sono mai solo numeri: sono cifre con un peso tipografico, un segno che dice subito, una convenzione locale. L'interfaccia che li tratta con cura non li mostra — li lascia leggere.
-
Capitolo 07 Anatomia di un input
Un campo da compilare è il momento in cui un sito chiede qualcosa all'utente — e in quel momento si vede subito che voce ha. Lo apriamo qui, dalla label che non mente alla validazione che ascolta.
-
Capitolo 08 La micro-tipografia
Quasi tutto, in un'interfaccia, è testo. E il testo ha mille piccole decisioni — la virgoletta che si curva, il titolo che non lascia parole sole, la riga che dura quanto basta — che decidono se la pagina respira o trattiene il fiato.
-
Capitolo 09 Anatomia di un toggle
Un bottone si preme e torna. Uno switch si impegna in una posizione e ci resta. Quella differenza — due posizioni, non due stati — cambia tutto il modo in cui si disegna un controllo binario, e nasconde una famiglia di parenti più larga di quanto sembri.
-
Capitolo 10 Anatomia di un toast
Un toast è la cosa più difficile da fare bene: dare un'informazione senza rubare l'attenzione, restare il giusto e andarsene quando ha finito. Sbagliare il tono, la durata o la voce lo trasforma da cortesia in interruzione.
Roadmap
Dove sta andando il libro.
-
A Fase A · Primi 8 capitoli
-
Anatomia di un bottone
Cosa rende affidabile il gesto più elementare dell’interfaccia?
-
L’arte dell’attesa
Come si rende l’attesa un atto di rispetto?
-
La voce del vuoto
Come parla un’interfaccia quando non ha nulla da mostrare?
-
Il dialogo silenzioso
Come si interrompe l’utente senza fare rumore?
-
Lo scroll che racconta
Cosa può dire un’interfaccia con il solo gesto dello scroll?
-
Numeri che hanno peso
Quando una cifra è informazione e quando è rumore?
-
Anatomia di un input
Come ascolta un campo, mentre l’utente scrive?
-
La micro-tipografia
Dove finisce la lettera e dove comincia il ritmo?
-
-
B Fase B · Componenti primari
-
Anatomia di un toggle
La differenza tra un bottone e uno switch è solo grafica?
-
Anatomia di un toast
Come si dà un’informazione senza interrompere?
-
Anatomia di un menu Prossimo
Come si offre una scelta senza nascondere il contesto?
Prossimo -
Anatomia di una tab
Come si cambia contesto senza disorientare?
In programma -
Anatomia di una scheda
La card è solo un rettangolo con bordo?
In programma -
Anatomia di un divider
Il silenzio nella pagina si disegna o si lascia accadere?
In programma
-
-
C Fase C · Pattern editoriali
-
La pagina lunga
Come si tiene compagnia a chi legge per dieci minuti?
In programma -
La griglia editoriale
Cosa rende una pagina elegante prima ancora di essere bella?
In programma -
La citazione
Quando si dà la parola a qualcun altro, come la si presenta?
In programma -
La nota a margine
Come si dialoga col proprio lettore senza interrompere il filo?
In programma -
L’indice del libro
Un sito che parla di sé, come si orienta al suo interno?
In programma -
Le immagini in editoria
Quando un’immagine è informazione e quando è respiro?
In programma
-
-
D Fase D · Pattern complessi
-
Il drag e il drop
Come si tiene un oggetto in volo?
In programma -
La ricerca tipo-as-you-go
Cosa succede tra ogni tasto premuto?
In programma -
Il calendario
Come si chiede una data senza odiare il browser?
In programma -
La timeline
Il tempo come oggetto visuale, non come tabella.
In programma -
Il gesto
Cosa cambia quando l’interfaccia si tocca, invece di cliccarla?
In programma -
Il commiato
Come si lascia andare un utente?
In programma
-
Cosa non è
- Un design system da distribuire
- Un framework, una libreria, uno starter
- Una raccolta di best practice universali
- Fatto per impressionare — semmai, per capire.
Astro, CSS nativo, Motion. Epilogue e Inconsolata. Niente Tailwind, niente UI kit.
Leggi i capitoli