Principio 01
Navegación
Debe mostrar dónde está el usuario y ofrecer trayectorias claras. Pulsa una sección y observa cómo reacciona cada lado.
Página 8347?
ERROR 404 — recurso no encontrado
✕ Sin rumbo: no sabes dónde estás
Bienvenido
Página principal de la tienda.
✓ Migas, sección activa y contenido coherente
¿Por qué importa? teoría
La navegación es el mapa de la web. Un buen sistema responde siempre a tres preguntas: ¿dónde estoy?, ¿dónde puedo ir? y ¿cómo vuelvo? Cuando estas señales faltan, el usuario se desorienta, pierde la confianza y abandona el sitio.
✓ Buenas prácticas
- Resaltar la sección activa en el menú
- Usar migas de pan (breadcrumbs) coherentes
- Etiquetas de enlace descriptivas y predecibles
- Mantener el menú en el mismo lugar en todas las páginas
✕ Errores comunes
- Enlaces genéricos como «click aquí» o «página»
- No indicar la ubicación actual del usuario
- Rutas que llevan a errores 404
- Reordenar el menú entre páginas
Principio 02
Consistencia
Colores, formas e iconos deben mantenerse uniformes. Cambia el tema y observa cómo el lado correcto cambia en bloque mientras el otro se descuadra.
✕ Colores fijos: el tema se rompe
✓ Todo comparte color, forma y radio
¿Por qué importa? teoría
La consistencia reduce la carga cognitiva: si los botones, colores y patrones se comportan igual en todo el sitio, el usuario aprende una vez y aplica ese conocimiento en todas partes. Un sistema de diseño con tokens (variables) garantiza que un solo cambio se propague de forma uniforme.
✓ Buenas prácticas
- Definir tokens de color, radio y tipografía reutilizables
- Mismos componentes para las mismas acciones
- Iconografía y espaciado uniformes
- Soportar temas (claro/oscuro) desde variables centralizadas
✕ Errores comunes
- Colores «hardcodeados» en cada componente
- Botones con formas y tamaños distintos para lo mismo
- Mezclar estilos de iconos sin criterio
- Romper el diseño al cambiar de tema
Principio 03
Tiempo de respuesta
Una WebApp lenta frustra. Pulsa «Recargar» para ver cómo el lado optimizado aparece al instante mientras el otro deja al usuario mirando esqueletos y spinners.
Cargando imagen de 8 MB…
Tienda Nova
@tienda · hace un rato
Tienda Nova
@tienda · ahora
¿Por qué importa? teoría
La percepción de velocidad define la experiencia. Estudios clásicos de usabilidad marcan tres umbrales: hasta 0,1 s se siente instantáneo, hasta 1 s el flujo de pensamiento se mantiene y a partir de 10 s el usuario pierde la atención. Optimizar imágenes, cachear y mostrar contenido progresivamente mantiene al usuario enganchado.
✓ Buenas prácticas
- Comprimir y servir imágenes en formatos modernos (WebP/AVIF)
- Mostrar contenido por partes en lugar de esperar a todo
- Cachear recursos y usar carga diferida (lazy loading)
- Dar feedback inmediato a cada acción del usuario
✕ Errores comunes
- Servir imágenes pesadas sin comprimir
- Bloquear la pantalla hasta cargar todo
- Esqueletos o spinners eternos sin progreso real
- No optimizar peticiones ni recursos
Principio 04
Organización del contenido
Una jerarquía visual clara define qué es más importante. Activa el orden de lectura: a la izquierda fluye 1→2→3; a la derecha el ojo salta sin rumbo.
Zapatillas Nova
1Edición limitada 2026
4Diseño ligero y transpirable para uso diario con el mismo tamaño y peso que todo lo demás.
2Comprar ahora
✕ Todo pesa igual: nada destaca
Zapatillas Nova
2Edición limitada 2026
3Diseño ligero y transpirable para uso diario. La jerarquía guía la lectura de lo más importante a lo secundario sin esfuerzo.
4¿Por qué importa? teoría
La jerarquía visual guía la mirada en el orden correcto usando tamaño, peso, color y espacio. Cuando todo tiene la misma importancia visual, nada destaca y el usuario debe esforzarse para entender qué leer primero. Una buena organización comunica el mensaje incluso antes de leer una sola palabra.
✓ Buenas prácticas
- Escalar el tamaño según la importancia (título > subtítulo > cuerpo)
- Usar el espacio en blanco para agrupar y separar
- Una sola llamada a la acción principal destacada
- Alinear elementos en una retícula clara
✕ Errores comunes
- Mismo tamaño y peso para todo el texto
- Elementos dispersos sin alineación
- Varias llamadas a la acción compitiendo entre sí
- Saturar sin jerarquía ni espacios de respiro
Principio 05
Compatibilidad entre navegadores
El diseño debe verse igual en todos. Cambia de navegador: el lado correcto se mantiene; el otro se rompe en cualquiera que no sea Chrome.
Renderizado en Chrome · correcto
Renderizado en Chrome · correcto
¿Por qué importa? teoría
Cada navegador interpreta el CSS y el HTML con pequeñas diferencias. Si solo pruebas en uno, parte de tus usuarios verá un sitio roto. La compatibilidad se logra usando estándares, prefijos cuando hace falta y probando en varios motores de renderizado (Blink, Gecko, WebKit).
✓ Buenas prácticas
- Usar CSS estándar y propiedades ampliamente soportadas
- Probar en Chrome, Firefox, Safari y Edge
- Añadir prefijos o fallbacks cuando sea necesario
- Validar el HTML y el CSS
✕ Errores comunes
- Diseñar y probar en un solo navegador
- Depender de funciones experimentales sin fallback
- Ignorar prefijos de proveedor
- Asumir que «si funciona en Chrome, funciona en todos»
Principio 06
Diseño adaptable (responsive)
Los elementos deben adaptarse a cualquier pantalla. Cambia de dispositivo: el lado correcto reorganiza el contenido; el otro mantiene un ancho fijo y desborda.
Tienda Nova
Producto A
Producto B
Producto C
Tienda Nova
Producto A
Producto B
Producto C
¿Por qué importa? teoría
Hoy se navega desde móviles, tablets y escritorios de todos los tamaños. Un diseño responsive usa unidades flexibles, retículas fluidas y media queries para reorganizar el contenido según el espacio disponible. El enfoque «mobile-first» parte de la pantalla más pequeña y va añadiendo complejidad hacia arriba.
✓ Buenas prácticas
- Usar unidades relativas (%, rem, fr) en lugar de píxeles fijos
- Aplicar media queries para reorganizar el layout
- Diseñar primero para móvil (mobile-first)
- Imágenes y retículas fluidas que se adaptan
✕ Errores comunes
- Anchos fijos en píxeles que provocan scroll horizontal
- Un único layout pensado solo para escritorio
- Texto y botones demasiado pequeños en móvil
- No probar en distintos tamaños de pantalla