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.

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.

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.