Diseño de interfaces

Los detalles que hacen que una interfaz parezca terminada. Aquí reunimos tipografía, jerarquía, formularios, estados vacíos y de error, movimiento y las pantallas con las que se usa un producto.

29 artículos

Empieza aquí

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.

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.

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.

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.

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

Negocio

Agencia UX para neobancos: qué esperar de un socio en 2026

Los bancos digitales tienen el 19% de las cuentas y el 5% de los ingresos, y se abandona el 67% de las solicitudes. Qué cubre un socio UX en 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

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.

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

Diseño

Qué hace que una landing page convierta: 8 factores, 4 errores

La conversión mediana de una landing es del 6,6%; en SaaS, del 3,8%. El cuartil alto gana en mensaje, velocidad y fricción del formulario.

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

Diseño

Ilustraciones de producto: dibujarlas, comprarlas o dejarlas

Una ilustración a medida cuesta entre 300 y 1.200 dólares. Así decidimos qué pantallas la merecen, cuáles tiran de librería y cuáles no llevan ninguna.

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

WebMCP en 2026: la API con la que los agentes usan tu SaaS

Con WebMCP una página registra herramientas que un agente de IA del navegador llama directamente. Chrome 149 lo prueba en origin trial. Qué cambia en tu 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

Diseño

Jerarquía visual sin color: 7 recursos en vez del acento

Dos grises sostienen una interfaz entera. Tamaño, peso, espacio y valor hacen el trabajo que le atribuimos al color de acento. Este es el orden que funciona.

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

Diseño

Diseño de estados vacíos: los 4 que toda pantalla necesita

Cada pantalla tiene cuatro estados vacíos: primer uso, sin resultados, lista vaciada y error. Baymard: casi la mitad de los sitios deja el segundo sin salida.

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

Diseño

Fotografía para la web de un producto software: 7 pasos

El software no tiene objeto que fotografiar y casi todas las webs acaban en stock. Los 7 pasos para elegir, igualar y publicar de 8 a 12 imágenes.

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

Alineación óptica: 7 ajustes que los números no ven

Las letras redondas rebasan a las planas entre un 1% y un 3%, y la interfaz hereda el mismo problema. Siete ajustes ópticos y lo que ya resuelve el CSS.

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

Diseño

Página de precios SaaS: 6 arreglos para no perder clientes

Gartner sitúa en el 67% los compradores B2B que compran sin comercial, y su arrepentimiento sube un 23%. Seis arreglos para una página que decide.

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

Diseño

Dirección de arte SaaS: cómo dejar de parecer una plantilla

La dirección de arte SaaS es el punto de vista visual deliberado que separa un producto de la plantilla en la que nació. Aquí dónde empujar y dónde no tocar las convenciones.

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

Diseño

Escala tipográfica para UI de producto: tamaños que aguantan en cada pantalla

Crea una escala tipográfica de 7 a 9 tamaños, nombrados como tokens, que aguanta del móvil de 320px al monitor de 1440px y sobrevive al zoom del 200%. Los números exactos y los límites.

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

Diseño

UX de onboarding: patrones que reducen el abandono inicial

La activación media de un SaaS se queda en el 37,5%. Seis patrones de onboarding, del empty state a las checklists, para llegar antes al primer valor.

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

Diseño

Craft híbrido: IA y criterio humano en el diseño en 2026

El informe Figma 2026 sitúa la IA generativa en el 72% de los flujos de diseño. El craft híbrido reparte: la IA esboza, la persona pone criterio, marca y acabado.

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 animaciones CSS: cuándo usar cada una (2026)

CSS anima transform y opacity fuera del hilo principal, gratis. WebGL te da la GPU en bruto. Aquí está la línea entre ambos, con los costes de bundle y batería.

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

Diseño

Diseno de dashboards SaaS: mostrar datos sin saturar al usuario

Muchos dashboards SaaS fallan porque lo muestran todo a la vez. Este es el diseno que empieza por el resumen, el limite de widgets y la divulgacion progresiva que orienta.

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

Diseñar para agentes de IA: la interfaz que lee el usuario no humano

Los agentes de IA leen tu sitio a través del árbol de accesibilidad, la estructura que usan los lectores de pantalla. En un estudio de 2026 el éxito cayó del 78% al 42% con uno degradado.

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

Diseño

Animación funcional UI en 2026: el checklist antes de publicar

Los 7 do y 7 don't que aplicamos en cada producto: duraciones de 100 a 500ms, solo opacity y transform, prefers-reduced-motion respetada en la raíz.

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

Diseño

El modo oscuro no es un toggle: theming contextual en 2026

El 82% de los usuarios móviles ya usa modo oscuro a nivel OS en 2025, pero un toggle en el header ignora luz ambiente, hora y contexto. Aquí la solución.

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

Diseño

Diseño accesible tras la EU Accessibility Act

El EAA entró en vigor el 28 de junio de 2025. Qué cambia para los equipos de producto que venden en la UE y qué significa diseño accesible de verdad.

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

Diseño

Calm UI en 2026: el fin de los teatros de animación

Calm UI mantiene el movimiento en la periferia, anima solo cuando un cambio de estado importa, y trata la animación como un coste, no un valor por defecto.

Volver a Apuntes