No hay forma de escapar de las luces y sombras: están dondequiera que mires. Todo lo que ves refleja luz y proyecta una especie de sombra. Visualmente, la luz y la sombra nos ayudan a darle sentido a lo que vemos y nos ayudan a comprender textura, dimensión y perspectiva. Entonces, mientras intentamos hacer que nuestros diseños en la Web sean más naturales, conmovedores e intuitivos, una buena comprensión de la luz y la sombra es muy importante. A continuación presentamos 5 formas de utilizar mejor la luz y las sombras para pulir los diseños de sus páginas y hacer que se destaquen en la pantalla.
No hay forma de escapar de las luces y las sombras: están dondequiera que mires. Todo lo que ves refleja luz y proyecta una especie de sombra. Visualmente, la luz y la sombra nos ayudan a darle sentido a lo que vemos y nos ayudan a comprender textura, dimensión y perspectiva. [Actualizado el 4 de enero de 2017]
Entonces, mientras intentamos hacer que nuestros diseños en la Web sean más naturales, conmovedores e intuitivos, una buena comprensión de la luz y la sombra es muy importante. A continuación presentamos 5 formas de utilizar mejor la luz y las sombras para pulir los diseños de sus páginas y hacer que se destaquen en la pantalla.
Una anatomía Rápida de Luces y Sombras #
En el diagrama simple a continuación, podemos ver que la fuente de luz proviene de la izquierda. Lo más destacado es donde la luz es más fuerte y las sombras caen en el lado más alejado de la fuente de luz. La apariencia de luces y sombras nos dice mucho sobre las superficies y texturas de la imagen.
¿Pero qué tiene esto que ver con el diseño web?
Si estás intentando diseñar interfaces y sitios web ricos y táctiles, la luz y la sombra son tus amigas. De la misma manera que muchos artistas clásicos hacían que sus pinturas saltaran del lienzo, puedes utilizar la luz para dar a tus diseños profundidad e interés visual. Entremos en ello.
#
Quizás la parte más importante de trabajar con iluminación es saber de dónde provienen las luces. Lo más probable es que la fuente de luz determine dónde caen las luces y las sombras (aunque con el diseño web puedes permitirte el lujo de alterar estas reglas en algunos lugares). Si estás trabajando en Photoshop, puedes utilizar el efecto de «luz global» para que todos tus efectos de iluminación sigan la misma dirección de luz.
Controlar las fuentes de luz en sus diseños (aunque sea solo con un degradado lineal o radial) puede ayudar a crear atmósfera en los diseños de sus páginas. También puede ayudar a dirigir la vista a un punto focal del diseño.
EJEMPLOS EN LA WEB #
¡IKEA sigue creciendo! por Jason Zigrino
UI de tiros de regate por Worawaluns
#
En el mundo real, muy pocas cosas tienen un tono plano. La luz y la sombra están en todo. El uso sutil de degradados es una excelente manera de proporcionar profundidad y hacer que las cosas cobren vida en la pantalla.
La clave con los degradados es no exagerar. Si está utilizando Photoshop, utilice estilos de capa para sus degradados. Esto te da la libertad de editarlos en cualquier momento; también significa que si cambia el tamaño del elemento, el degradado también cambiará de escala.
EJEMPLOS EN LA WEB #
Este sitio web de librería de Dwinawan es una lección sobre el uso sutil pero efectivo de degradados para separar y organizar contenido.
Aplicación web de música de Juraj Molnár
#
Las luces pueden ayudar a equilibrar las sombras y deben usarse en los bordes de los objetos más cercanos a la fuente de luz. Los aspectos más destacados a menudo se pasan por alto porque, cuando se usan de manera efectiva, ni siquiera notas que están ahí. Y aunque no es adecuado para todas las situaciones, un pequeño detalle puede marcar la diferencia a la hora de pulir una interfaz. Cuanto más «nítida» sea la iluminación, más brillante aparecerá la superficie.
Para apreciar realmente los aspectos más destacados, debemos acercarnos un poco. Un buen truco para agregar luces es trabajar al 200% o más, porque al 100% puede ser difícil ver claramente lo que estás haciendo.
EJEMPLOS EN LA WEB #
Icon Dock y Newism utilizaron una línea blanca semitransparente en el borde superior del elemento de la página para resaltarlo. Apenas se nota, pero añade un toque de brillo al diseño.
#
Al igual que los degradados, las sombras paralelas se han convertido en un elemento básico de la mayoría de los diseñadores web. Las sombras realmente pueden agregar profundidad visual y textura cuando se usan de la manera correcta. La clave es no exagerar.
Las cualidades de una sombra dependen de la dirección y la intensidad de la luz, así como de la distancia entre el objeto y la superficie donde se proyecta la sombra. Cuanto más fuerte es la luz, más oscura y nítida es la sombra. Cuanto más suave es la luz, más suave es la sombra.
EJEMPLOS EN LA WEB #
Cuando se trata de ejemplos en línea de sombras paralelas, simplemente hay demasiados sitios web para elegir. Cuando se usan inteligentemente, pueden agregar un toque de dimensión incluso al diseño más minimalista.
Página de producto Nike por Ilja Miskov
#
Puedes hacer mucho más allá de las sombras paralelas básicas para darle a los elementos una tercera dimensión. Las sombras más largas son una excelente manera de cambiar la relación espacial entre los objetos de una página.
En los ejemplos siguientes, la misma lata de Coca-Cola tiene posiciones completamente diferentes en el espacio dependiendo de su sombreado.
EJEMPLOS EN LA WEB #
Emociones de Mike utiliza inteligentemente la sombra (y la luz) para convertir la página plana en un suelo.
