Diseño Visual y Estética: Fundamentos, Accesibilidad y Estilos

Jerarquía Visual y su Aplicación en el Diseño

• Definición: La jerarquía visual es la organización sistemática de los elementos de una interfaz con el objetivo de guiar el ojo del usuario siguiendo un orden de importancia preestablecido.
• Métodos de Implementación: Se logra mediante la alteración estratégica de los siguientes atributos:
  • Tamaño: Elementos más grandes captan la atención primero.
  • Color: El uso de tonos vibrantes destaca componentes críticos.
  • Contraste: La diferencia entre el elemento y su fondo separa la información.
  • Posición: La ubicación en el lienzo determina el flujo de lectura.
• Ejemplo Clásico: Un botón de $"Comprar"$ diseñado con un tamaño grande y un color vibrante frente a un enlace pequeño de color gris para los $"\text{Términos y condiciones}"$ constituye una aplicación clara de jerarquía para priorizar una acción de conversión.

Composición y Estructura Mediante Cuadrículas

• Concepto de Composición: Se refiere a la distribución de los elementos en el lienzo de diseño.
• Principios de la Gestalt: Se utilizan estos principios psicológicos para agrupar elementos que están relacionados entre sí, facilitando la comprensión del usuario.
• La Cuadrícula (Grid): La herramienta estándar para mantener una composición equilibrada y coherente en diversas pantallas es el grid de $12$ columnas. Este sistema permite que el diseño sea consistente independientemente del tamaño del dispositivo.

Fundamentos de la Tipografía en Interfaces

• Principio de Prioridad: La tipografía en interfaces digitales debe priorizar la legibilidad. El objetivo es que el usuario complete su tarea (ya sea leer o actuar) con el menor esfuerzo cognitivo posible.
• Reglas de Tamaño y Longitud de Línea:
  • Desktop: Se recomienda un tamaño base de $16\text{pt}$ y una longitud de entre $50-70$ caracteres por línea para minimizar la fatiga visual.
  • Móvil: Debido al tamaño reducido de la pantalla, la longitud óptima es de $30-40$ caracteres por línea.
• Pantalla vs. Papel: Dado que la resolución de las pantallas es generalmente inferior a la del material impreso, se debe utilizar un tamaño mínimo de $13-16\text{px}$. El texto en pantalla debe ser sistemáticamente más grande que en impresión.
• Espaciado: Para mantener la cohesión visual, se debe establecer un espaciado máximo de $600\text{px}$ entre párrafos.

Accesibilidad y Ceguera de Color (Daltonismo)

• Error Crítico en UI: Depender exclusivamente del color para transmitir información esencial.
• Escenario de Fallo: Un formulario que marca errores únicamente en rojo y aciertos en verde resulta ininteligible para un usuario con daltonismo, ya que no podrá percibir la diferencia cromática.
• Regla de Oro de la Accesibilidad: El color siempre debe estar acompañado de un indicador secundario, como:
  • Texto descriptivo: Mensajes aclaratorios.
  • Iconografía: Uso de un check ($✓$) para aciertos o una X ($✗$) para errores.

Propiedades Clave del Color en UI

• Percepción Initial: El color es uno de los primeros elementos percibidos por el ojo humano, junto con las formas. Al diseñar, se debe descartar cualquier combinación que dificulte la lectura del texto.
• La Rueda de Color: Organiza los colores de forma lógica en primarios, secundarios y terciarios, permitiendo la creación de combinaciones armónicas.
• Atributos Técnicos:
  • Tono (Hue): Es la identidad básica del color (rojo, verde, azul). Cada tono tiene una posición específica en el círculo cromático.
  • Saturación: Representa la intensidad o pureza del color.
    • Alta saturación: Ideal para elementos de llamado a la acción (CTA) como botones de $"\text{Comprar}"$.
    • Baja saturación: Crea tonos sofisticados y sutiles, recomendados para fondos o elementos secundarios.
  • Valor o Brillo (Value): Define qué tan claro u oscuro es un color. Es el factor crucial para generar contraste y establecer la jerarquía visual en pantalla.

Variaciones del Color y Percepción de Profundidad

• Efecto de Volumen: La mezcla estratégica de temperaturas cálidas y frías puede engañar al ojo para percibir volumen y distancia en una pantalla de dos dimensiones.
• Comportamiento sobre Fondos Oscuros:
  • Los colores cálidos (rojo, naranja, amarillo) avanzan hacia el primer plano.
  • Los colores fríos (azul, verde, violeta) retroceden hacia el fondo.
