Las sombras son clave en el diseño de interfaces, ¡las usamos todo el tiempo! Ya sea sombra de caja, paralela o cualquier otra variación que se te ocurra, seguro te las encontrás seguido. Pero, ¿cómo hacer que esas sombras realmente sumen a tu diseño? Esa es la idea de esta guía: te doy todos los tips para que te conviertas en experta de las sombras en UI.
Arranquemos comparando las sombras en la UI con las sombras que vemos en la naturaleza. Como seres humanos, estamos tan acostumbrados a cómo funcionan en la vida real que llevar esa lógica a nuestros diseños hace que todo se vea más natural y usable. Así que sí, si querés que tu interfaz sea funcional y fácil de usar, imitar cómo se ven las sombras en la naturaleza es la clave.
Muchos principios de diseño están inspirados en la naturaleza, como la famosa proporción áurea, ¡o incluso que nos gustan más los números impares que los pares! Y con las sombras pasa lo mismo. Vamos a ver cómo se comportan en la vida real, algunas reglas básicas, y terminar con un template para que puedas arrancar a full.
Comparando las sombras naturales con las de UI/UX
Las sombras están en todas partes en la naturaleza, y entender cómo funcionan puede hacer una gran diferencia en tus diseños. Imitar lo que vemos en la realidad, como las sombras proyectadas por el sol o cualquier fuente de luz, nos ayuda a crear interfaces más intuitivas y fáciles de usar.
Te dejo acá un ejemplo de cómo las sombras funcionan en la naturaleza y cómo las podemos aplicar al diseño de interfaces:
Principios del diseño natural en UI/UX
Muchos conceptos que usamos en diseño tienen su origen en la naturaleza. Un ejemplo clásico es la proporción áurea. También es curioso cómo nos atraen más los números impares que los pares, ¿no? ¡Cosas que aplicamos sin darnos cuenta! Lo mismo pasa con las sombras: replicar cómo funcionan en la realidad te va a ayudar a generar interfaces mucho más «cómodas» para el usuario.
¿Cómo funcionan las sombras en la naturaleza?
Hay tres factores clave a considerar:
- La fuente de luz: Puede ser el sol, una lámpara o incluso una superficie reflectante.
- El objeto que recibe la luz: Este proyecta su sombra sobre una superficie.
- La superficie de la sombra: El lugar donde se proyecta la sombra.
Pistas visuales en la naturaleza que aplicamos al diseño:
- Desenfoque de la sombra: Aumenta cuando la fuente de luz está más cerca del objeto y la superficie de la sombra.
- Extensión de la sombra: Se amplía a medida que el objeto se aleja de la superficie de la sombra.
- Color de la sombra: Las sombras no son negras en la naturaleza, simplemente oscurecen la superficie donde se proyectan. Aplicamos lo mismo en el diseño: usar grises o tonos más oscuros del color de la superficie.
Para verlo más claro, mirá este gráfico donde te muestro cómo cambian las sombras según la luz:
Cómo usar sombras en UI/UX
Al igual que otros principios de diseño, las sombras deben imitar lo que conocemos de la vida real para que nuestros ojos las interpreten naturalmente. Esto es lo que tenés que tener en cuenta:
- Desenfoque: Útil cuando apilás varios objetos. El objeto más elevado tendrá una sombra más difusa.
- Compensación o desplazamiento: La distancia x e y de la sombra depende de la posición de la fuente de luz. Una luz más directa reduce el desplazamiento.
- Color: En UI, las sombras no son negras, siguen el color de la superficie sobre la que se proyectan. Usá opacidades bajas (entre 10% y 30%) o tonos de gris.
Este gráfico muestra cómo varía la opacidad de las sombras según el color de la superficie:
Usar sombras en modo oscuro
El modo oscuro es tendencia en diseño, y las sombras en este contexto necesitan más opacidad para diferenciarse del fondo oscuro. Si no, las sombras pueden perderse. Un truco: combiná sombras más intensas con reflejos de luz para crear un mejor contraste.
Acá te dejo unos ejemplos de cómo las sombras en modo oscuro pueden cambiar la jerarquía visual:
Configurar sombras en tus proyectos de UI/UX
Ahora que sabés cómo funcionan, te dejo unos pasos para aplicarlas en tus proyectos:
- Fuente de luz: Definí desde dónde viene. ¿De arriba? ¿De un lado? ¡Eso tiene que ser consistente!
- Jerarquía visual: Preguntate si los elementos «flotan» o no y cómo eso afecta a las sombras que proyectan.
- Creador de sombras: Evitá las opciones predeterminadas de Figma o Sketch. Creá sombras manualmente agregando capas debajo de tus objetos y ajustando el desenfoque, desplazamiento y color a tu gusto.
Para que te resulte aún más fácil, podés descargar mi kit de sombras que incluye componentes reutilizables para botones y tarjetas. Descargalo acá: https://peperinadev.com/producto/sombras-ui-kit/
¿Qué te parece? ¡Espero que esta guía te ayude a mejorar tus diseños de UI/UX con sombras más realistas y funcionales!
