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.