Product Design · Apuntes

Diseño

Design tokens multimarca: 6 pasos desde un solo nivel de primitivas

Un nivel de primitivas, un archivo de alias por marca y componentes que solo leen nombres semánticos: seis pasos sobre la especificación DTCG 2025.10 y 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

Diseño

Estados de error en UX: qué mostrar cuando falla una petición

Una petición puede fallar de seis maneras, del campo rechazado a la conexión caída. Qué mostrar en cada caso, cómo hacer seguro el reintento y qué escribir.

A dark design frame of white component tiles on the left, a column of code lines on the right, joined by a white line through six small lit tiles; four of the code lines are empty dashed outlines

Diseño

Figma MCP, del diseño al código: 6 pasos y los límites que quedan

El servidor MCP de Figma da a los agentes el contexto del diseño y un borrador de código. Seis pasos para un traspaso limpio y los cuatro huecos que quedan.

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

Diseño

Borde o sombra en la interfaz: cuándo usar cada uno y cuándo un fondo

Las sombras desaparecen con colores forzados y se pierden en modo oscuro, y el borde de un campo necesita 3:1. Cuándo separar con borde, sombra 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

Diseño

Tabla de datos o tarjetas: cuándo gana la tabla en una interfaz

En una tabla los valores se comparan sin memorizarlos; con tarjetas hay que reubicarse en cada una. Cinco preguntas para elegir el formato de cada pantalla.

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

Diseño

EAA: 6 razones por las que un producto conforme suspende la auditoría

En 2026 WebAIM detectó fallos WCAG en el 95,9% de las home más visitadas. Seis motivos por los que declaración, Lighthouse 100 y overlay suspenden la auditoría.

Diseño

Curvas de easing y marca: una curva define el tono del producto

Material 3 usa cubic-bezier(0.2, 0, 0, 1) y Carbon separa curvas productive y expressive. Cómo elegir una curva propia, probarla y llevarla a tokens.

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

Diseño

Por qué una interfaz parece poco profesional: 9 detalles

Espaciados fuera de escala, radios que no encajan, números que bailan, foco invisible: nueve detalles que hacen que una UI parezca a medias, con su solución.

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

Diseño

UX de formularios largos: 12 reglas para que se completen

Baymard cuenta 11,3 campos en el checkout medio cuando bastan 8. Doce reglas para formularios largos: qué quitar, cómo dividir páginas y cuándo validar.

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

Diseño

Estudio de diseño de producto digital o agencia web: qué cambia

El sector TIC italiano tiene 132.832 empresas: la etiqueta no prueba nada. Ocho ejes de comparación, cuatro comprobaciones y cuándo conviene la agencia.

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

Diseño

Maquetación editorial en la web: 5 recursos del papel que funcionan

Cinco recursos del papel que aguantan en pantalla: retícula real, contraste de escala, pies de foto, márgenes y citas. Y el CSS que los sostiene en 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

Diseño

Longitud de línea e interlineado: cómo ajustarlos en 6 pasos

El texto se lee mejor entre 50 y 75 caracteres por línea. Así se ajustan la medida y el interlineado en CSS, con los números, el suelo WCAG y el soporte real.