Crea layouts de UI y componentes de grado de producción con espaciado deliberado, jerarquía tipográfica, aplicación de color y diseño de movimiento para que la interfaz comunique estructura y estado claramente. Esta habilidad se aplica cuando se construyen nuevas secciones de UI, se-rediseñan páginas existentes o se establecen patrones de componentes que necesitan sentirse intencionales y cohesivos en lugar de defaults de una librería de componentes.
Casos de uso
- Re-diseñar un sitio de marketing o landing page donde la diferenciación visual importa para la percepción de marca
- Construir una nueva página de funcionalidad desde cero y querer establecer una dirección visual coherente antes de la implementación
- Creando un componente de sistema de diseño que necesita manejar múltiples estados (default, hover, focus, disabled, loading) consistentemente
- Puliendo una interfaz existente que ha acumulado deuda visual y se siente genérica o inconsistente
- Prototipando un nuevo patrón de interacción que involucra animación o movimiento y necesita ser validado con los interesados
Funciones principales
- Define la dirección visual eligiendo un mood board, escala tipográfica y sistema de color antes de tocar el layout
- Establece jerarquía de contenido y ritmo visual usando whitespace, contraste de escala y alineación en lugar de elementos decorativos
- Implementa el layout usando una escala de espaciado sistemática (base de 4px o 8px) para que los elementos se sientan relacionados e intencionales
- Diseña todos los estados interactivos: hover, focus, active, disabled, error, loading para que las transiciones entre ellos se sientan suaves y con propósito
- Verifica accesibilidad: ratios de contraste de color, navegabilidad por teclado y etiquetas de screen reader antes de considerar el diseño completo
Relacionados
Relacionados
1 Entradas indexadas