Parece que con una tendencia en el diseño de sitios web, los diseñadores casi tienen otra tendencia impuesta. Este es el caso de las imágenes de fondo grandes: usar una presentación de diapositivas con una variedad de fotografías diferentes significa que el texto en color que elija se verá mejor en algunos que en otros, por lo que la solución ha sido colocar un filtro o capa transparente entre la imagen y el texto, lo que significa que el texto se mostrará con la misma claridad en cualquier imagen.

Esta tendencia de diseño no solo se aplica a las imágenes de fondo fotográficas, algunos sitios utilizan medios tonos o transparencias sobre fondos de colores sólidos, y la adición de una sombra paralela muy pequeña hace que el texto blanco se vea extremadamente nítido y nítido. Aquí mostramos una selección de sitios web que utilizan este método para mantener su texto fácil de leer sin comprometer la calidad de las imágenes.

Cómo trabajan ellos

Me imagino que casi todos los diseñadores saben cómo funcionan los filtros y la transparencia cuando se colocan entre una imagen y el texto, pero para mostrar la increíble diferencia que puede hacer una capa de este tipo, ¡he producido algunas imágenes para demostrarlo!

Imágenes con texto blanco

Capa transparente negra al 25% de opacidad agregada

Pequeña sombra negra en el texto

Capa de medios tonos al 40% de opacidad

Cómo crear un patrón de semitonos con Photoshop

Este método funcionará para cualquier versión de Photoshop y es simple en sí mismo. La imagen de abajo tiene un fondo relleno de degradado con la capa de patrón de semitonos encima.

Transparencia y filtros en acción

Delegados del CICR en acción

Este sitio utiliza una capa transparente negra entre la presentación de diapositivas en pantalla completa y el texto del título en blanco. Como puede ver en la captura de pantalla a continuación, el texto se destaca incluso contra la camisa blanca del hombre.

Luz y sombras

Este sitio utiliza una transparencia muy oscura que se aclara ligeramente al pasar el mouse. También aparece un toque de color al pasar el mouse, diferentes colores para cada panel.

Petr Novikov

Este sitio usa una transparencia ligera sobre un video de fondo, nuevamente usando un título de texto blanco.

Ndoto

Este sitio tiene una presentación de diapositivas a pantalla completa con 3 imágenes, cada una de las cuales tiene una transparencia de color diferente. La siguiente captura de pantalla muestra parte de cada imagen.

MVMT

Con un diseño de cuadrícula, esta página de inicio utiliza una transparencia muy oscura que se elimina por completo al pasar el mouse, revelando la fotografía a todo color debajo.

Cloudways

Aquí hay un efecto único y sofisticado en la página de inicio. La imagen de fondo está animada, muestra al tipo escribiendo en su teclado, y el texto del título se presenta en forma de cinta de teletipo para que podamos imaginar que está escribiendo la oración, borrando, escribiendo … etc. La transparencia sepia ayuda al texto negro delgado para destacar.

Louise Bradley

Este sitio web utiliza un bloque de transparencia sobre la presentación de diapositivas de fondo en pantalla completa, un enfoque algo diferente y creativo.

DraughtMaster

Este sitio utiliza una variedad de estilos de capa para ayudar a que el texto del título en blanco se destaque. La captura de pantalla a continuación muestra 4 de sus páginas usando diferentes capas: transparencia negra, textura de gota de agua, textura bokeh y textura de hielo.

Recuerdos mundiales

Este sitio dedicado al Torneo de la Copa del Mundo de Brasil 2014 utiliza un patrón cuadrado de semitonos proporcionalmente grande sobre la imagen de pantalla completa.

Toca en

Otro sitio que es una guía de los partidos del Torneo de la Copa del Mundo de Brasil 2014. Este sitio utiliza una capa transparente sepia sobre la imagen de pantalla completa ligeramente animada.

Yunik

Esta página de inicio tiene una transparencia con un tinte azulado en su presentación de diapositivas de fondo de pantalla completa que solo consta de 2 imágenes. A medida que se desplaza hacia abajo en la página, hay más variedades de transparencias que incluyen negro, azul y una imagen con una capa de semitonos.

Códigos inteligentes

Este sitio utiliza una capa de trama de semitonos para resaltar el texto. La siguiente captura de pantalla muestra una parte del texto a tamaño completo, ya que la reducción de tamaño ha afectado un poco el efecto.

Tinybigstudio

Aquí el diseñador (Pablo Domínguez) ha utilizado una transparencia roja muy caliente sobre una imagen de pantalla completa de sí mismo en el trabajo. Un elemento amarillo en forma de lágrima contiene una imagen en miniatura de él también.

La Ferme de Biarritz

Aunque el diseño de este sitio no es necesariamente de alta moda en este momento, la transparencia negra del área de contenido hace que el texto blanco se pueda leer sobre el fondo arenoso.

Diseño Fresco

Este sitio utiliza una capa negra transparente con la opacidad perfecta para que el texto blanco se destaque en todas sus imágenes de presentación de diapositivas. El texto también tiene una pequeña sombra negra para una mayor claridad.

Dr. Laffourcade

Para los diseñadores de este sitio, el negro es el nuevo negro, y han utilizado una capa blanca transparente para enfatizar el texto del título en negro.

Creer en

Este sitio utiliza una capa de medios tonos con la opacidad ideal para mantener el texto del título blanco nítido y claro, sin distorsionar las imágenes de fondo animadas.

Adveris

Este diseño no tiene una imagen de fondo de pantalla completa, tiene un fondo azul sólido con un patrón de estilo bokeh. La capa de estilo de malla entre el fondo y los elementos de la página le da un borde muy nítido a todo. El texto blanco se realza con una pequeña sombra paralela.

Yin + joven

Esta es la página Acerca de del sitio de Yin + Young. Usando un estilo tipográfico muy vintage, la antigua calle que forma la imagen de fondo de esta página tiene un filtro similar a Instagram para proyectar una luz brillante y permitir que el texto negro se destaque. Este sitio utiliza bastantes efectos de transparencia y estilo de filtro y, curiosamente, si hace clic en el botón Inicio, se encontrará en una de las dos pantallas de inicio diferentes.

Conclusión

El efecto dominó de una tendencia que crea otra parece estar ocurriendo con más frecuencia con la llegada del diseño plano. Muestra claramente cómo se inician las tendencias al encontrar soluciones a los problemas creados por otras tendencias: el diseño plano en sí se inició por necesidad, para resolver el problema de la claridad y la facilidad de uso de las pantallas pequeñas.

¿Ha encontrado algún otro método para hacer que el texto se destaque en imágenes de diferentes colores y contrastes? Comparta sus opiniones y enlaces con nosotros en la sección de comentarios a continuación.