Diseña las pantallas principales de la app

Concepto clave

Diseñar las pantallas principales de una app de productividad es como planificar la cocina de un restaurante eficiente. Necesitas que los elementos esenciales estén al alcance de la mano, que el flujo de trabajo sea lógico y que cada espacio cumpla una función específica. En Figma, esto se traduce en crear wireframes de baja fidelidad que definan la estructura básica, luego evolucionarlos a diseños de alta fidelidad con componentes reutilizables.

Las pantallas principales suelen incluir: una pantalla de inicio (dashboard), una de lista de tareas, una de creación/edición y una de configuración. Cada una debe resolver un problema del usuario, como visualizar su progreso diario o agregar rápidamente una nueva tarea. Usar Auto Layout desde el principio asegura que tus diseños sean consistentes y se adapten a diferentes contenidos, similar a cómo los estantes ajustables en una cocina permiten almacenar ingredientes de varios tamaños.

Cómo funciona en la práctica

Sigue estos pasos para diseñar una pantalla de lista de tareas en Figma:

1. Abre Figma y crea un nuevo frame con las dimensiones de un móvil (ej. 375x812 píxeles).
2. Dibuja un rectángulo en la parte superior para la barra de título. Usa Auto Layout (Shift+A) para agregar un ícono de menú, un título centrado y un botón de agregar.
3. Debajo, crea un componente de tarjeta de tarea: un rectángulo con un checkbox, texto de descripción y fecha. Aplica Auto Layout vertical con espaciado de 16 píxeles.
4. Duplica este componente 3-4 veces y agrupa las copias con Auto Layout vertical. Esto simula la lista de tareas.
5. Añade un botón flotante en la esquina inferior derecha para "Nueva tarea". Usa constraints para fijarlo a la derecha y abajo.

Ejemplo de datos para las tarjetas:

Caso de estudio

Imagina que estás diseñando "TaskFlow", una app de productividad para equipos pequeños. La pantalla principal (dashboard) necesita mostrar:

• Un resumen de tareas por estado (ej. 5 pendientes, 3 en progreso).
• Una lista de proyectos activos con progreso en barras.
• Notificaciones recientes.

En Figma, creamos un frame de dashboard con:

1. Un encabezado con el logo y el nombre del usuario.
2. Tres tarjetas con Auto Layout horizontal para los contadores de tareas, usando íconos y números grandes.
3. Una sección de proyectos con componentes de barra de progreso reutilizables.
4. Una lista de notificaciones con Auto Layout que se expande según el contenido.

Dato importante: En pruebas de usabilidad, los usuarios prefieren dashboards con no más de 6-8 elementos clave para evitar sobrecarga cognitiva.

Errores comunes

• No usar Auto Layout desde el inicio: Esto lleva a diseños desalineados que son difíciles de mantener. Solución: Aplica Auto Layout a cada grupo de elementos relacionados, como una fila de botones.
• Sobrecargar pantallas con demasiada información: Como poner 20 tareas en una lista sin paginación. Solución: Limita a 7-10 items visibles y añade scroll o paginación.
• Ignorar la jerarquía visual: Todos los elementos tienen el mismo tamaño o color, confundiendo al usuario. Solución: Usa tamaño, color y espaciado para destacar acciones primarias (ej. botón "Agregar" más grande).
• No considerar estados diferentes: Diseñar solo el estado "ideal" sin vacíos o errores. Solución: Crea componentes para estados como lista vacía o error de conexión.

Checklist de dominio

1. He definido al menos 3 pantallas principales (ej. dashboard, lista, creación) en wireframes de baja fidelidad.
2. He aplicado Auto Layout a todos los grupos de elementos repetitivos, como listas o filas de botones.
3. He creado componentes reutilizables para elementos comunes (tarjetas, botones, barras de progreso).
4. He usado constraints para elementos fijos (como botones flotantes) en frames responsivos.
5. He probado la jerarquía visual con usuarios o colegas para asegurar claridad.
6. He incluido estados alternativos (vacío, error, carga) en mis diseños.
7. He documentado mis decisiones de diseño en notas dentro de Figma.

Diseña la pantalla de creación de tareas para TaskFlow

Crea una pantalla de creación de tareas en Figma que permita a los usuarios agregar rápidamente nuevas tareas. Sigue estos pasos:

1. Abre tu proyecto de Figma del módulo o crea un nuevo frame móvil (375x812 px).
2. Diseña un formulario con los siguientes campos: Título (obligatorio), Descripción (opcional), Fecha de vencimiento, Prioridad (alta/media/baja), y Etiquetas.
3. Usa Auto Layout para organizar los campos verticalmente con espaciado consistente (ej. 24 px entre secciones).
4. Para el campo de Prioridad, crea un grupo horizontal de 3 botones con Auto Layout y etiquétalos como Alta, Media, Baja.
5. Añade dos botones al final: "Cancelar" y "Guardar". Usa Auto Layout horizontal para alinearlos y diferencia el botón principal (Guardar) con color o tamaño.
6. Aplica constraints para que el formulario se desplace si el contenido excede la pantalla, pero los botones permanezcan accesibles.
7. Guarda este diseño como un componente para reutilizar en otras pantallas.

• Usa placeholders en los campos de texto para guiar al usuario, como "Escribe el título aquí".
• Considera agregar un selector de fecha nativo o personalizado para el campo de vencimiento.
• Prueba el Auto Layout cambiando el contenido de descripción para ver cómo se ajusta el formulario.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.