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'.
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.