Diseño Web: Transparencia como Elemento de Diseño (más Mejores Prácticas)

La transparencia se ha convertido en un gran éxito en el diseño web, ya que la mayoría de los navegadores pueden mostrarla. Los elementos transparentes se utilizan para poner acentos o llamar la atención sobre un área determinada, como imágenes o pasajes de texto. Pero hay algunas cosas que pueden salir mal al desarrollar sitios web con efectos transparentes. Hoy te mostraremos a qué debes prestar atención. Vamos a crear un sitio web armonioso con elementos transparentes, ¿de acuerdo?

Transparencia en el Diseño Web

Hay dos formas diferentes de obtener transparencia: utilizando archivos PNG transparentes o CSS puro. Este último se vuelve cada vez más popular ya que todos los navegadores modernos pueden mostrar transparencia a través de CSS. Dichos efectos ayudan a mostrar ciertas áreas más claras y agregan contraste, lo que atrae la atención de sus visitantes hacia contenido específico. Usar PNG transparentes alfa podría ser la forma más fácil; sin embargo, la mayoría de las veces CSS ofrece mejores resultados. Pero depende de ti en qué dirección quieres ir. Especialmente en la etapa de desarrollo, CSS3 es la mejor y más rápida opción, ya que solo necesita ajustar una línea de código para obtener un resultado rápido. Esto hace que sea más fácil cambiar rápidamente la transparencia.

Aplicar transparencia usando CSS3

La transparencia se vuelve cada vez más popular gracias al soporte de CSS3 con su definición de color RGBa. La «a» en RGBa representa el canal transparente. Un valor de, por ejemplo, 0,5 añade un 50 % de transparencia al color de fondo. Pero no olvide los navegadores más antiguos si necesita admitirlos. La opacidad de CSS3 se puede aplicar a imágenes, textos, fondos, elementos div, etc. Las soluciones CSS puras funcionan más rápido y, por esta razón, deben considerarse. Sin embargo, la forma más común de aplicar transparencias sigue siendo el viejo PNG transparente alfa.

Tenga cuidado con los fondos multicolores

Trabajar con fondos de varios colores puede ser bastante complicado, no solo para los principiantes en diseño web, ya que a veces obtendrá resultados que no son perfectos. Siempre tenga cuidado con las imágenes ya que esto puede convertirse rápidamente en una completa bomba. Aquí hay una lista de sitios web de ejemplo que usan transparencias. Algunos lo aprovechan bien, otros no tanto.

Elementos transparentes

Suavía

Este sitio web hace muchas cosas bien, sin embargo, todavía parece imperfecto. Los diseñadores hicieron un trabajo (casi) perfecto en la página de inicio. Lo que es un poco molesto cuando se desplaza hacia abajo es la cantidad de espacio en blanco y el JavaScript que no está optimizado, lo que en realidad debería evitar el desplazamiento porque no hay contenido debajo de la ventana gráfica. Pero echemos un vistazo a la página de inicio bellamente diseñada:

Solo una mirada más cercana revela que el área transparente es un poco demasiado transparente. El efecto «subóptimo» mencionado se hace evidente en una subpágina con un fondo multicolor donde no se ha ajustado la transparencia.

La legibilidad sufre un poco debido a los altos valores de transparencia. Menos hubiera sido más aquí.

Plantilla de CMS para interiores

Los pocos efectos transparentes que usa esta plantilla se ven bastante bien, enfatizan y aclaran la impresión de la imagen y el mensaje. ¡Bien hecho!

Blurb Creativo

Blurb es una agencia de diseño web de Yorkshire, Inglaterra. Su sitio web es un buen ejemplo de cómo usar la transparencia solo como un efecto de apoyo y poner el foco en la legibilidad del contenido.

Transparencias ricas

No existe tal cosa como la transparencia perfecta. Todos los diseños nuevos tienen algo especial y, por lo tanto, requieren ajustes y transparencias individuales. Experimente con las opciones que ofrece CSS3. Es muy fácil porque puede cambiar y probar otras configuraciones de transparencia en segundos. Seguramente encontrará la transparencia que mejor se adapte a su sitio web. Si desea aplicar efectos de transparencia a varias áreas de su sitio web, pruebe diferentes niveles de transparencia porque algunos proyectos requieren configuraciones diferentes incluso en la misma página. En términos generales, debe centrarse en la legibilidad y la facilidad de uso. De lo contrario, puede molestar a sus visitantes, quienes luego le darán la espalda a su sitio web. Al colocar un área de contenido en el contenido principal, debe usar una transparencia baja para asegurarse de que el contenido sea legible. Aquí hay unos ejemplos:

Pizza-za

Hicieron todo bien. Muchas áreas transparentes se alternan con animaciones, un concepto divertido que está bien implementado.

Hotel Ciudad del Oeste

La transparencia tenue del área de contenido principal mejora la legibilidad del contenido. No solo se ve bien, sino que también es fácil de usar.

Transparencia tenue

Los siguientes ejemplos utilizan áreas transparentes tenues cuidadosamente seleccionadas. A veces para resaltar ciertas cosas, a veces para obtener cierto efecto, como GO4 Events.

Eventos GO4

GO4 Events solo tiene un área transparente en su sitio web: en el encabezado alrededor del logotipo. Esta área, sin embargo, encaja con los elementos «normales» del sitio web y los apoya con este pequeño regalo.

brad colbow

El ilustrador Brad Colbow también se basa en elementos transparentes tenues. Utiliza estas áreas para resaltar títulos, lo que funciona muy bien porque los elementos del título acentúan esta área sin ser demasiado intrusivos.

Taller de carrocería ATL

The Body Shop ATL utiliza transparencia en tres áreas: el logotipo, la barra debajo del área principal (las imágenes grandes) y el área pequeña en la mitad derecha de la imagen que contiene el número de teléfono de la empresa. Aquí la transparencia se utiliza para acentuar y no como un fin en sí misma.

Conclusión

Con todas las posibilidades que ofrece hoy en día, la transparencia es casi imprescindible en el diseño web. No debe usarse como un fin en sí mismo, sino solo por razones de apoyo. Esto provoca los efectos y obtendrás lo que buscas: un sitio web interesante. Espero que este artículo te sirva de inspiración y te ayude a implementar la transparencia correctamente. Expliqué en un ejemplo lo que podría haberse hecho mejor. Estoy seguro de que lograrás un equilibrio.

enlaces relacionados

• Una breve introducción a Opacity y RGBA – CSS3.info
• colores RGBA – CSS3.info

(dpe)