| name | modern-ui-design |
| description | Referencias y criterios para crear interfaces contemporáneas, con identidad visual, mejor jerarquía y menos soluciones genéricas. |
Modern UI Design
Objetivo
Evitar interfaces planas, previsibles o intercambiables y empujar una direccion visual con personalidad, ritmo y criterio.
Construir primero la direccion visual
- Definir 2 o 3 principios visuales antes de maquetar.
- Elegir una tensión clara: editorial, productiva, sobria, expressiva o técnica.
- Alinear tipografía, color, composición y motion con esa dirección.
Composicion
- Crear jerarquía con contraste de tamaño, peso, ritmo y espacio.
- Usar layouts con intencion, no solo pilas de tarjetas equivalentes.
- Alternar bloques densos y bloques de respiro para evitar monotonia.
- Introducir anclas visuales: encabezados fuertes, paneles clave, gráficos, módulos destacados.
Color y materialidad
- Definir un sistema cromatico reconocible, no solo un color primario sobre fondo neutro.
- Usar fondos, acentos, bordes y superficies para separar capas de informacion.
- Evitar combinaciones planas y sin profundidad cuando la interfaz necesite jerarquía.
Tipografía y tono
- La tipografía debe marcar el carácter de la interfaz, no limitarse a "texto funcional".
- Variar escala, peso y ancho para construir ritmo visual.
- Evitar interfaces donde todo se vea con el mismo peso y tamaño.
Componentes y estados
- Disenar estados vacio, loading, error, exito y disabled desde el principio.
- Variar componentes cuando el contenido lo pida; no forzar el mismo patron para todo.
- Priorizar claridad en formularios, feedback, tablas y dashboards complejos.
Motion e interaccion
- Usar motion para reforzar jerarquía, foco y continuidad.
- Evitar microanimaciones decorativas sin funcion.
- La interaccion debe explicar el sistema, no distraer de el.
Responsive
- Resolver desktop y mobile como composiciones hermanas, no como una simple compresion.
- Replantear densidad, prioridad y navegacion por breakpoint.
Anti-patrones
- Hero, cards y CTA clonados sin criterio.
- Fondo blanco plano con una rejilla uniforme para todo.
- Componentes identicos aunque el contenido tenga jerarquias distintas.
- Pantallas que solo resuelven el happy path.
