Design delle interfacce

I dettagli che fanno sembrare finita un’interfaccia. Qui raccogliamo tipografia, gerarchia, form, stati vuoti e di errore, animazioni e le schermate su cui si usa un prodotto.

29 articoli

Inizia da qui

Two dark interface panels side by side: the left one uneven, with nine small white rings marking its faults, the right one the same screen aligned, with flush numbers and a lit focused button

Design

Perché un'interfaccia sembra poco professionale: 9 dettagli

Spaziature fuori scala, raggi che non si incastrano, numeri che ballano, focus invisibile: nove dettagli che fanno sembrare incompleta una UI, con la soluzione.

A dark form card on the left with a white button; a white line leaves the button, breaks into a dashed gap, then fans out into six quiet curves, each ending at a small dark screen lit in a different place: a field outline, a dialog, half of a split view, a countdown bar, a top banner, a single dot

Design

Stati di errore nella UX: cosa mostrare quando una richiesta fallisce

Una richiesta può fallire in sei modi, dal campo rifiutato alla connessione persa. Cosa mostrare per ognuno, come rendere sicuro il riprova e cosa scrivere.

Three identical cards in a row on a dark grid: the first drawn only by a white outline, the second lifted above the page by a soft white shadow, the third filled with solid white, each holding the same quiet lines of text

Design

Bordo o ombra nell'interfaccia: quando usarli e quando basta un fondo

Le ombre spariscono con i colori forzati e svaniscono nel tema scuro, i bordi dei campi devono arrivare a 3:1. Quando separare con bordo, ombra o fondo.

Left, six dark cards in a grid, each with a white bar in a different corner; right, a dark table of nine rows whose white bars line up in one column, the longest one brighter

Design

Tabella dati o layout a card: quando conviene la tabella

In tabella i valori si confrontano senza tenerli a mente, con le card bisogna riorientarsi a ogni scheda. Cinque domande per scegliere il layout giusto.

Left, a dark document sheet of quiet lines topped by a lit check tile; right, seven dark screen tiles climbing like steps, joined by a white thread broken in six places, each gap marked by a dashed circle

Design

EAA: 6 motivi per cui un sito conforme sulla carta non passa l'audit

Nel 2026 WebAIM ha trovato errori WCAG sul 95,9% delle home più visitate. Sei motivi per cui dichiarazione, Lighthouse 100 e overlay non superano l'audit.

Design

Curve di easing e brand: una sola curva dà il tono al prodotto

Material 3 usa cubic-bezier(0.2, 0, 0, 1), Carbon separa curve productive ed expressive. Come scegliere una curva firma, provarla e farne dei token.

Four dark form pages in a row, each with a section pill and three fields of different widths filled in white, joined by a lit line that ends in a lit tile with a dark check

Design

Form lunghi: 12 regole di UX per farli compilare fino in fondo

Baymard conta 11,3 campi nel checkout medio, quando ne bastano 8. Dodici regole per i form lunghi: cosa tagliare, come dividere le pagine, quando validare.

Five tall screen shapes in a row, a stream of dots thinning and falling away between them, one white path reaching the lit last screen

Business

Agenzia UX per neobank: cosa aspettarsi da un partner nel 2026

Le banche digitali hanno il 19% dei conti e il 5% dei ricavi, e il 67% delle richieste online resta a metà. Cosa deve tenere un partner UX nel 2026.

A two-page spread laid out on a column grid: a huge headline bar, a picture with a caption, text columns, a wide margin and a white pull quote

Design

Layout editoriale sul web: 5 lezioni dalla carta che reggono

Cinque strumenti dalla carta che reggono a schermo: griglia vera, contrasto di scala, didascalie, margini e citazioni. E il CSS che li porta nel 2026.

A paragraph of quiet text lines whose ends all fall inside one white band, with even white steps marking the spacing down the margin

Design

Lunghezza della riga e interlinea: come impostarle in sei passi

Il testo si legge meglio tra 50 e 75 caratteri per riga. Ecco come impostare giustezza e interlinea in CSS, con i numeri, la soglia WCAG e il supporto browser.

A browser window holding a landing page, eight white markers on its parts, four parts struck through, and a pointer on the lit call-to-action button

Design

Cosa fa convertire una landing page: 8 fattori e 4 errori

La conversione mediana di una landing è 6,6%, nel SaaS 3,8%. Il quartile alto vince su coerenza del messaggio, velocità e attrito nel form.

Three screen cards: one with a composed white illustration, one with a grid of identical stock marks, one with text only

Design

Illustrazioni di prodotto: disegnarle, comprarle o evitarle

Un'illustrazione su misura costa tra 300 e 1.200 dollari. Ecco come decidiamo quali schermate se la meritano, quali prendono una libreria e quali niente.

A dark app window whose five lit buttons are wired through its edge to a glowing white orb on the right

WebMCP nel 2026: l'API con cui gli agenti usano il tuo SaaS

Con WebMCP una pagina registra gli strumenti che un agente AI del browser può chiamare. Chrome 149 lo prova in origin trial. Cosa cambia per le interfacce SaaS.

A grey-only interface panel with a clear order of headline, text, buttons and cards, seven white markers in its margin pointing at the parts

Design

Gerarchia visiva senza colore: 7 strumenti al posto dell'accento

