Diseño de Interfaces · Taller Práctico
Taller de Wireframes
y Diseño de Interfaces
Diseñando experiencias antes de programar
Wireframes
UI/UX
Flujos
Prototipado
Centrado en usuario
Definición

¿Qué es un Wireframe?

WIREFRAME (Esquema)
IMAGEN
BOTÓN
Luego se convierte en…
DISEÑO FINAL (UI)

Un wireframe es un esquema visual de baja fidelidad que representa la estructura y distribución de una interfaz, sin colores ni estilos definitivos. Es el plano arquitectónico de una aplicación.

— Interaction Design Foundation · UX Glossary

🎯 Un wireframe ahorra tiempo y dinero: detectar errores de diseño antes de programar cuesta 100x menos que corregirlos en producción.
Propósito

¿Para qué sirve un Wireframe?

Herramienta fundamental antes de escribir una sola línea de código

🗂️
Organización visual
Define qué elementos aparecen en pantalla y dónde se ubican antes de diseñar.
🗺️
Planeación
Permite planear flujos y pantallas completas sin invertir tiempo en detalles visuales.
🧭
Navegación
Muestra cómo el usuario se mueve entre pantallas y qué rutas existen en la app.
😊
UX temprano
Detecta problemas de usabilidad antes de que el desarrollo empiece.
📐
Distribución
Establece la jerarquía y proporción del contenido en cada pantalla.
🚀 Herramientas populares: Figma · Excalidraw · Balsamiq · Adobe XD · Draw.io · papel y lápiz
Componentes UI

Elementos de una Interfaz

Los bloques fundamentales que toda aplicación web comparte

Botón CTA
Registrar
Cancelar
Primaria / Secundaria
Campo de texto
Tu nombre...
Error en correo
Normal / Error
Card / Tarjeta
Activo
Con badge de estado
Navegación
Inicio
Perfil
Config
Barra superior
Header
Mi App
Logo + título
Sidebar
Menú lateral
💡 En un wireframe, estos elementos se dibujan como rectángulos y líneas — sin colores ni estilos. La forma sigue a la función.
Jerarquía

Jerarquía Visual

El orden en que el ojo humano percibe los elementos de una pantalla

Principios de jerarquía
Título principal
Tamaño grande · Mayor peso visual
1°
Subtítulo
Tamaño medio · Contraste
2°
Texto de cuerpo
Tamaño base · Peso normal
3°
Metadatos · Etiquetas
Mínimo contraste
4°
Buena jerarquía
  • ✅ Un título dominante claro
  • ✅ Espacio en blanco generoso
  • ✅ CTA destacado y visible
  • ✅ Contraste alto en texto
  • ✅ Flujo visual guiado
Mala jerarquía
  • ❌ Todo el texto del mismo tamaño
  • ❌ Pantalla saturada sin respiro
  • ❌ Múltiples CTAs compitiendo
  • ❌ Bajo contraste, texto ilegible
  • ❌ El ojo no sabe dónde ir
Navegación

Patrones de Navegación

Cómo se mueve el usuario entre las pantallas de la aplicación

Top Navigation
Inicio
Tareas
Perfil
  • Ideal para desktop
  • Máximo 5-7 opciones
  • Visible en todo momento
Sidebar
  • Ideal para dashboards
  • Más opciones disponibles
  • Puede colapsarse
Bottom Nav (Móvil)
  • Estándar en apps móviles
  • Acceso con el pulgar
  • Máx. 5 secciones
Flujo entre pantallas
Login
Dashboard
  • Conexiones lógicas entre vistas
  • Define el user journey
  • Base del wireframe
UX centrado en personas

Pensando en el Usuario

Las mejores interfaces resuelven problemas reales de personas reales

Claridad
  • El usuario sabe dónde está en todo momento
  • Las acciones posibles son obvias
  • Mensajes de error claros y útiles
  • Sin jerga técnica innecesaria
Simplicidad
  • Menos opciones = menos confusión
  • Un objetivo por pantalla
  • Eliminar lo que no aporta valor
  • "Perfecto es cuando no hay nada que quitar"
Accesibilidad
  • Contraste adecuado para baja visión
  • Textos alternativos en imágenes
  • Navegación por teclado
  • Fuentes legibles y botones grandes
Facilidad de uso
  • El usuario completa tareas sin manual
  • Feedback inmediato en cada acción
  • Patrones familiares y consistentes
  • Pocas interacciones para lograr el objetivo
🧠 Regla de oro: "No me hagas pensar" — Steve Krug. Si el usuario tiene que razonar cómo usarlo, el diseño falló.
Actividad práctica

Diseña tu propia Aplicación

Elige un proyecto y crea el wireframe completo de al menos 3 pantallas

App bancaria
Plataforma educativa
Red social
Sistema escolar
App de tareas
App de iglesia
Inventario
Agenda médica
Checklist del wireframe
  1. 1
    Elige tu tipo de aplicación y define su objetivo principal en una frase.
  2. 2
    Lista las 3-5 pantallas principales que necesitará (Ej: Login, Dashboard, Perfil, Lista, Detalle).
  3. 3
    Para cada pantalla dibuja: header, navegación, contenido principal y botones de acción.
  4. 4
    Conecta las pantallas con flechas indicando qué acción lleva a cada una.
  5. 5
    Revisa la jerarquía visual: ¿el elemento más importante es el más visible?
  6. 6
    Evalúa la navegación: ¿puede el usuario regresar desde cualquier pantalla?
  7. 7
    Presenta tu wireframe al grupo explicando quién es el usuario y qué problema resuelve.
20–30 minutos
Papel o Excalidraw
Individual o parejas
Flujo de navegación

Ejemplo de Flujo de Pantallas

Así se conectan las vistas en una app de gestión escolar

🔑
Inicio
Pantalla de bienvenida
🔐
Login
Usuario + contraseña
📊
Dashboard
Vista principal
👤
Perfil
Datos del usuario
Desde Dashboard
📚
Materias
Lista de cursos
⭐
Calificaciones
Mis notas
📋
Tareas
Pendientes
💬
Mensajes
Chat con maestros
🔗 Cada nodo es una pantalla. Las flechas muestran qué acción lleva a dónde — este es el mapa de navegación de tu wireframe.
Wireframe completo

Wireframe — Dashboard Escolar

Maqueta de baja fidelidad estilo Excalidraw

Sidebar
Header
Card stat
Card stat
Card stat
Gráfica / Chart
Lista
Formulario
CTA Button
Footer
✏️ Este esquema muestra la estructura sin colores ni estilos. Cada rectángulo representa un componente UI real.
🎨

"Las mejores interfaces comienzan
entendiendo al usuario."

— Principio del Diseño Centrado en el Usuario · DCU

  • Un wireframe es el plano arquitectónico de tu interfaz
  • La jerarquía visual guía la atención del usuario
  • La navegación clara define la experiencia de uso
  • Siempre diseña pensando en el usuario real
Diseño de Interfaces
Wireframes & UX
¡A diseñar!