• Comportamiento sobre Fondos Claros:
  • Los colores fríos avanzan al primer plano.
  • Los colores cálidos retroceden al fondo.
• Uso Estratégico: Estos principios deben emplearse para guiar la atención del usuario dentro de la jerarquía visual.

Estándares de Accesibilidad WCAG 2.1 y Contraste

• Referencia Normativa: El diseño de interfaces debe cumplir con las directrices de accesibilidad web WCAG 2.1.
• Contraste: Debe existir un contraste matemático preciso entre el color del texto y el fondo.
• Interpretación de los Ratios ($X:1$):
  • El ratio describe la diferencia de brillo: un ratio de $4.5:1$ significa que el color claro es $4.5$ veces más brillante que el oscuro.
  • Contraste Mínimo ($1:1$): No hay contraste (mismo color para texto y fondo).
  • Contraste Máximo ($21:1$): Negro puro sobre blanco puro.
• Niveles de Cumplimiento:
  • AA: Requiere un ratio mínimo de $4.5:1$ para texto normal y $3:1$ para texto grande o elementos de UI.
  • AAA: Requiere un ratio mínimo de $7:1$ para texto normal y $4.5:1$ para texto grande.

Caso de Estudio: Análisis de Contraste en un Fondo #FFFFFF

Tres equipos diseñaron una app sobre fondo blanco (#FFFFFF) con los siguientes resultados:

• Equipo A:

  • Texto Normal (#555555): Ratio de $4.6:1$. Cumple nivel AA ($\text{mín. } 4.5:1$), pero no alcanza el nivel AAA.
  • Texto Grande (#003366): Ratio de $12.6:1$. Cumple tanto nivel AA como AAA.
  • Íconos y bordes (#555555): Ratio de $4.6:1$. Cumple nivel AA ($\text{mín. } 3:1$) y AAA ($\text{mín. } 4.5:1$) para elementos gráficos.

• Equipo B:

  • Texto Normal (#999999): Ratio de $2.3:1$. No cumple con ningún estándar de accesibilidad.
  • Texto Grande (#3399FF): Ratio de $3.0:1$. Cumple nivel AA, pero falla en AAA.
  • Íconos y bordes (#777777): Ratio de $3.6:1$. Cumple nivel AA, pero falla en AAA.

Sistemas de Color y Tipos de Paletas

• Sistema RGB: En interfaces digitales, se utiliza exclusivamente el modelo Red, Green, Blue (Rojo, Verde, Azul), que genera colores mediante la síntesis aditiva de luz. La suma de $R+G+B$ produce luz blanca. El estándar web es el espacio de color $sRGB$.
• Reglas de Paletas:
  1. El primer color elegido debe ser el primario de la aplicación.
  2. No se deben exceder los $5$ colores en la paleta.
• Tipos de Paletas Principales:
  • Análogas: Colores vecinos en el círculo cromático.
  • Monocromáticas: Variaciones de brillo y saturación de un solo tono.
  • Tríadas: Tres colores equidistantes en el círculo.
  • Complementarias: Colores opuestos en el círculo.
  • Complementarias Divididas: Un color base y los dos adyacentes a su complementario.

Clasificación de Estilos Visuales en UI

• Skeumorfismo (Esquemorfismo): Imitación de objetos del mundo real mediante texturas (cuero, madera) y sombras intensas. Fue fundamental en los inicios del iPhone para facilitar el aprendizaje de interfaces táctiles.
• Flat Design (Diseño Plano): Reacción contra el skeumorfismo. Elimina sombras y texturas, utilizando colores sólidos y formas vectoriales simples.
• Material Design: Evolución del diseño plano introducida por Google. Añade reglas físicas sutiles para indicar profundidad, visualizando los elementos como capas de papel superpuestas.
• Neumorfismo: Estilo minimalista donde los elementos parecen extruidos o esculpidos del mismo material del fondo, utilizando juegos de sombras claras y oscuras para crear volumen.
• Glassmorfismo: Estilo actual que utiliza fondos translúcidos, desenfoque (blur) y bordes finos para imitar el vidrio esmerilado, creando una jerarquía de capas flotantes y modernas.