Principios de diseño web que sí afectan a los resultados
Buena parte de los consejos de diseño web son preferencias disfrazadas de principios. Un número menor de decisiones cambia de forma fiable lo que hacen los visitantes, y casi todas son poco vistosas: qué se ve primero, si el texto se puede leer y cuántos pasos separan a alguien de aquello a lo que vino.
Esta guía cubre las que tienen evidencia detrás y nombra las que son genuinamente cuestión de gusto.
Una jerarquía clara por pantalla#
Cada pantalla debería dejar claro qué es lo más importante. Cuando tres elementos compiten por la atención con el mismo peso, los visitantes resuelven la ambigüedad marchándose.
La jerarquía se construye con tamaño, grosor, color, espacio y posición, aproximadamente en ese orden de fuerza. El espacio es lo más infrautilizado: un elemento con aire alrededor se lee como importante sin necesidad de gritar.
- Una acción principal por pantalla, con un estilo distinto de todo lo demás.
- Acciones secundarias presentes pero visualmente más calladas: contorno en vez de relleno.
- Encabezados que describan el contenido, no ingeniosos que no describan nada.
- Espacio usado a propósito: una página abarrotada no tiene jerarquía, solo densidad.
Legibilidad antes que decoración#
El texto difícil de leer le cuesta lectores por bueno que sea el contenido. Son umbrales medibles, no opiniones.
| Propiedad | Objetivo práctico | Por qué |
|---|---|---|
| Tamaño del texto | 16–18 px en móvil | Por debajo de 16 px iOS hace zoom al enfocar un campo y el texto pequeño pierde lectores |
| Longitud de línea | 55–75 caracteres | Las líneas largas hacen que el ojo pierda el sitio al volver |
| Interlineado | 1,5–1,7 en el texto corrido | Un interlineado apretado reduce de forma medible la velocidad de lectura |
| Contraste del texto | 4,5:1 mínimo, mejor 7:1 | WCAG AA; el gris sobre gris falla al aire libre en un móvil |
| Contraste de controles | 3:1 sobre el fondo | El usuario debe poder ver dónde termina un campo |
| Longitud de párrafo | Tres o cuatro líneas | Los bloques largos se saltan en móvil |
Compruebe el contraste sobre el fondo real, incluidos degradados e imágenes. Un valor que aprueba sobre blanco puede fallar sobre la imagen principal en la que realmente está.
Diseñe formularios para completarse, no para ser simétricos#
Los formularios son donde de verdad se cumplen casi todos los objetivos de un sitio, y donde menos atención de diseño se invierte. Cada campo que añade cuesta finalizaciones; cada campo que quita es dinero gratis si no necesitaba el dato.
- Pida lo mínimo que necesite para responder. El resto puede preguntarlo en la respuesta.
- Una columna. Los formularios a dos columnas provocan campos saltados y son peores en móvil.
- Etiquetas sobre los campos, siempre visibles: las etiquetas solo como marcador desaparecen al escribir.
- Tipos de campo y atributos de autocompletado correctos para que el móvil muestre el teclado adecuado y ofrezca rellenar.
- Valide al salir del campo, no en cada pulsación, y ponga el error junto al campo.
- Nunca vacíe el formulario ante un error. Perder lo escrito es el motivo más común de abandono.
- Diga qué ocurre después del envío y cuánto tarda.
Qué es gusto y qué no#
Tener clara la diferencia ahorra mucho tiempo de reunión. La columna izquierda es discutible; la derecha no.
| Gusto | No es gusto |
|---|---|
| Paleta de color | Ratios de contraste sobre el fondo real |
| Elección tipográfica | Tamaño del texto y longitud de línea |
| Estilo de ilustración | Si las imágenes tienen texto alternativo con sentido |
| Imagen principal o no | Si la acción principal se ve sin desplazarse |
| Esquinas redondeadas o rectas | Si los estados de foco son visibles para quien usa teclado |
| Estilo de animación | Si la animación respeta prefers-reduced-motion |
| Densidad de la maquetación | Si los objetivos táctiles miden al menos 44 px |
Preguntas frecuentes
¿Sigue importando lo que se ve sin desplazarse?
No como regla de que todo lo importante quepa ahí: la gente se desplaza, y lleva veinte años haciéndolo. Lo que importa es que la parte alta responda «¿qué es esto y es para mí?» en un par de segundos. Si lo hace, los visitantes se desplazarán buscando el detalle. Si no, no se lee nada de lo que viene después.
¿Cuántas tipografías debe usar una web?
Normalmente una o dos familias, con los grosores haciendo el trabajo que harían familias extra. La razón práctica es el rendimiento más que el gusto: cada familia y cada grosor adicional es otro archivo que descargar antes de que el texto se muestre bien. Una familia bien elegida con tres grosores cubre casi cualquier sitio.
¿Merece la pena hacer modo oscuro?
Merece la pena si puede hacerlo con tokens de diseño desde el principio, cuando cuesta muy poco. Añadirlo a un sitio terminado implica auditar cada color, cada imagen y cada sombra, lo que es un proyecto de verdad. Si lo soporta, respete la preferencia del sistema por defecto y deje que el usuario la anule.
¿El diseño debe parecerse al de la competencia?
Las convenciones sí deberían coincidir —navegación arriba, cesta arriba a la derecha, el logotipo enlaza a la portada—, porque romperlas cuesta comprensión sin ganancia. Todo lo que está por encima de las convenciones es donde se diferencia. El error es copiar la maquetación de un competidor entera, lo que suele importar decisiones que encajaban con su contenido y no con el suyo.
principios diseño webbuenas prácticas diseño webprincipios uxdiseño de formularioslegibilidad webjerarquía visual