Due grigi reggono un'interfaccia intera. Dimensione, peso, spazio e valore fanno il lavoro che attribuiamo al colore d'accento. Ecco in che ordine si applicano.

Four empty screens in a grid, each with one quiet sign (an empty slot, a search that found nothing, a finished check, a broken piece) and one lit button

Design

Empty state: i 4 stati che ogni schermata deve prevedere

Ogni schermata ha quattro empty state: primo accesso, nessun risultato, lista svuotata, errore. Baymard: quasi metà dei siti lascia il secondo senza uscita.

A film strip of seven frames, the picture in each more composed and brighter than the last, the seventh framed by white viewfinder corners

Design

Fotografie per il sito di un prodotto software: 7 passi

Il software non ha un oggetto da fotografare, così quasi tutti i siti finiscono in stock. I 7 passi per scegliere, uniformare e pubblicare 8-12 immagini.

$Seven lit shapes on two rows of guide lines, each over a dashed ghost of its mathematical position, circles and points overshooting the lines$ Design

Allineamento ottico: 7 correzioni che la matematica sbaglia

Le lettere tonde sporgono dall’1 al 3% rispetto alle piatte, e le interfacce ereditano lo stesso problema. Sette correzioni ottiche, e cosa fa già il CSS.

Three pricing cards side by side, the middle one raised and white with six ticked rows, the outer two dark and quiet

Design

Pagina prezzi SaaS: 6 correzioni per non perdere clienti

Gartner misura il 67% dei buyer B2B che compra senza venditore, e per loro il rimpianto sale del 23%. Sei correzioni per una pagina prezzi che fa decidere.

Left, a stack of identical grey page layouts; right, the same page with an oversize headline and a large white circle running off its edge

Design

Direzione artistica SaaS: come smettere di sembrare un template

La direzione artistica SaaS è il punto di vista visivo deliberato che distingue un prodotto dal template su cui è nato. Ecco dove spingere e dove lasciare stare le convenzioni.

A phone, a tablet and a monitor side by side, each holding the same eight rows of text in stepped sizes, white guide lines running level through all three

Design

Scala tipografica per UI di prodotto: dimensioni che reggono ovunque

Costruisci una scala tipografica di 7-9 dimensioni, nominate come token, che regge dal telefono a 320px al monitor a 1440px e sopravvive allo zoom al 200%. I numeri esatti e i limiti.

Six lit steps rising from left to right toward a large lit tile, dots of users standing on each step, a few faded dots falling below the first ones

Design

Onboarding UX: i pattern che riducono l'abbandono iniziale

L'attivazione media di un SaaS si ferma al 37,5%. Sei pattern di onboarding, dagli empty state alle checklist, per arrivare al primo valore più in fretta.

A large circle split down the middle: its left half a loose mosaic of small dark and white tiles scattering outward, its right half one smooth glowing white surface

Design

Craft ibrido: AI e mano umana nel design nel 2026

Il report Figma 2026 mette l'AI generativa nel 72% dei flussi di design. Il craft ibrido divide il lavoro: l'AI abbozza, la persona tiene gusto, brand e rifinitura.

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL o animazioni CSS: quando usare ciascuna (2026)

Le animazioni CSS muovono transform e opacity fuori dal main thread, a costo zero. WebGL ti dà la GPU grezza. Ecco il confine, con i costi di bundle e batteria.

A clean dashboard window with three summary cards and one lit chart, folded rows beneath, and a crowd of faint widget shapes behind it

Design

Design di dashboard SaaS: mostrare i dati senza sommergere l'utente

Molte dashboard SaaS falliscono perche mostrano tutto insieme. Ecco il layout che parte dalla sintesi, il limite di widget e la divulgazione progressiva che orienta chi legge.

A dim interface screen on the left wired by white lines to a lit, indented tree of nodes on the right

Progettare per gli agenti AI: la UI che l'utente non umano legge

Gli agenti AI leggono il sito tramite l'accessibility tree, la struttura usata dagli screen reader. In uno studio del 2026 il successo è sceso dal 78% al 42% se è degradata.

Two columns of seven tracks: on the left white dots easing to a stop, on the right grey dots jerking past the end of the track to a barred ring

Design

Animazione funzionale UI nel 2026: la checklist prima del rilascio

I 7 do e 7 don't che applichiamo a ogni prodotto: durate da 100 a 500ms, solo opacity e transform, prefers-reduced-motion gestita a livello di root.

Seven phone screens in a row shading from light to dark in steps, under an arc of dots from a glowing sun to the horizon

Design

Dark mode non è un toggle: theming context-aware nel 2026

L'82% degli utenti mobile usa già dark mode a livello OS nel 2025, ma un toggle nell'header ignora luce ambientale, orario e contesto. Ecco la soluzione.

On a white ground, a ring of twelve black dots around a black form card whose fields are joined by a dashed keyboard path ending in a white focus ring on the button

Design

Design accessibile dopo l'EU Accessibility Act

L'EU Accessibility Act è in vigore dal 28 giugno 2025. Cosa cambia per i product team che vendono in UE e cosa significa progettare accessibile davvero.

Grey tiles tumbling along a wide wave on the left that dies away to a flat line, ending in one still white tile on the right

Design

Calm UI nel 2026: la fine dei teatrini di animazione

Calm UI tiene il movimento dell'interfaccia in periferia, anima solo quando il cambio di stato ha senso, e tratta l'animazione come un costo non un default.

Torna agli Appunti