Diseño con luces y sombras: 10 consejos súper efectivos que deberías probar [con casos prácticos]

light-and-shadow-10-tips-superefectivos-para-disenar-con-luces-y-sombras

¿Alguna vez te has tomado un momento para ver cómo en un haz de luz por la ventana, como cambia los colores de los objetos y proyecta sombras?

¿A poco no? Me atrevo a decir que la mayoría de nosotros estamos tan acostumbrados a ver las luces y sombras que ni siquiera sabemos cómo actúan. Independientemente que estemos al tanto de su función, la luz y sombra son ayudas visuales con las cuales todos interactuamos a diario, pues nos dan información sobre las figuras, distancias, posición, textura y muchos otros atributos físicos y táctiles.

Luces y sombras en el diseño: ventajas y desventajas

Prestarle atención a la relación que tienen las luces y sombras puede ayudarnos a darle más realismo a nuestros diseños. A no ser que tengas una impresora 3D en tu casa, la mayoría de nosotros solo diseñamos en dos dimensiones, pero como estamos tan acostumbrados a ver las cosas en tres dimensiones, eso a veces crea una desconexión visual entre lo que estamos habituados a ver en nuestra vida cotidiana y los que vemos en un papel o pantalla. La única forma de crear una especie de puente para esa desconexión es a través de luces y sombras.

shadow-1-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Martino Pennati

Sin embargo, y esto es muy importante, si has visto diseños en internet, seguro que sabes lo fácil que es exagerar los efectos de luces y sombras. De hecho, un diseñador admitió en una entrada muy divertida de su blog: “Confessions of a Drop-Shadow Addict” (“Confesiones de un adicto a las sombras”), que en esta era donde el diseño se hace con tan solo unos botones y clics, es muy fácil agregar un efecto y luego otro y así sucesivamente, sin pensar en el beneficio que le proporcionen al diseño.

Dicho eso, chequemos unas ventajas y desventajas sobre este tema:

La luz y sombra puede agregar atributos como profundidad, dimensión, perspectiva, realismo e interés visual a tus diseños, lo que a su vez causa que los elementos de tu diseño salten de la página.

Pero…es muy fácil dejarse llevar. Exagerar con estos efectos es la forma más fácil de hacer que un diseño pase de excelente a poco profesional y naco.

Para resumir, el secreto para usar la luz y sombras de una forma ingeniosa conlleva dos cosas: motivo y sutileza. Primero, el efecto que le agregues debe tener un motivo específico que tenga sentido en tu diseño y después hay que aplicarlo tomando como base el dicho “menos es más”. Si usas un efecto que vino programado en el software de diseño que uses, los ajustes son todo menos realistas (sobre todo en las sombras) así que no te dejes guiar por ellos y trata de ponerlos más suaves y sutiles.

Cómo funcionan las luces y sombras: breve resumen

Antes de sugerirte cómo puedes incorporar la luz y sombras en tus diseños, es mejor que tengas un conocimiento básico de cómo están compuestas, algo que normalmente estudian los artistas y fotógrafos estudian para poder crear sus obras, pero que también ayuda a los diseñadores gráficos y web a hacer un gran uso de de los efectos de luz y sombras.

shadow-2-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

En el diagrama de arriba, están unos términos clave, que definiremos brevemente:

  • Fuentes de luz: Si en cualquier objeto ves sombras o reflejos, entonces debe haber una fuente de luz y sí, suena obvio, pero en la mayoría de diseños (que no sean ilustraciones con un sol, luna, lámpara, etc.), esa fuente de luz no es visible. Sin embargo, determinando la posición de una fuente de luz imaginaria y arreglando los efectos para que parezcan como si fueron causadas por la misma fuente, el resultado será un diseño más realista y consistente, no uno en el que se le aplicaron los efectos al azar.
  • Reflejo: Es donde la luz brilla más sobre un objeto (está más cerca de la fuente de luz).
  • Sombra propia: La parte más oscura del objeto (está más lejos de la fuente de luz), que se conoce así por el hecho que las sombras no son solo una mancha de color, sino que varían de tonalidad.
  • Proyección de sombra: A diferencia del concepto anterior (que está exactamente sobre el objeto), las proyecciones las crea el objeto cuando bloquea la fuente de luz y van en la misma dirección que la fuente de luz.

Este resumen, a pesar de ser muy básico, te dará un punto de partida para que utilices adecuadamente las luces y sombras. Ahora sí, pasemos a lo que importa, los consejos para aplicar luces y sombras en tus diseños:

01. Utiliza color para crear profundidad

El color solo puede ser una gran forma de crear la ilusión de claridad y oscuridad, o sea, sin tener que recurrir a efectos predeterminados. Particularmente, poner en capas varias tonalidades del mismo color puede crear una cierta profundidad o distancia y eso es porque, para nuestros ojos, los colores claros se alejan, mientras que los colores oscuros se adelantan.

Las siguientes ilustraciones plasman este concepto a la perfección. Observa cómo las montañas son más oscuras mientras están más cerca, pero luego se van aclarando y después se desvanecen en el horizonte.

