Teoría: Diseño UX/UI

1. ¿Qué es UX y qué es UI?

Dos disciplinas distintas pero complementarias en el diseño digital.

UX — User Experience

Cómo se siente el usuario al usar el producto. Se enfoca en la usabilidad, la lógica de navegación y si las tareas son fáciles de completar.

Ej: ¿Es fácil encontrar el botón de pago?

UI — User Interface

Cómo luce el producto. Incluye colores, tipografía, íconos, botones y la disposición visual de los elementos.

Ej: El botón de pago es azul y visible.

🧠 Analogía: UX = estructura de una casa, UI = decoración y pintura.

2. Las 10 Heurísticas de Nielsen

Principios universales para evaluar si una interfaz es usable. Haz clic para ver cada una.

1. Visibilidad del estado del sistema
El sistema siempre debe informar al usuario qué está pasando. Ej: barra de progreso, indicador de carga.
2. Coincidencia con el mundo real
Usa palabras y conceptos familiares para el usuario, no jerga técnica. Ej: "Papelera" en lugar de "buffer de eliminación".
3. Control y libertad del usuario
El usuario debe poder deshacer errores fácilmente. Ej: botón "Deshacer" o "Cancelar".
4. Consistencia y estándares
Mismas palabras, colores y acciones deben significar lo mismo en toda la interfaz.
5. Prevención de errores
Diseña para que los errores sean difíciles de cometer. Ej: confirmación antes de eliminar.
6. Reconocer en lugar de recordar
Muestra opciones visibles; el usuario no debe memorizar información. Ej: historial de búsquedas.
7. Flexibilidad y eficiencia
Atajos para usuarios expertos. Ej: Ctrl+C, Ctrl+V en aplicaciones de escritorio.
8. Diseño estético y minimalista
Muestra solo la información necesaria. Más elementos = más ruido visual = más confusión.
9. Ayuda al usuario a reconocer y recuperarse de errores
Mensajes de error claros, en lenguaje simple, que explican el problema y cómo solucionarlo.
10. Ayuda y documentación
La documentación debe ser fácil de buscar y orientada a las tareas del usuario.

3. Color en el Diseño UI

El color transmite emociones, jerarquía y guía la atención del usuario.

  • Contraste: El texto debe tener razón de contraste ≥ 4.5:1 con el fondo (WCAG AA) para ser accesible.
  • Paleta de 3 colores: Primario (acciones), Secundario (apoyo) y Neutro (texto/fondo).
  • 60-30-10: 60% color base, 30% secundario, 10% acento.
  • Semántica de color: Verde = éxito, Rojo = error, Amarillo = advertencia, Azul = información.
  • No depender solo del color: Añadir iconos o texto para daltonismo (afecta al ~8% de hombres).

Primario

Secundario

Éxito

Error

Advertencia

Neutro

4. Tipografía en UI

El texto comunica. La tipografía afecta la legibilidad y el tono del diseño.

Jerarquía visual

Título H1 — 32px bold

Subtítulo H2 — 20px semibold

Texto de cuerpo — 16px regular. Legible y con buen interlineado.

Texto secundario — 14px muted

  • Tamaño mínimo: 16px en cuerpo, nunca menos de 12px.
  • Interlineado: 1.4–1.6 veces el tamaño de fuente.
  • Máximo 2–3 fuentes por diseño.
  • Sans-serif (Roboto, Inter) = digital; Serif (Georgia) = formal/editorial.
  • Contraste alto entre texto y fondo.

5. Wireframes y Prototipado

Etapas del proceso de diseño antes de programar.

1. Investigación

Entender al usuario: encuestas, entrevistas, personas.

2. Wireframe

Boceto en escala de grises: solo estructura, sin colores.

3. Prototipo

Maqueta navegable con colores y estilos reales.

  • Lo-fi (baja fidelidad): dibujo a mano o bloques grises rápidos.
  • Hi-fi (alta fidelidad): diseño completo en Figma o Adobe XD.
  • Prueba de usabilidad: mostrar el prototipo a 5 usuarios revela el 85% de los problemas.

6. Herramientas de Diseño

Las plataformas más usadas en la industria del diseño UX/UI.

