Product Design

Design systems, UX patterns, motion, accessibility, design tokens, Figma to code workflows.

Pagina 1 di 4

Design

Design token multi-brand: 6 passi da un solo livello di primitive

Un livello di primitive, un file di soli alias per ogni brand, componenti che leggono solo nomi semantici: sei passi sulla specifica DTCG 2025.10 e su Figma.

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.

Design

Figma MCP, dal design al codice: 6 passi e i limiti che restano

Il server MCP di Figma dà agli agenti il contesto del design e una bozza di codice. Sei passi per un passaggio pulito e i quattro vuoti che restano.

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.

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.

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.

Left, scattered dark tiles in loose clusters joined by broken lines; right, one tight block of white tiles joined as a single shape

Design

Studio progettazione prodotti digitali o web agency: cosa cambia

Il settore ICT italiano conta 132.832 imprese: l'etichetta non prova nulla. Otto assi di confronto, quattro verifiche in chiamata, e quando conviene l'agenzia.

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.

Torna agli Appunti