shadow-3-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Harry Nesbitt

Además, estos diseños también cuentan con otros aspectos de luz y color. Las temperaturas de color que el diseñador eligió para cada panel realzan mucho la impresión de luz y oscuridad, al igual que los degradados sutiles en el cielo dan esa sensación de las horas del día y los tipos de luz acorde a ellos (ej.: el brillo del amanecer contra lo frío de la luz de la luna). Hablando de degradados…

02. Agrega un degradado a tu fondo

Este punto es mejor explicarlo con un ejemplo: enciende una lámpara en tu casa y mira la pared más cercana a ella… ¿Te das cuenta como no es solamente un color? La parte de la pared que está más cerca de la lámpara quizás se vea más claro, mientras que se va oscureciendo a medida que te alejas. Si estás en una recamara con una pared azul y enciendes la luz, verás tonos de gris, azul o morado. Independientemente de donde te encuentres, el punto es que raramente la luz hace que un objeto se vea de un solo color.

Llevando esto a la práctica, una de las formas de crear ese dinamismo con los colores es agregando un degradado a un fondo u otra parte importante de tu diseño  y por degradado, piensas en un sitio web de los años 90 en el que el texto es imposible de leer, ese es un mal uso de la técnica. Cuando los degradados se usan bien, pueden agregar sutiles variaciones de color (como ya se mencionó), suavizar/atenuar sombras o formar una luz que brilla sobre una cierta área de tu diseño (en especial con degradados radiales).

Debajo, el degradado radial de esta landing page cumple varios propósitos. La parte más clara del degradado hace ver como si una luz brilla desde arriba, al mismo tiempo que hace más visible la sombra que proyecta el teléfono. Combinándolos, ambos efectos más el reflejo le dan al teléfono un aspecto 3D, como si pudieras tocarlo.

shadow-4-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Hoang Nguyen

03. Utiliza toques de luz para llamar la atención

En un diseño, los reflejos le dan una mayor visibilidad a ciertos elementos, por eso es que siempre te llaman la atención y al mismo tiempo, hacen que los elementos se vean más realistas, tal y como se mencionó en el punto anterior. Si quieres reflejar varias cosas de tu diseño, recuerda tomar en cuenta dos cosas: la fuente de luz imaginaria y la consistencia de los diseños.

Chécate los reflejos del logotipo “801” en la presentación de los siguientes productos. Solamente son líneas de color ligeramente más claras que el color primario de los números, pero le dan una visibilidad e interés visual extra al punto central del diseño.

shadow-5-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Emrich Office

04. Domina los sombreados

El sombreado es otro término que se usa para definir las sombras que están sobre un objeto, y puede darle una forma y dimensión a los elementos planos de diseño o a las tipografías.

En este ejemplo, el sombreado texturizado puesto sobre un logo tipográfico blanco le da ese aspecto de capas:

shadow-6-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Michael Spitz

05. Domina las proyecciones

¿Recuerdas el diagrama con las sombras que viste anteriormente? Las proyecciones de sombras son las sombras causados por la misma manzana al bloquear la luz. Las sombras paralelas son un tipo particular de sombras proyectadas en las que la luz está más o menos encima del objeto, lo que hace parecer como si el objeto estuviera flotando sobre la superficie.

Desde el punto de vista del diseño, las sombras paralelas hacen que ciertos elementos se destaquen en un layout, al igual que mejoran la visibilidad de los elementos de diseño de colores claros, sobre todo cuando se trata de textos. Por ejemplo, en el diseño de esta página web, las sombras paralelas hacen que el contenido principal sea más notorio:

shadow-7-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Ben Schade

En toda clase de diseño, las sombras paralelas tanto se usan como se abusan. Uno de los errores más comunes es hacerlas muy grandes, muy oscuras y/o muy nítidas. En pocas palabras, dominar las sombras en el diseño se basa en que la audiencia no diga: “¡Ah, mira esa sombra, es linda!” sino que se integren con el resto de la composición.

06. Ajusta la opacidad

En realidad, las sombras no son opacas y la luz no es puro amarillo o blanco, ambas son transparentes y en tus diseños debería ser igual. Estos dos ajustes, la transparencia y opacidad, son tus mejores amigos cuando quieras un aspecto más sutil y realista, por lo que es recomendable comenzar con una cantidad mínima que luego vayas aumentando dependiendo de lo que el diseño necesite y así no corras el riesgo de exagerarlo.

07. Combina luces y sombras para crear una tipografía llamativa

La tipografía en tus diseños es un gran elemento para agregar efectos de luz y sombras, sobre todo en los diseños en los cuales el centro de atención, ya que puede darle vida a las palabras de una forma muy atractiva.

Toma como ejemplo este logo tipográfico: utiliza tanto reflejos como sombreado en las letras aparecen y desaparecen gradualmente (degradados) para crear un aspecto 3D, como si fuera tallado o esculpido. Igualmente, el diseño cuenta con una sombra paralela (observa el uso constante de una fuente de luz imaginaria en la parte superior a la izquierda: los reflejos principales caen encima y a la izquierda de las letras, mientras que las sombras paralelas apuntan hacia abajo y a la derecha, así cómo debería) y texturas sutiles que le dan una unión a todo.

