Cinco consejos de diseño web para aprovechar mejor la luz y la sombra

Texto original: 5 trucos sencillos para incorporar luces y sombras a tus diseños

La luz y la sombra existen en todas partes en la vida real. Todo lo que ves se refleja en luces y sombras. Visualmente, la luz y la sombra nos ayudan a identificar las cosas y reconocer su material , escala y perspectiva .

Por tanto, si queremos que nuestro diseño web sea más natural, dinámico, real e intuitivo, es muy importante entender correctamente los efectos de luces y sombras. Aquí hay cinco consejos que le ayudarán a aprovechar mejor la luz y las sombras. Usarlas bien puede hacer que su diseño sea más refinado y se destaque de otras páginas.

Un análisis rápido de los principios de iluminación y sombras.

En la imagen de abajo, la fuente de luz proviene de la izquierda. Las luces son las partes más iluminadas y las sombras se encuentran más alejadas de la fuente de luz. La existencia de luces y sombras nos ayuda a percibir una gran cantidad de información sobre el material de la superficie de un objeto .

Pero te preguntarás, ¿qué tiene esto que ver con el diseño web?

Si planea crear interfaces y sitios web ricos y texturizados, las luces y las sombras pueden ayudarlo. Así como muchos artistas tradicionales usan la luz en sus pinturas, usted también puede usarla para darle profundidad e interés visual a sus diseños.

1. Uso de fuentes de luz

Cabe decir que a la hora de utilizar iluminación, saber dónde está la fuente de luz es la cuestión básica más importante. La posición de la fuente de luz determina la ubicación de las luces y las sombras (aunque en el diseño web puedes romper estas reglas). En Photoshop, puede utilizar "Iluminación global" en los estilos de capa para asegurarse de que las fuentes de luz de todos los efectos de luz y sombra que cree estén en la misma posición.

Controlar la posición de la fuente de luz puede crear una atmósfera única para el diseño de su página (incluso un simple degradado lineal o radial puede lograr el efecto). Los efectos de luces y sombras también pueden guiar el cambio del centro visual.

Los ejemplos de la web,

Campaign Monitor , utilizan fuentes de luz divergentes para crear un efecto de amanecer.

Icebrrg utiliza iluminación para hacer que la página esté bajo el agua.

Mike Precious utilizó más de una fuente de luz para agregar interés visual y utilizó iluminación con lámparas de mesa en todas partes.

Deaxon tiene una fuente de luz tenue detrás del logotipo, que centra la atención de la página en el logotipo.

2. Degradados

En el mundo real, nada es siempre un tono plano. La luz y la sombra se aferran a todo. Usar degradados es una excelente manera de crear profundidad y autenticidad.

La clave para utilizar degradados es no exagerar . Al dibujar degradados en Photoshop, superponga el degradado en el estilo de capa. Esto garantizará la editabilidad del degradado y, a medida que se escala la capa, el degradado también se puede escalar sin pérdidas.

Ejemplos de la web:

el sitio web de nclud utiliza gradientes sutiles pero efectivos para diferenciar y organizar el contenido.

A primera vista, CSS Ninjas parece utilizar colores planos. Sin embargo, cada área de color tiene en realidad un ligero degradado, lo que crea un fascinante efecto material.

3. Luces

Las luces pueden equilibrar las sombras y deben ubicarse en el borde del objeto cerca de la fuente de luz . Los aspectos más destacados se ignoran en su mayoría porque, si se usan bien, apenas se nota que están ahí. Sin embargo, no todas las situaciones son propicias para la existencia de mechas. Una mecha sutil puede provocar una gran diferencia en el brillo de la superficie de un objeto. Cuanto más "nítido" sea el brillo, más fuerte será el brillo de la superficie del objeto.

Para apreciar los aspectos más destacados, debemos ampliar estos detalles. Al hacer diseños de alto brillo, es una buena idea duplicar el tamaño de su diseño, porque es posible que no pueda darse cuenta de lo que está haciendo cuando se muestra en su escala original.

Los ejemplos en Internet,

Icon Dock y Newism, utilizan blanco translúcido en el borde superior de la página para crear un efecto de resaltado. Aunque es muy discreto, proporciona un gran brillo al diseño.

Todo el mundo debería estar familiarizado con el sitio web de Apple . Pero probablemente no hayas notado el sutil resaltado en la parte inferior del menú de navegación. Es este punto destacado el que le da al menú una sensación de prominencia.

4. Sombras básicas

Al igual que los degradados, los diseñadores web también utilizan ampliamente las sombras paralelas. Cuando se usan correctamente, las sombras paralelas realmente pueden agregar profundidad visual y textura a un diseño. La clave es no exagerar ni abusar de él.

La profundidad de la sombra depende de la dirección y la intensidad de la luz, así como de la distancia del objeto a la superficie de proyección. Cuanto más fuerte es la luz, más nítida y oscura es la sombra; cuanto más débil es la luz, más débil es la sombra.

Ejemplos en Internet

Hay demasiados ejemplos de proyección en Internet.

LinkedIn agrega una sombra extremadamente sutil en la parte inferior de la barra lateral para crear una sensación de profundidad.

Google , quizás la página más difícil de diseñar en Internet, todavía utiliza una sombra sutil en su página de búsqueda.

5. Sombras avanzadas

Para dar a los objetos una sensación tridimensional, tienes muchas opciones además de las sombras simples. Las sombras largas pueden cambiar drásticamente las relaciones espaciales de los objetos en la página.

En el siguiente ejemplo, después de que a la misma lata de Coca-Cola se le dan diferentes sombras y partes oscuras, toda la posición espacial parece completamente diferente .

El ejemplo de Internet,

Emotions de Mike, utiliza inteligentemente sombras (e iluminación) para transformar literalmente una página plana en un suelo.