Diseño mobile-first
"El 90% del tráfico se espera de dispositivos móviles." — Perfil de desarrollo MAMB
Principios
Zona del pulgar (Thumb Zone)
Todos los elementos interactivos críticos (botones, filtros, navegación) se sitúan en el tercio inferior de la pantalla.
Touch targets
- Mínimo 48×48 px (estándar WCAG).
- Separación de al menos 8 px entre targets adyacentes.
Micro-interacciones
Cada acción (tap, hover, carga) tiene feedback visual instantáneo.
Gestos nativos
- Swipe entre obras en el detalle.
- Pull-to-refresh en la galería.
- Drag-down para cerrar modales tipo drawer.
Paleta de marca
| Token | Hex | Uso |
|---|---|---|
brand-blue | #1E3A8A | Headers, CTAs, estado activo, FAB |
brand-grey | #F3F4F6 | Tarjetas, fondos de sección, inputs |
surface | #FFFFFF | Fondo principal |
Stepper de subida
La página /upload guía al usuario en 3 pasos con un stepper claro y
controles optimizados para el pulgar:
Paso 1 — Info: el formulario usa inputs grandes, separados, pensados para una sola mano.
Paso 2 — Estilo: grid de 4 opciones con preview del estilo aplicado.
La paleta se replica en la documentación Docusaurus (
--ifm-color-primaryensrc/css/custom.css).
Estética
Glassmorphism suave en la Bottom Nav y modales: backdrop-blur de
Tailwind para una sensación premium sin perder legibilidad.
Performance
| Métrica | Objetivo |
|---|---|
| LCP (Largest Contentful Paint) | < 2.5 s en 4G |
| INP (Interaction to Next Paint) | < 150 ms |
| CLS (Cumulative Layout Shift) | < 0.1 |
Técnicas
<Image />de Next.js con WebP/AVIF ypriorityen el hero.next/dynamicpara TensorFlow.js y componentes pesados.- Skeleton screens que imitan la estructura real (nada de spinners genéricos).
- Lazy load de modelos TF fuera del LCP.
Checklist del diseñador
- ¿Se puede usar con una sola mano?
- ¿Carga en < 2 s en 4G?
- ¿Los estados de carga son placenteros?
- ¿Se siente como app instalada, no como web antigua?
- ¿La jerarquía visual destaca el botón "Subir Obra"?
- ¿El procesamiento de IA tiene feedback de progreso claro?