Fase 2: Del Wireframe al Diseño Visual
Ahora transformamos los wireframes grises en un diseño visual pulido. Vamos a definir la identidad visual, crear componentes reutilizables y aplicar Auto Layout a todo.
Definir el sistema visual
- Paleta de colores: elige un color primario (azul #3B82F6 es seguro), un secundario, grises neutros, y colores de estado
- Tipografía: usa Inter con la siguiente escala — Heading: 24px bold, Subheading: 18px semibold, Body: 16px regular, Caption: 12px regular
- Espaciado: usa múltiplos de 4px (4, 8, 12, 16, 24, 32, 48) para padding y gaps
- Border radius: elige un estilo consistente — 8px para cards, 12px para botones, 50% para avatares
- Crea todos estos como estilos o variables antes de diseñar ninguna pantalla
Componentes a crear
- TaskCard: card de tarea con checkbox, título, fecha, prioridad (variantes: pendiente, completada)
- Button: primario y secundario con variantes de tamaño (sm, md) y estado (default, disabled)
- Input: campo de texto con variantes (default, focus, error) y label integrado
- NavBar: barra inferior con 3 tabs y estado activo/inactivo en cada uno
- Header: barra superior con título de la pantalla y botón de acción
Aplicar Auto Layout a todo
- Cada pantalla completa es un frame con Auto Layout vertical (dirección: columna)
- La lista de tareas es un Auto Layout vertical con gap de 8px entre cards
- Cada TaskCard usa Auto Layout horizontal para checkbox + texto + fecha en línea
- Los botones usan Auto Layout con padding horizontal 24px y vertical 12px
- El formulario de crear tarea apila inputs verticalmente con gap de 16px
Consejo: Diseña primero los componentes aislados en una página aparte. Una vez que estén perfectos, úsalos para armar las pantallas. Esto es mucho más eficiente que diseñar componentes 'sobre la marcha'.