Diseño de una página o flujo web
Lee web-craft primero. Un DESIGN.md existente o sistema de diseño es la autoridad: síguelo, no inventes una nueva dirección para un producto existente.
1. Dirección antes del código (nuevos productos y nuevas superficies grandes)
Decide y escribe brevemente:
| Decisión | Respuesta |
|---|---|
| Usuario y tarea | ¿De quién es la tarea que esta superficie facilita? |
| Prioridad | ¿Qué debe verse y hacerse primero? |
| Composición | Flujo editorial, diseño dividido, espacio de trabajo denso, exhibición de producto o algo más |
| Tipografía | Carácter, escala, longitud de línea, cobertura de escritura para cada idioma planeado |
| Material visual | Imágenes reales de producto, fotografía, ilustración, diagramas o liderado por tipografía |
| Superficie y densidad | Bordes, tono, espacio en blanco, densidad de datos, ritmo de página |
| Movimiento | Retroalimentación funcional, más movimiento narrativo solo donde el producto lo necesita |
| Detalle distintivo | Uno o dos detalles consistentes que apoyen la marca |
Referencias: la marca existente es primero, luego lo que el usuario proporcionó. Para una nueva dirección, elige algunas fuentes adecuadas y di qué contribuye cada una (densidad, fotografía, ritmo, interacción, tipo). Adjetivos como "moderno" o "limpio" no son una decisión. No copies logotipos, texto ni una composición completa. Las opciones para un nuevo producto deben diferir en composición y prioridad, no solo en color. Detalles: references/direction-and-references.md, references/composition.md, references/typography.md.
2. Tokens
Color (semántico, claro y oscuro), escala tipográfica, espaciado, radio, elevación y movimiento viven como tokens en un solo lugar y se asignan al tema del kit. La elevación es limitada: bordes y tono de superficie primero, algunos tokens de sombra de baja opacidad de una sola capa para capas flotantes, superficies más claras en lugar de sombras en modo oscuro, y sin box-shadow animado. Detalles: references/tokens-color-elevation.md.
3. Copia y jerarquía
Cada texto hace un trabajo. Sin ceja sobre un encabezado por defecto (solo progreso, una fecha, un objeto padre o contexto legal; las etiquetas de nivel como "Premium" se convierten en una insignia sobre la característica). Los subtítulos se quedan solo para alcance, resultado, riesgo o un hecho concreto. Los niveles de encabezado siguen la estructura, no el tamaño de fuente. Los marcadores de posición nunca reemplazan las etiquetas. Los botones dicen lo que sucede. Detalles: references/copy-hierarchy.md.
4. Estados
Construye una matriz de estados para cada superficie de datos y formulario: carga inicial (esqueleto adaptado al layout, retrasado para evitar un destello, estático con movimiento reducido), vacío (primer uso vs. sin resultados), error con reintento y datos conservados, actualizando, error de paginación, enviando, éxito, prohibido, no encontrado, sin conexión. Detalles: references/states.md.
5. Formularios
Validar al perder foco, revalidar al cambiar una vez que se muestra un error, comprobaciones asíncronas con debounce. Al enviar con errores: enfocar el primer campo inválido, desplazarlo a la vista debajo de cualquier encabezado fijo, abrir la sección o paso colapsado que lo contiene y mostrar un resumen de errores en formularios largos. Los mensajes dicen qué está mal y cómo solucionarlo, se colocan junto al campo y están vinculados con aria-describedby. El botón de envío se deshabilita solo mientras se envía. Los errores de campo del servidor caen en sus campos con el mismo desplazamiento y enfoque. Detalles: references/forms.md.
6. Movimiento
Llena la matriz de movimiento (references/motion-matrix.md) antes de elegir una biblioteca:
- Botones y enlaces: hover donde existe hover, presionado, focus-visible, cargando, deshabilitado.
- Diálogos, paneles laterales, menús, popovers, toasts: siempre una animación de entrada y salida (opacidad más una pequeña escala o traslación, la salida finaliza antes de desmontar), trampa de enfoque y retorno, descarte. Detalles:
references/overlays.md. - Listas: inserción, eliminación y reordenación son comprensibles.
- Gráficos: una breve animación de dibujo en la primera vista, transiciones al cambiar datos, ninguna por encima de un tamaño de datos medido, ninguna con movimiento reducido; tooltips accesibles por teclado y una alternativa de tabla. Detalles:
references/charts.md. - Narrativa de marketing: limitada, específica del producto, nunca oculta contenido detrás de una animación.
La duración, la curva de aceleración y la distancia provienen de los tokens. No todas las páginas reciben el mismo escalonado de entrada. Sin retraso artificial en formularios o pantallas de datos. El movimiento reducido se maneja de forma centralizada y cubre CSS, bibliotecas y video.
7. Responsivo
Los puntos de quiebre siguen al contenido. Define qué hacen la navegación, filtros, tablas, acciones fijas, diálogos y popovers en una pantalla estrecha. Verifica 320 px, texto traducido largo, zoom al 200%, táctil y teclado. Un diálogo web no se convierte en una hoja inferior de React Native por defecto. Detalles: references/responsive.md.
8. Verifica el resultado
Míralo en un navegador en anchos móvil y de escritorio, en ambos temas y ambos idiomas, solo con teclado y con movimiento reducido activado. Una captura de pantalla estática no revisa el movimiento; interactúa con él.
Cuando un kit se reutiliza en productos muy diferentes, ejecuta la prueba de divergencia en references/pilot-divergence.md.