shadow-8-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Nick Slater

08. Más opciones de sombras en la tipografía: prueba con estilos en relieve y empotrados

A decir verdad, de todos los elementos que hay en un diseño, las fuentes es uno con el que te puedes poner más creativo usando las sombras, pues en su mayoría son fáciles de emplear (algunas fuentes incluso ya vienen con un estilo de sombra incorporado) y puedes hacer que se vean personalizadas. Por esto, chequemos dos opciones más:

1) En relieve: Esta es una técnica de impresión que físicamente levanta un elemento del diseño (por lo normal el texto) por encima del papel (o el material que se use), y normalmente, se hace con un estampado metálico de cualquier clase. Aunque puede que no tengas esta herramienta o estés trabajando digitalmente, en cuyo caso puedes copiar el efecto colocando bien las sombras (fuera de los límites de las contorno de las letras) y los reflejos (justo en las letras).

shadow-9-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Boltz & Hase

2) Empotrado: Las personas usan una variedad de palabras para describir el texto grabado o impreso en una superficie, siendo impresión tipográfica, una técnica que utiliza placas de metal para imprimir un diseño (sea con o sin tinta) en un papel grueso, una de las más comunes. Sin embargo, ese mismo término también se usa con mucha frecuencia en efectos digitales que recrean el mismo aspecto, como por ejemplo, el diseño de este logotipo:

shadow-10-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/STUDIOJQ

Las sombras y reflejos están puestos en direcciones opuestas creando un relieve: las sombras están dentro de las letras y los reflejos afuera, denotando dónde se hizo la impresión.

09. ¿Y qué hay del diseño plano?

El diseño plano se ha convertido en una tendencia que ha llegado para quedarse y por lo visto en la transición de Apple al diseño móvil plano o el diseño del nuevo logo de Google, parece que se quedará por mucho tiempo. Una de las características que más define a esta clase de diseño es la falta de profundidad, que por lo general significa que no se verán sombras o reflejos. Ahora bien, ¿cómo le haces para mantener el minimalismo del diseño plano y agregar al mismo dinamismo con luces y sombras? Eso es algo que los diseñadores han podido incorporar haciendo pequeños cambios a la tendencia, que puedes ver en estos enfoques:

  • Color: Usar variaciones de color o degradados puede agregar una cierta dimensión o luz/sombra mientras técnicamente sigue siendo un diseño plano.

Por ejemplo, el diseño de esta página 404 pone en capas colores más claros y más oscuros para crear una profundidad (técnica que mencionamos en el punto #1).

shadow-11-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Jonathan Patterson

  • Sombras largas: Este estilo de sombras casi siempre utiliza en conjunto con el diseño plano, sobre todo si se trata de texto e íconos. Las sombras largas por lo general sobrepasan el borde del diseño.
shadow-12-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Georgi Davitaya

10. Para la web: haz que las cosas se vean como si se pudieran presionar de verdad

Cuando hablamos de diseño web, es muy importante considerar la forma en la cual los usuarios interactúan con el sitio. La UI o interfaz de usuario debería ser fácil de usar, de lo cual una gran parte es saber aquello en lo que se puede y no se puede hacer clic. Para esto, las sombras y reflejos son increíblemente útiles, sobre todo cuando se trata del diseño de botones.

Observa como los siguientes botones utilizan una combinación de muchas de las características que ya hemos mencionado en el artículo — degradados, reflejos, sombreado, sombras — para así crear formas y dimensiones. Particularmente lo que más se destaca en el diseño son los reflejos, en el botón izquierdo, el reflejo delgadito en el borde hace parecer como si el botón estuviera por encima de la superficie, es decir que se puede presionar, mientras que el reflejo curvo le da una forma convexa. Por otro lado, el botón derecho utiliza una sombra para que parezca que ya presionó.

shadow-13-tb-800x010-tips-superefectivos-para-disenar-con-luces-y-sombras

Dribbble/Charles Riccardi

Ambas partes del diseño probablemente sean muy pequeñas y sutiles, pero en verdad le dan la oportunidad a tu audiencia, subconscientemente, de interactuar con el diseño.

Ok, repasemos…

En términos generales, los efectos de sombras y luces, cuando se aplican estratégicamente y no solo por querer agregar decoraciones adicionales, hacen maravillas por tu diseño. En este sentido, Nate Eagle da un gran consejo en su artículo sobre las sombras paralelas y los degradados:

“Utiliza el espaciado, la posición y el color para que el diseño quedé bien antes de agregar la última capa de adornos. Si te centras en hacer que tus diseños se vean bien sin estos efectos, verás que no los necesitarás tan a menudo, y que cuando sí los uses, su impacto será mucho mayor.”

Ahora, dicho todo esto, prueba algunas de estas características en tus diseños y como es característico de nosotros: ¡feliz diseño!

La mejor herramienta para crear diseños increíbles