Este artículo de diseño brindará una descripción general de la aplicación y terminología de la sombra en el diseño.
¿Qué es una sombra?
Una sombra es un área oscura donde la luz emitida por una fuente de luz es bloqueada por un objeto opaco. Las sombras tienen forma porque la luz no puede atravesar el objeto opaco. El objeto bloquea la luz y la obliga a pasar más allá del objeto bloqueador y hacia la siguiente superficie. La sombra resultante es una forma bidimensional o una proyección inversa del objeto que bloquea la luz.
El tamaño de una sombra depende de la distancia entre la fuente de luz y el objeto que la bloquea. Cuanto más cerca esté el objeto de la fuente de luz, más obstruirá la luz, lo que dará como resultado una sombra más grande y más suave. Si el objeto está más lejos, la sombra se vuelve más nítida y pequeña.
Las sombras oscuras y de bordes duros sugieren una habitación oscura con una única fuente de luz. Las sombras claras y de bordes suaves sugieren una habitación rica en luz difusa.
Sombras naturales:
Son creadas por la luz solar. El ángulo de la fuente de luz determina la longitud de la sombra.
Sombras artificiales:
Esto incluye todas las sombras creadas por la luz artificial.
La aplicación de la sombra en el diseño.
La ubicación y el comportamiento de las sombras son consideraciones esenciales en el diseño. Los degradados, las luces y las sombras paralelas crean dimensión en los elementos de diseño y dirigen la atención del espectador. El uso de sombras puede mejorar drásticamente la estética y funcionalidad general de su diseño y agregar niveles de profundidad y realismo.
En general, las sombras en el diseño deben simular el comportamiento natural y real de la luz y la proyección de sombras (luz clave y ambiental) y mezclarse con el diseño de manera efectiva.
Para utilizar las sombras de forma eficaz en su proceso de diseño, primero debe comprender las leyes fundamentales de la proyección de sombras y sus elementos clave.
la fuente de luz
La fuente de luz define la dirección y posición de los rayos entrantes de la fuente de luz. La luz natural tiene como única fuente de luz la posición del sol; La luz artificial permite múltiples fuentes de luz.
Lo más destacado
Definido como resaltado es el área que brilla más en un objeto; es el punto que mira hacia la fuente de luz y más cercano a ella.
La sombra central
La sombra central representa la parte más oscura del objeto que está más alejada de la fuente de luz. La oscuridad de las sombras puede variar en tono. El área más oscura de la sombra se llama sombra central.
la sombra proyectada
La sombra misma está sobre el objeto, pero el objeto mismo crea la sombra proyectada. La sombra proyectada se proyecta sobre la superficie sobre la que reposa el objeto. La sombra proyectada siempre apunta en la misma dirección que los rayos entrantes pero siempre hacia el lado opuesto del objeto.
La aplicación de la sombra en el diseño.
La responsabilidad de un diseñador web es crear patrones de color para pantallas bidimensionales que emiten luz. El uso de sombras crea profundidad y la ilusión de espacio en el diseño 2D. La sombra es una parte esencial del diseño gráfico. Existen innumerables formas de incorporarlo al proceso de diseño de imágenes.
Sombras paralelas y degradados son dos de los elementos de diseño más utilizados. Otros elementos relevantes son la opacidad de la sombra, el ángulo de la sombra, el < /span> (a menudo llamado desenfoque).suavidad de las sombras y el radio de la sombra el desplazamiento de la sombra,
Los sombras paralelas y los elementos de sombra degradado son Es muy fácil de crear con cualquier programa de gráficos, pero la desventaja es que estos dos efectos de sombra frecuentemente se usan en exceso.
Sombras en diseño esqueuomorfo.
Especialmente en el período Diseño esqueuomórfico que alcanzó su punto máximo en su uso desde principios hasta mediados de la década de 2000, los diseñadores agotaron el < a i=3>estilos de capas de Photoshop y programas de software similares a su máxima capacidad, lo que hace que, especialmente las pantallas de tamaños más pequeños, se sientan muy abarrotadas y abarrotadas. Los íconos se crearon con reflejos, sombras y líneas de alineación correctas, creando una sensación 3D.
Aunque los elementos visuales pueden variar, los usuarios siempre pueden hacer estas dos suposiciones:
- Los elementos que parecen elevados se pueden presionar hacia abajo (por ejemplo, botones)
- Los elementos que parecen hundidos se pueden completar (por ejemplo, campos de entrada)
Sombras en el diseño de materiales.
A mediados de la década de 2010, el péndulo creativo volvió a adoptar un enfoque más minimalista con la tendencia Diseño plano y el desarrollo del < /span>.Lenguaje de diseño de interfaz de usuario material
El diseño y los comportamientos de las sombras no tenían como objetivo representar objetos del mundo real con la mayor precisión posible. Se trataba de claridad, orden, continuidad y simplicidad. El enfoque de Diseño plano omitió el eje z para lograr la máxima simplicidad. La falta del eje z hizo que la incorporación de sombras en los elementos de la interfaz de usuario fuera redundante.
El lenguaje Material Design, desarrollado inicialmente por Google, incorporó el eje z en su enfoque limpio y simplista, centrado en reglas estrictas para su continuidad y presentaba transiciones a menudo animadas. Se utilizaron sombras minimalistas para crear la ilusión de profundidad. El nuevo enfoque de diseño permitió nuevas oportunidades para utilizar el color y el espacio.
Sombras en diseño neumórfico.
Después de casi una década de un enfoque de diseño 2D más simplista, surgió un nuevo lenguaje de diseño: Neumorfismo ocupa un lugar destacado en macOS Big Sur. Los íconos y elementos de la interfaz de usuario están diseñados con sombras y luces de una fuente de luz a las 12 en punto. Se reconecta con el enfoque físico y háptico del diseño esqueuomórfico pero sin excesivas sombras de estilo de capa.
El comportamiento y la proyección de la sombra son completamente diferentes en el material y el neumórfico estilo de diseño.
Las tarjetas Material Design parecen flotar con una sombra indefinida.
Las tarjetas Neumorfas Diseño parecen extruidas del fondo. La proyección de la sombra y su interacción con la luz son completamente diferentes.
Por qué deberías incorporar sombras en tu diseño
El propósito de las sombras en el diseño 2D/UI no es principalmente simular objetos 3D de la forma más realista posible para el usuario, sino dirigir y facilitar sutilmente la navegación por la interfaz.
Integrar sombras con una proyección sutil y cuidadosamente calculada es una forma ideal de hacer que el diseño sea más accesible para sus usuarios.
Si elige incorporar sombras en su diseño, recuerde que hay muchas formas de implementarlas. Experimente y pruebe los diferentes parámetros que mencionamos en nuestro artículo. Vea cómo estas configuraciones afectan la apariencia y la accesibilidad de su diseño.
Cambiar la opacidad, el ángulo o el color de la sombra puede marcar una gran diferencia en cómo su diseño atrae al espectador. Puede transformar su diseño de un estilo empresarial a uno lúdico y divertido simplemente alterando los atributos del color de la sombra, por ejemplo.
Ajustar los atributos de desenfoque o desplazamiento de las sombras puede redirigir la atención del usuario a elementos de diseño que antes se habían pasado por alto.
¡Recuerda las pautas básicas que te dimos y diviértete jugando con los atributos de las sombras!
