Guía de diseño para Web Apps (2026 edition)

Si estás diseñando y maquetando web apps, esta guía te va a ahorrar mucho tiempo de prueba/error. Ya no vale «hacerla responsive y ya». Los usuarios esperan botones con suficiente espacio para ser pulsados, espaciado coherente que respire, tipografías que no cansen y layouts que carguen en menos de 1 segundo aunque tengan gráficos complejos.

El diseño se centra en la experiencia de usuario intuitiva, el minimalismo funcional y la adaptabilidad extrema, priorizando la velocidad y el diseño orientado al Producto Mínimo Viable. Hablemos de tipografías que no cansan, espacios que respiran, y botones que convierten.

Textos

Elige bien o pierde usuarios, la regla #1: Nunca más de 3 familias.

Tipografías (mis preferencias)

  • INTER – Diseñada para interfaces. x-height perfecta, pesos variables, legible a 12px. Ideal para Body + headings. Carga ligera. La tienes en Google fonts
  • GEIST – Moderna, neutra, optimizada para código/números. Alternativa a SF Pro. Ideal para Dashboards y SaaS.
  • SATOSHI – Sans geométrica suave, gran contraste de pesos. Se siente premium sin ser «de diseño». Ideal para titulares y body.
  • JETBRAINS MONO – Monospaced perfecta para tablas/metrics, números, código, KPIs.
  • TT Interfaces Pro – Hecha para UI móvil. Espaciado perfecto, legible 10px+.

Consulta aquí más información sobre las fuentes más utilizadas en 2026

Jerarquía:

Lo ideal es usar clamp() para obtener un responsive automático. clamp(MÍNIMO, IDEAL, MÁXIMO)

  • MÍNIMO – el tamaño mínimo que va a tener la fuente (móviles pequeños)
  • IDEAL – crece con el vw (Viewport Width) es una unidad de medida relativa al ancho de la ventana gráfica (o «viewport») del navegador. 1vw equivale exactamente al 1% del ancho del viewport.
  • MÁXIMO – el tamaño máximo (en un desktop grande)
h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; }
body { font-size: clamp(1rem, 2.25vw, 1.125rem); line-height: 1.65; }
.caption { font-size: 0.875rem; }

Separaciones (padding)

Para web apps, la referencia más sólida y repetida en guías de diseño es trabajar con una base de múltiplos de 4 px o 8 px para márgenes y paddings, porque ayuda a mantener coherencia visual y escalabilidad; Microsoft, por ejemplo, recomienda que dimensiones, márgenes y rellenos estén en múltiplos de 4 px en sus guías de diseño de UI. Además, varias guías prácticas de CSS coinciden en que el padding debe usarse para dar aire interno al contenido y mejorar legibilidad, especialmente en componentes como botones, tarjetas y formularios

Si quieres una regla utilizable en producto real, yo usaría esta escala como base:

  • 4 px para ajustes muy finos.
  • 8 px para separación pequeña.
  • 16 px como padding estándar en componentes.
  • 24 px para bloques o secciones internas.
  • 32 px para contenedores más amplios o pantallas con más aire.

Esta lógica encaja bien con enfoques de diseño responsive y con sistemas de espaciado consistentes, que suelen facilitar una interfaz más ordenada y adaptable

En pantallas pequeñas, el padding lateral mínimo suele ser 16 px, porque menos que eso empieza a hacer que el contenido se vea apretado; en interfaces más cuidadas, 20–24 px laterales suelen funcionar mejor para lectura y jerarquía visual. En botones, un padding interno típico cómodo puede rondar 12 px vertical y 16–20 px horizontal, siempre que el área táctil total siga siendo suficientemente grande.

  • Botones: 12–14 px vertical, 16–24 px horizontal.
  • Cards: 16–24 px internos.
  • Form fields: 12–16 px internos.
  • Secciones de contenido: 24–32 px.
  • Pantallas móviles completas: lateral de 16–24 px.

Elementos interactivos

Para elementos interactivos en mobile, la clave es diseñarlos para el dedo y no para el cursor: los objetivos táctiles deberían quedarse en 44 x 44 px como mínimo según Apple y en 48 x 48 dp según Google, con al menos 8 px de separación entre elementos para reducir toques accidentales. Además, WCAG 2.2 exige un mínimo de 24 x 24 CSS px o espacio suficiente alrededor, pero para una web app móvil usable conviene moverse por encima de ese mínimo técnico.
Tamaño y toque
Los botones principales funcionan mejor con una altura de 48–56 px, porque se pulsan con más comodidad en uso real y dan más presencia visual a la acción principal. Los icon buttons pueden mostrar un icono de 20–24 px, pero su área tocable completa debería seguir respetando el mínimo táctil, añadiendo padding o un contenedor mayor.

Espaciado y jerarquía

Entre controles interactivos, deja al menos 8 px de aire horizontal y vertical, y si el control es pequeño, crea una “zona de exclusión” alrededor para evitar errores de pulsación. En mobile también ayuda trabajar con una jerarquía muy clara: una sola acción principal visible, contraste suficiente y una separación generosa entre bloques para que la interfaz no se sienta apretada.

Formularios y estados

En formularios móviles, los campos deberían tener una altura mínima de 44–48 px, labels visibles y validación inmediata por campo para que el usuario entienda qué pasa sin releer toda la pantalla. También es importante que cada interacción devuelva feedback claro — cambio de estado, validación, carga o confirmación — porque en mobile esa respuesta visual reduce incertidumbre y mejora la percepción de fluidez.

Maquetación útil

Para una web app móvil, suele funcionar bien este punto de partida:

  • Botones principales: 48–56 px de alto
  • Icon buttons: área táctil de 44–48 px
  • Campos de formulario: 44–48 px de alto
  • Separación entre controles: 8–12 px
  • Margen lateral de pantalla: 16–24 px para que todo respire mejor en móvil

Ese sistema hace que la interfaz sea más cómoda, más legible y más fiable al tocar, que es justo lo que más pesa en una web app pensada para móvil

Categorías: UX / UI