En los sitios web, es usual hacer algún tipo de edición a las fotografías que se utilizarán. Ya sea un simple recorte para que vaya acorde a la medida que se ha establecido en el layout o sean ediciones que requieran mayor tiempo, donde se trabaje la fotografía modificando los colores y aplicando filtros.
Existen una gran variedad de efectos y estilos que podrías aplicar a las fotografías de tu sitio web. Uno de los más sencillos es el efecto de desenfoque, que permite que el usuario centre su atención en los elementos que se encuentran en primer plano.
En este artículo hemos listado algunos sitios web que hacen uso del efecto de desenfoque en sus fotografías y te podrían servir como referencia si tú también estás pensando aplicar este efecto en tus imágenes.
Kredo
Esta landing page presenta efecto de desenfoque en todas sus fotografías en mayor o menor medida. El más notorio es el que se aplica en el fondo en el primer pantallazo del sitio, y que a su vez se emplea como fotografía de ejemplo en los mockups de la aplicación.
Para que la atención se centre en la aplicación en sí, las personas que forman parte de la fotografía se encuentran de espaldas a la cámara y sus rostros no son visibles. En algunos casos, incluso, se ha tomado la fotografía de tal manera que aunque se puede ver a las personas de perfil, sus rostros poseen cierto grado de desenfoque, pero sin llegar a un punto en que puede ser antinatural. Es decir, el efecto es bastante sutil y funciona en este sitio.
Over
La página de Over, a diferencia del sitio web de Kredo, hace uso del desenfoque en la imagen que se emplea para el mockup de la aplicación. La misma fotografía que se emplea en el mockup es la imagen que se utilizan en el fondo. La diferencia es el formato en el que se encuentra y, por supuesto, el efecto de desenfoque que presenta la fotografía vista desde la aplicación. También se puede notar un claro desenfoque en el fondo de la fotografía, de manera que el sujeto destaca aún más.
Piction
Piction App emplea la misma técnica de desenfoque se ha usado en Kredo: tanto la fotografía que se emplea como fondo y la del mockup es la misma, sólo que en el fondo se ha aplicado un desenfoque gaussiano medio. Aún se puede reconocer que es la misma fotografía por los colores y ciertas formas. Como el móvil se encuentra en el centro, parece como si se hubiera tomado la fotografía en el momento. Sin duda, esta ha sido la intención del diseñado pues Piction es una aplicación que trabaja con fotografías.
Rodesk
Rodesk , como muchos otros sitios, emplea una fotografía como fondo en el primer pantallazo, pero no ocupa todo el ancho de la pantalla, como es usual en la actualidad, sino que presenta un espacio en los bordes y se ha centrado la imagen. Estos espacios en blanco permiten que se coloque un icono de hamburger menu en la parte superior derecha, mientras que en la izquierda se ha colocado el logo. Como el fondo es blanco no existen problemas de legibilidad. Sin duda ha sido una decisión acertada por parte del diseñador web.
Por otro lado, Rodesk presenta una diferencia esencial con otros sitios que hemos presentado previamente: la fotografía no posee un desenfoque gaussiano, sino uno de movimiento. La propia escena, composición y el efecto le dan mayor dinamismo a esta sección del sitio.
Trellis
Para Trellis se ha empleado una imagen en blanco y negro y se ha aplicado un desenfoque ligero. Aún se puede notar que la escena pertenece a una granja. Toda la página tiene cierto toque vintage que se puede notar en los fondos, las ilustraciones y la fotografía. Esta es la razón por la que se ha elegido una fotografía en blanco y negro como fondo.
Livefront
Livefront es un sitio web con un diseño interesante pues hace uso de líneas diagonales para dividir las secciones de su página. Sólo aplica el desenfoque gaussiano a una de sus fotografía y lo hace en el fondo, a modo de destacar los elementos que se encuentran en frente, en este caso es el mockup de la aplicación. Aunque el fondo se encuentra bastante desenfocado aún se puede distinguir que es una tienda por departamentos. Este fondo refuerza el mensaje pues la aplicación Livefront te permite comprar en línea.
Noteshelf
A diferencia de los sitios previamente listados, Noteshelf aplica el desenfoque a tal grado que la escena de la fotografía es irreconocible y sólo se pueden ver formas irregulares y colores. Sin duda, se ha elegido el fondo por su riqueza en colores, de manera que al aplicar el desenfoque tenemos como resultado un fondo llamativo, pero que no distrae al visitante. Aparte del claro efecto de desenfoque, se puede notar cierta textura granulada.
Forest
En la página web de Forest se ha aplicado un desenfoque medio a todo el fondo. Aún podemos notar lo que sucede en la escena: un hombre de espaldas trabajando en su escritorio. No se sabe si está trabajando en un ordenador o si está escribiendo en un papel. La fotografía no ha sido elegida al azar, pues Forest es una aplicación que ayuda a mejorar la concentración en cualquier tarea que desempeñes.
Employour
Employour no sólo hace uso de desenfoque en las fotografías que utiliza como fondo, sino que aplica filtros de colores. Cada diferente fotografía de fondo posee un color distinto, lo que da a todo el sitio un aspecto más juvenil. Con el efecto de desenfoque y el filtro de color no se distinguen bien ciertos detalles de la fotografía, pero está claro que son rostros de personas. Esa misma persona que se encuentra en cada foto, se ha calado y se ha colocado entre el título centrado de cada slider. Sin duda, es una edición interesante y le da un toque moderno a todo el sitio, sin mencionar que logra un efecto distinto a otros sitios que sólo aplican desenfoque en sus imágenes.
Nextr
Como muchas otras páginas de aterrizaje para aplicaciones, Nextr aplica un desenfoque gaussiano a su imagen de fondo que es la escena de una calle. En primer plano podemos ver el mockup de una pantalla de la aplicación y una mano que sostiene el móvil. Como la perspectiva se da de frente es casi como si el visitante estuviera viendo la escena en vivo y en directo. Aunque es bastante sutil, también se ha aplicado una textura granulada a la imagen de fondo.
Cook
La página de Cook hace uso un ligero desenfoque gaussiano en las fotografías que utiliza como fondo. Aparte de aplicar este efecto de desenfoque, se han aplicado gradientes de colores diferentes en cada una de ellas. Esta edición les da un aspecto más moderno y juvenil al sitio y sirve para que exista un mayor contraste entre el fondo y los elementos que se encuentran en primer plano. El uso de estas gradientes no es casual pues la interfaz de la aplicación es colorida e incluso en su logo en la App Store se ha hecho uso de una gradiente.
Cassi & Co.
Cassi & Co. al ser una tienda de ropa y accesorios, aplica el desenfoque en el fondo. Aunque el grado de desenfoque es medio, se ha aplicado también un patrón punteado que realza el contraste entre el logo, por ejemplo. Para otras zonas que contienen más texto se hace uso de un recuadro blanco como fondo, para evitar problemas de legibilidad.
La fotografía que se ha elegido como fondo parece ser de uno de los ambientes de la tienda.
Nulab
Nulab, al igual que Cassi & Co., ha aplicado no sólo un desenfoque gaussiano, sino también se ha añadido un patrón en la fotografía que se utiliza como fondo. Aunque la escena en sí se puede distinguir, los rostros de los personajes no. La imagen que se ha elegido mucho tiene que ver con el título que presenta la página “Diversión. Creatividad. Colaboración” pues podemos distinguir a dos niños jugando, uno de ellos se encuentra subido en un carrito de compra mientras que otro lo empuja. Y nada representa mejor la creatividad y la diversión como presentar a dos niños jugando.
Dickson Fong
El portafolio de Dickson Fong posee dos fotografías de fondo que poseen desenfoque. La primera es un paisaje y tenemos la frase “Forja el futuro” en una fuente sencilla y de gran tamaño. En la segunda fotografía podemos ver una interfaz de algún programa y el texto describe brevemente el proceso de trabajo de este diseñador. Posee parallax scrolling en estas secciones específicas y no sólo aplica desenfoque sino también filtros de un solo color.
En conclusión…
El desenfoque es un filtro que se aplica a las fotografías para hacer destacar los elementos en primer plano y es especialmente útil cuando la imagen elegida refuerza la marca, pero posee muchos colores o detalles que fácilmente podrían distraer a tus visitantes. También se puede usar simplemente como un fondo borroso o irreconocible, pero que tenga colorido y que pueda llamar la atención de tus usuarios.
Ahora que has visto ejemplos de uso del desenfoque en diseño web, tienes una idea de qué tipo y nivel de desenfoque puede funcionar en diferentes fotografías. Sólo te falta experimentar con ellas.