🎨 Figma

Estándar de la industria. Colaborativo en tiempo real. Gratis para estudiantes. Ideal para wireframes y prototipos.

🖌️ Canva

Más accesible, ideal para empezar. Plantillas, logos, posts y presentaciones. Gratis con cuenta educativa.

📐 Adobe XD

De Adobe. Diseño y prototipado de alta fidelidad. Integración con Photoshop e Illustrator.

📝 Balsamiq

Especializado en wireframes lo-fi. Bocetos rápidos. Perfecto para la etapa inicial del proceso de diseño.

Laboratorio de Diseño

🎨 Crea tu paleta de colores

Selecciona un color primario y uno secundario para ver tu paleta UI.

Color primario:

Color secundario / acento:

Tu paleta UI (60-30-10):

60% primario · 30% acento · 10% neutro (#1e293b)

Preview de botón con tu paleta

📐 Wireframe de pantalla móvil

Estructura básica de una app: identifica cada componente.

NAV BAR
HERO / BANNER
Card 1
Card 2
LISTA / CONTENIDO
BOTÓN CTA
TAB BAR

Componentes del wireframe:

  • Nav Bar: navegación superior con logo y menú.
  • Hero/Banner: elemento visual principal de la pantalla.
  • Cards: bloques de contenido o productos.
  • Botón CTA: llamada a la acción (Call To Action).
  • Tab Bar: navegación inferior en apps móviles.

🔍 Test de Accesibilidad — Contraste de Color

Elige color de texto y fondo para ver si cumple el estándar WCAG de accesibilidad.

Color de texto:

Color de fondo:

Resultado:

21:1

✅ Excelente — AA y AAA

Este es el texto de muestra. ¿Puedes leerlo cómodamente?

Diccionario UX/UI

UX (User Experience)
Experiencia completa del usuario al interactuar con un producto: usabilidad, emociones y eficiencia.
UI (User Interface)
Apariencia visual de una interfaz: colores, tipografía, íconos y disposición de elementos.
Usabilidad
Facilidad con la que un usuario puede aprender y usar una interfaz para lograr sus objetivos.
Wireframe
Boceto de baja fidelidad que muestra la estructura de una pantalla sin estilos ni colores.
Prototipo
Maqueta navegable del diseño final, usada para pruebas antes de programar.
Heurística
Principio guía para evaluar la usabilidad de una interfaz (Nielsen, 1994).
CTA (Call to Action)
Elemento visual (botón o enlace) que invita al usuario a realizar una acción clave.
Jerarquía visual
Organización de elementos por tamaño, color o posición para guiar la mirada del usuario.
Contraste
Diferencia de luminosidad entre texto y fondo. Mínimo 4.5:1 para accesibilidad (WCAG AA).
Tipografía
Elección y uso de fuentes: familia, tamaño, peso e interlineado para mejorar la lectura.
Grid / Cuadrícula
Sistema de columnas que organiza el contenido de forma alineada y coherente.
Espacio en blanco
Área vacía entre elementos. Mejora la legibilidad y el foco del usuario.
Accesibilidad (a11y)
Diseñar para que personas con discapacidades puedan usar la interfaz sin barreras.
WCAG
Web Content Accessibility Guidelines — estándar internacional de accesibilidad web.
Figma
Herramienta de diseño UI colaborativa en la nube, estándar actual de la industria.
Persona (UX)
Perfil ficticio de un usuario típico basado en investigación real, para tomar decisiones de diseño.
User Flow
Diagrama que muestra el recorrido del usuario desde el inicio hasta completar una tarea.
Microinteracción
Animación o feedback visual pequeño al realizar una acción. Ej: corazón que late al dar like.
Responsive Design
Diseño que se adapta automáticamente a cualquier tamaño de pantalla (móvil, tablet, PC).
Design System
Colección de componentes reutilizables, colores y normas que dan coherencia a una marca.

Videos en Español

¿Qué es UX y UI? — Diferencias clave

Principios de diseño UI explicados

Figma desde cero — Crear una página web

Wireframes y prototipado — Guía práctica

Cuestionario

10 preguntas aleatorias del banco de 50. Calificación de 0 a 100.