Drop-Shadows and Gradients: Sea consistente en sus metáforas visuales
Las sombras paralelas y los degradados son dos de los elementos de diseño más comunes en la web.
Los encontrarás acompañando muchos estilos diferentes. Son efectos útiles para los diseñadores web porque son atractivos, útiles y fáciles de crear con cualquier programa de gráficos. Pero tienen un lado oscuro: a menudo son maltratados .
Usar sombras o degradados para principiantes es casi tan malo como colocar una letra escarlata en tu camisa para que el mundo sepa que eres un principiante o un pirata informático. Incluso los errores sutiles y apenas perceptibles pueden crear tensiones que socavan diseños bellos y efectivos.
En este artículo, veremos qué hacen las sombras paralelas y los degradados , hablaremos sobre cómo usarlos de manera efectiva y veremos algunos ejemplos de errores y cómo solucionarlos.
¿Qué hacen Drop-Shadows y Gradients?
El trabajo de un diseñador web es crear patrones de color para pantallas brillantes de dos dimensiones . (Hay algunas excepciones a esto: los sitios web se pueden ver, por ejemplo, en una pantalla Kindle, que no brilla, y los sitios web se pueden imprimir en papel.) Estas pantallas no reflejan el mundo real; Ni siquiera se parecen mucho al mundo real. Por esta razón, no tenemos un imperativo real para hacer que los patrones en nuestros sitios web tengan alguna relación con los objetos en el mundo tridimensional en el que vivimos.
Los sistemas operativos como Unix y DOS tienen una interfaz que no es más que texto coloreado en una pantalla. Otros, como Windows y Mac OS X, están llenos de ilusiones de objetos reales. OS X, por ejemplo, tiene un dock que se parece a una mesa con una superficie brillante que se aleja en la distancia, una barra de menú cuyos bordes biselados hacen que parezca que sobresale ligeramente, y barras de desplazamiento que parecen tener pastillas translúcidas.
Todos estos efectos son metáforas. Tratan ciertos elementos con los que podemos interactuar en la pantalla como si fueran objetos tridimensionales que interactúan con las fuentes de luz en la forma en que lo hacen los objetos en el mundo no digital. En cierto modo, es algo divertido de hacer: todas estas fuentes de luz, bordes y formas son pura fantasía. Debido a que los objetos en la pantalla son imaginarios, ¿por qué deberíamos relacionarlos con los objetos en el mundo real?
La ilusión del espacio conecta el imaginario con un mundo en el que nos sentimos cómodos viviendo.
La razón más importante por la que relacionamos los objetos imaginarios con los del mundo real es que somos expertos en interactuar con objetos en nuestro mundo tridimensional. Tenemos experiencia en tratar con objetos tridimensionales, y hemos acumulado conocimiento del código visual que nos dice acerca de las relaciones de los objetos entre sí en el espacio.
Se debe en parte a que la proeza de interpretar la luz es tan notable que tomamos tanto placer en la ilusión o en la creación de la apariencia de los objetos. A menudo estamos más comprometidos con pinturas dramáticamente realistas de objetos comunes como casas y manzanas que los objetos mismos. Nosotros los humanos hemos creado dibujos durante miles de años que están destinados a presentar las ideas de los objetos. Las pastillas y los cuadros ilusorios en la pantalla no son más que la manifestación más reciente de esta larga tradición.
Sin embargo, hay más que placer. La forma y la posición nos dan información sobre cómo los objetos se relacionan entre sí. La forma de pastilla vertical larga de la barra de desplazamiento en la ventana de Safari, por ejemplo, crea la ilusión de que se sienta "más alta" o más cerca de mí que los elementos que la rodean. Esto le da una mayor importancia en el diseño, que es apropiado porque la barra de desplazamiento es un elemento de interfaz esencial para navegar por la página.
Las metáforas visuales crean una receptividad percibida.
Al aparecer como un objeto, la barra de desplazamiento crea "percepción affordance . "Es decir, se vincula por medio de la metáfora a las propiedades de objetos reales que se prestan a usos particulares. Un botón biselado en una página web, por ejemplo, comunica que permite presionar . Podemos hacer clic en cualquier elemento de una página, pero asociar un elemento seleccionable con la imagen de algo prestable sugiere su función de una manera clara, obvia e incluso agradable.
Las sombras paralelas y los degradados son herramientas básicas para crear la ilusión del espacio.
Las sombras paralelas y los degradados son dos herramientas que ayudan a crear la ilusión de la tridimensionalidad y sugieren las relaciones espaciales de los objetos en la página. Cuando se hace bien, esta información tridimensional hace que un diseño sea más hermoso y más comprensible.
En el mundo real, las sombras paralelas se crean cuando un objeto bloquea una fuente de luz al golpear una superficie que está detrás de ella. Esta es una de las razones por las que las personas dicen que las sombras paralelas hacen que los diseños bidimensionales "exploten": porque hacen que los objetos sobresalgan de otros elementos o floten sobre ellos.
Los degradados aparecen cuando una parte de un objeto está más cerca de una fuente de luz que otra. Como resultado, la parte más cercana aparece más clara y la parte más alejada aparece más oscura. (Los gradientes se vuelven más complejos, por supuesto, cuando interactúan múltiples fuentes de luz o cuando las fuentes de luz tienen diferentes colores).
Entonces, al imitar los efectos de la luz en el mundo real, las sombras paralelas y los degradados comunican información sobre objetos metafóricos, fuentes de luz imaginarias y sus relaciones.
Cómo usar sombras y gradientes de forma efectiva
Aquí hay una posibilidad: no use sombras paralelas o degradados en absoluto.
Quiero decir esto, en serio. Esta es la forma más segura de evitar los errores de sombreado y gradiente, y siempre se debe considerar la opción.
Debido a que arrojar sombras paralelas sobre objetos aleatorios es tan fácil, pueden ser una excusa para evitar soluciones más simples y mejores a los problemas. Para los fragmentos de texto que necesitan ser más prominentes, por ejemplo, los diseñadores a menudo descuidan el color, el tamaño, el peso del tipo y muchos otros elementos a favor de una sombra paralela.
Del mismo modo, los diseñadores a menudo usan degradados para hacer que un campo de color parezca menos aburrido, sin averiguar por qué la composición general no es dinámica.
Si está trabajando en una compilación para un sitio web, guarde toques tridimensionales como sombras paralelas y degradados para el final , si es posible. Utilice el espaciado, la colocación y el color para que el diseño sea efectivo antes de agregar la última capa de esmalte. Si se enfoca en hacer que sus diseños funcionen sin estos trucos, puede descubrir que no los necesita con tanta frecuencia, y que son más efectivos cuando los usa.
Antes de desplomarse en una sombra paralela o un gradiente, pregúntese: " ¿Es necesaria una metáfora tridimensional para este diseño?" ¿La uso para agregar información útil sobre la forma en que los objetos están relacionados o como un componente efectivo de un sonido? enfoque estético, ¿o lo estoy usando como una excusa? "
El Subtler, el mejor
Para sombras , casi nunca usa la configuración predeterminada de Photoshop. La sombra paralela predeterminada de Photoshop es muy oscura y se proyecta en la esquina inferior derecha de un objeto (la fuente de luz global predeterminada es 120 °, en la esquina superior izquierda).
Las sombras te dicen sobre la luz en tu entorno. Supongamos que estás en una habitación oscura sin ventanas y enciendes una linterna. Cualquier objeto en el que lo ilumines proyectará una sombra casi negra. Esto se debe a que el objeto está bloqueando la luz de la única fuente de luz, lo que significa que no hay otra luz proveniente de ningún otro lugar que ilumine esa área.
Ahora, la sombra no será completamente negra debido a la luz reflejada. Parte de la luz de la linterna rebota en las paredes y golpea el área sombreada desde una dirección que no está bloqueada por el objeto. Y si enciendes una lámpara en otra esquina de la habitación, la sombra se iluminará considerablemente. El objeto arrojará una segunda sombra: la nueva sombra aparecerá donde la luz de la lámpara está bloqueada pero se llenará con la luz de la linterna, mientras que el área de la primera sombra seguirá bloqueada por la luz de la linterna, pero se llenará con la luz de la lámpara.
Cuando agregamos sombras paralelas a nuestros diseños, sugerimos un entorno imaginario para nuestra página web. Las sombras oscuras y de bordes duros sugieren una habitación oscura con una sola fuente de luz. Las sombras claras y de bordes suaves sugieren una habitación rica en luz difusa.
Una sala bien iluminada es el entorno más cómodo para los usuarios, porque es similar al tipo de entorno en el que usamos nuestras computadoras: una oficina o estudio. A menos que deliberadamente deseemos evitar esa zona de confort, deberíamos bajar la configuración de sombra paralela en Photoshop de sus valores predeterminados. Baja la opacidad a 30 o 40%, o incluso más bajo.
Además, mantenga las cosas simples para que las personas entiendan la metáfora sin pensar en ello. Una fuente de luz a 120 ° no tiene mucho sentido. Mac OS X, por ejemplo, coloca su fuente de luz a 90 °, o directamente arriba, lo que parece más lógico. Me gusta hacerlo aún más simple y colocar la fuente de luz directamente perpendicular a la pantalla. Para hacer esto, simplemente ponga la configuración de distancia en su sombra paralela a cero (esto representa la distancia desde el objeto que proyecta la sombra paralela al objeto debajo de ella). En este punto, la luz global no importa: es simplemente como si una gran fuente de luz difusa viniera desde detrás del usuario para iluminar el diseño.
Este efecto es muy común en los diseños de "trompe-l'œil" , el más común de los cuales presenta la imagen de fondo o el marco de una superficie de escritorio, como si uno estuviera mirando directamente desde arriba. Directores de cine como Alfred Hitchcock, Martin Scorcese y Wes Anderson emplean el mismo efecto para sus tiros de autorizaciones de autor. Dichos diseños web tienen una especie de comprensibilidad sin esfuerzo, y mantener la coherencia en un diseño es más fácil para el diseñador.
Si ha reducido la distancia a 0 y la opacidad a alrededor del 30%, se encuentra en un buen punto de partida para una sombra paralela. Juegue con el tamaño para cambiar qué tan lejos está la superficie del objeto del fondo en el que se encuentra. Establecer el tamaño en 1 píxel, por ejemplo, le da un bello efecto que es casi invisible pero bastante agradable. Diseñador Dan Cederholm ha hecho que los efectos pequeños y simples como este sean una parte integral de su estilo (como se demostró en su artículo seminal de A List Apart sobre " Esquinas de la cima de la montaña ").
Ciertamente puede aumentar la opacidad si el efecto es invisible, pero comenzar de manera sutil y luego marcarla es mucho mejor que lo contrario. El efecto no debe ser el más leve de lo que debe ser.
Para degradados, Photoshop tiene muchos defectos fantásticos. Estos pueden tener algunos buenos usos, pero ciertamente tienen un uso ilimitado deficiente, por lo que mantenerse alejado de ellos suele ser prudente.
En su lugar, seleccione el degradado predeterminado de blanco a negro. Luego seleccione tanto el negro como el blanco y conviértalos en el color base de su elemento. Ahora que tienes una base, elige el lado oscuro o el lado claro y ajústalo para que sea ligeramente más oscuro o más claro. De nuevo, cuanto más sutil, mejor . (Algunos de los mejores gradientes con los que me he encontrado tenían que verificar con la herramienta cuentagotas en Photoshop para asegurarme de que estuvieran allí).
Cuanto mayor sea el contraste entre la luz y la oscuridad, más redonda aparecerá la superficie. Para algunas cosas, como los menús de navegación y los botones, es conveniente cierta redondez. Pero para objetos que deberían parecer planos, mantenga el contraste bajo.
Y recuerde, el lado más ligero debe mirar hacia la dirección de su fuente de luz.
Este tipo de gradiente es maravilloso porque imita los gradientes que vemos a nuestro alrededor todo el tiempo. Nada en el mundo real es realmente un solo campo de color, porque siempre tiene algún tipo de relación con una fuente de luz. Mire cuidadosamente las páginas de un libro o en el techo alrededor de su luz cenital: encontrará gradientes en todas partes.
Ejemplos de errores y cómo solucionarlos
La web tiene muchos degradados obviamente desagradables, pero estos no suelen ser realizados por diseñadores profesionales. En lugar de mostrar errores atroces, voy a ilustrar algunas formas en que los errores sutiles pueden crear tensiones en diseños por lo demás excelentes.
Sombras uniformes para objetos superpuestos
Los objetos superpuestos implican una diferencia en su distancia de usted (determinada en parte por su grosor). Los diseñadores, sin embargo, usan con frecuencia sombras idénticas para objetos superpuestos. Entonces, la información transmitida por las sombras cae en conflicto con la información transmitida por la superposición, socavando la ilusión de la dimensionalidad.
Ver conflictos como estos me inquieta, y cuanto más me concentro en ellos, más me duele la cabeza. ¡Los usuarios deben disfrutar de su diseño, no sentir dolor!
Puedes leer más sobre este tema en " Construye un mejor Drop-Shadow , "Una guía de Jacci Howard Bear en About.com.
Bordes abruptos
Las esquinas de las sombras reales no tendrían bordes duros a menos que no tuvieran absolutamente ninguna luz reflejada, lo cual sería una situación muy inusual. Por el contrario, sus esquinas suelen estar redondeadas por los rayos de luz que se arrastran a su alrededor.
Aquí hay una sombra paralela con un borde irrealmente duro:
Este diseño, por lo demás encantador, casi no tiene ilusión dimensional en ninguna parte, pero tiene una sombra paralela a lo largo de la barra lateral derecha. Es posible que el diseñador quiera bajar la jerarquía de la barra lateral en la página, un efecto que su fondo azul ayuda a lograr. No solo es innecesariamente oscuro, sino que el borde implausiblemente duro mira al visitante a la cara.
En la parte inferior de la barra lateral, puede ver una transición redondeada, donde el diseñador ha creado un efecto más plausible. Pero se puede ver por qué no lo repitió en la parte superior, porque se sacudirá con la línea horizontal limpia establecida por los elementos superiores bien alineados. En lugar de exigir el realismo de esta transición redondeada, vamos a solucionarlo atenuando la sombra paralela tanto como sea posible.
Aquí, he hecho que la sombra sea tan ligera que hace poco más que sugerir que está más atrás. Debido a que es tan liviano, la línea limpia de transición no es fea ni molesta.
¿Qué diablos está pasando detrás de ese objeto?
A veces, una sombra paralela se vuelve loca sin una razón obvia, como ocurre con la caja azul que rodea el logotipo del W3C a continuación.
¿Por qué la sombra paralela está tan atrás del objeto y tan redondeada? Cuanto más trato de entender la historia que me cuenta esta sombra paralela, más me confundo. Mi suposición es que el diseñador quería darle más importancia y peso al logotipo, que la sombra paralela ayuda a lograr, pero altera tanto la armonía de la página que no vale la pena.
No dejes que tus degradados sugieran diferentes fuentes de luz.
En este otro diseño excelente para WolframAlpha, los objetos en la página tienen gradientes que van del blanco al naranja pálido. El problema es que el gradiente en la región del encabezado tiene blanco en la parte superior, lo que implica luz desde arriba, mientras que los elementos de página más abajo tienen blanco en la parte inferior, lo que implica la luz desde abajo.
Podría argumentar que estoy pensando demasiado en esto, que los degradados no tienen que coincidir con las fuentes de luz. Eso es posible, pero gradientes sutiles como estos tienen una relación metafórica inherente a los gradientes que vemos en el mundo real. Cambiemos la dirección de los degradados más abajo en la página para que impliquen una fuente de luz desde arriba:
Y obtenemos armonía de fuente de luz.
En definitiva, eres libre de hacer lo que quieras.
Debido a que los objetos en una página web se relacionan con objetos reales solo por metáfora, su efectividad es esencialmente subjetiva. La conexión entre una imagen de un botón y un botón real no tiene realidad más allá de la mente del usuario.
Nosotros, los diseñadores, no estamos obligados a hacer que nuestras metáforas sean coherentes con la realidad, pero ser cuidadosos y ser cuidadosos con los muchos niveles de comunicación en un diseño nos ayuda a hacer que nuestros sitios web sean más armoniosos.
Y nuestro cuidado y coherencia ayuda a que la experiencia del usuario del sitio web sea cómoda e incluso agradable.
Escrito exclusivamente para WDD por Nate Eagle . Estudió filosofía en la universidad, una educación que lo preparó perfectamente para diseñar y desarrollar páginas web para PBS KIDS. Puede leer más de él y sus compañeros de PBS en Design.PBS .
¿Crees que este nivel de detalle es importante cuando se diseñan sombras paralelas y degradados? ¿Tienes tus propias preocupaciones sobre cómo se usan las sombras paralelas y los degradados?