Principios del diseño gráfico aplicados a interfaces visuales
Leyes de la Gestalt, jerarquía visual, teoría del color y contraste, y tipografía digital.
1Leyes de la Gestalt en el diseño de UI
La psicología de la Gestalt establece que el cerebro humano tiende a organizar los estímulos visuales en estructuras con sentido global.
| Ley | Idea | Aplicación UI |
|---|---|---|
| Proximidad | Elementos cercanos se agrupan visualmente. | Etiquetas <label> pegadas a su campo de entrada. |
| Semejanza | Elementos con igual aspecto comparten función. | Botones primarios con el mismo color en toda la app. |
| Cierre | El cerebro completa formas incompletas. | Iconografía simplificada reconocible al instante. |
| Región común | Elementos dentro de un límite pertenecen juntos. | Tarjetas (cards) para agrupar contenido relacionado. |
| Continuidad | La vista sigue líneas y trayectorias continuas. | Carruseles y steppers como secuencias fluidas. |
| Figura y fondo | Distinción entre plano frontal y trasfondo. | Modales que oscurecen el fondo para concentrar la atención. |
| Simetría y orden | Los elementos simétricos transmiten estabilidad. | Rejillas equilibradas en formularios. |
| Destino común | Elementos que se mueven igual están agrupados. | Animaciones sincronizadas de un mismo grupo. |
2Jerarquía visual y escaneo de pantalla
Los usuarios escanean interfaces en lugar de leerlas linealmente. Se identifican dos patrones:
Patrón en F
Común en interfaces densas en texto: lectura horizontal superior, bajada por el margen izquierdo y una segunda lectura horizontal más corta.
Patrón en Z
Común en landing pages, dashboards y formularios simples: de superior-izquierda a superior-derecha, diagonal a inferior-izquierda y CTA en inferior-derecha.
Técnicas para establecer jerarquía visual: tamaño (elementos mayores atraen primero), peso tipográfico (negrita destaca), contraste y color (colores saturados captan atención) y espaciado en blanco (incrementa relevancia y legibilidad).
3Teoría del color y contraste
Estructura de una paleta de color en UI:
- Color primario: color corporativo en elementos principales (botones CTA, enlaces, estado activo).
- Color secundario/acento: elementos secundarios, badges, selecciones.
- Colores neutros: grises, blanco y negro para fondos, bordes, superficies y textos.
- Colores semánticos: verde
#2E7D32(éxito), rojo#D32F2F(error/peligro), ámbar#ED6C02(advertencia), azul#0288D1(información).
Herramientas recomendadas: Material Palette, Sanzo-Wada Color Combinations, Vispero Color Contrast Checker.
4Tipografía digital y escala tipográfica
Prioridad: legibilidad y lecturabilidad en múltiples resoluciones.
- Sans-serif (Inter, Roboto, SF Pro, Open Sans): estándar industrial para interfaces digitales.
- Monoespaciadas (JetBrains Mono, Fira Code): exclusivamente para código, valores numéricos tabulares, campos de claves.
px) para texto; usa rem o em para que el texto reescale de forma coherente cuando el usuario aumenta el tamaño de fuente del sistema.:root {
--font-size-xs: 0.75rem; /* 12px - Labels secundarios, tooltips */
--font-size-sm: 0.875rem; /* 14px - Textos secundarios, capturas */
--font-size-base: 1.00rem; /* 16px - Cuerpo de texto estándar, inputs */
--font-size-lg: 1.25rem; /* 20px - Subtítulos, H3 */
--font-size-xl: 1.50rem; /* 24px - Titulares de sección, H2 */
--font-size-2xl: 2.00rem; /* 32px - Títulos principales, H1 */
}✓Para saber si lo has entendido
Adaptado de 2. Principios del diseño gráfico.