Los mockups ayudan a hablar de jerarquía y estilo, pero no prueban controles o datos reales. Define una pantalla con el generador de imagen, compárala como imagen y luego implementa. La reserva ficticia es un ejemplo, no un producto funcional.
Una tarea y un estado
Por ejemplo, elegir una cita y revisar su hora. Lista servicio, fecha, huecos, precio y acción principal. Elige un día con un horario seleccionado. No mezcles panel, introducción y compra en una misma imagen.
Áreas de contenido deliberadas
Ejemplo: «Concepto móvil estático de reservas, título claro, servicio arriba, selector de fecha, pocos horarios, resumen de selección y una acción. Espacio amplio, contraste legible, acento tranquilo, controles redondeados comunes, etiquetas breves de muestra, pantalla frontal plana, sin dispositivo». Prioriza estructura sobre decoración.
Un sistema visual pequeño
Registra tipografía, ritmo de espacio, contraste, esquinas y acento. Repite decisiones en otra pantalla y compara selección y no selección. Sustituye cifras o etiquetas importantes. Parecerse a otra app no prueba un sistema completo ni una interacción adecuada.
No infieras comportamiento
Revisa lectura y acción. Considera nombre largo o ausencia de citas, sin llamarlos estados probados. Foco de teclado, tamaño táctil, lectura asistida, errores y adaptación necesitan implementación real.
Construye componentes
Lleva jerarquía a contenido, controles y reglas adaptables. Implementa vacío, carga, validación y éxito con datos reales. Usa texto y controles reales, no toda la imagen como interfaz. Compara móvil y escritorio y guarda la razón de las decisiones.
Entrega del concepto UI
Etiqueta imagen estática, tarea, textos de muestra, decisiones aprobadas y comportamientos pendientes. No dejes que el revisor adivine si el botón funciona.
Después de implementar usa la grabación de producto; para identidad, el kit de marca. Son entregables con verificaciones distintas.


