Lección 8 de 12 · Lectura y práctica
Wireframes y Estructura
Fase 1: De la Idea a los Wireframes Vamos a diseñar una app de gestión de tareas (tipo Todoist simplificado). Empezaremos con wireframes de baja fidelidad para definir la estructura antes de preocuparnos por colores o tipografía..
Del concepto a la práctica
Taller de esta lección
Los wireframes deben resolver la secuencia de decisiones antes de introducir identidad visual. En una reserva médica, la estructura mínima necesita mostrar dónde se busca una especialidad, cómo se comparan horarios y qué información se confirma. Un estado vacío es parte del recorrido, no una excepción que se añade al final.
Ejemplo resuelto
Dibuja cuatro frames grises: “Buscar”, “Resultados”, “Confirmar” y “Sin horarios”. En Resultados coloca especialidad, fecha, dos tarjetas de horario y una acción de filtro. En Confirmar muestra profesional, fecha, hora y botón final. En Sin horarios explica el motivo y ofrece cambiar fecha.
Pruébalo
Lista las decisiones que el usuario debe tomar.
Asigna una pantalla a cada decisión.
Ordena los bloques por prioridad, no por decoración.
Conecta los wireframes con flechas anotadas.
Error frecuente: representar solo el caso ideal. Corrígelo añadiendo al menos un estado vacío y un error de campo, como una fecha ausente.
Crea un wireframe para cancelar un turno pendiente. Resultado esperado: incluye identificación del turno, acción de cancelar, opción de volver y confirmación explícita antes de finalizar.
Comprueba tu resultado
Pide a otra persona que señale dónde buscaría horarios y dónde confirmaría. Si duda, cambia la jerarquía antes de aplicar color.
Mapa de prácticaEl wireframe permite comprobar estructura, contenido y recorrido antes de elegir colores o detalles. Revisa que cada pantalla ofrezca la información y acción necesarias para la tarea.
Ver la infografía en tamaño completo ↗Fase 1: De la Idea a los Wireframes
Vamos a diseñar una app de gestión de tareas (tipo Todoist simplificado). Empezaremos con wireframes de baja fidelidad para definir la estructura antes de preocuparnos por colores o tipografía.
Pantallas a diseñar
- Splash/Login: pantalla de inicio con opciones de registro e inicio de sesión
- Lista de tareas: la pantalla principal donde el usuario ve sus tareas pendientes y completadas
- Crear tarea: formulario para agregar una nueva tarea con título, fecha y prioridad
- Detalle de tarea: vista expandida con descripción, subtareas y opción de editar/eliminar
- Perfil/Configuración: datos del usuario y preferencias de la app
Creando wireframes en Figma
- Crea un frame iPhone 15 (393×852) para cada pantalla — usa la plantilla de dispositivo de Figma
- Usa solo rectángulos grises, texto negro y líneas — sin colores, sin íconos detallados
- Representa imágenes con rectángulos grises con una X diagonal (placeholder estándar)
- Enfócate en la jerarquía: ¿qué ve el usuario primero? ¿Qué es más importante en cada pantalla?
- Mantén los wireframes simples — si pasas más de 5 minutos en uno, estás añadiendo demasiado detalle
Principios de estructura
- Navegación inferior con 3-4 tabs: Tareas, Calendario, Perfil (máximo 5 tabs en móvil)
- El contenido principal debe estar al alcance del pulgar — la zona inferior es la más accesible
- Usa patrones conocidos: lista scrolleable, FAB (Floating Action Button) para crear, swipe para acciones
- Deja suficiente espacio para el teclado cuando hay campos de texto — diseña pensando en la interacción real
- Incluye estados vacíos: ¿qué ve el usuario cuando no tiene tareas? Nunca dejes una pantalla vacía sin guía
Consejo: Los wireframes no tienen que ser bonitos. Su propósito es definir qué va en cada pantalla y dónde. Si pasas más de 30 minutos en los wireframes de toda la app, es suficiente.
Sigue con Figma desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.