Muchos diseños, ya sean de páginas dedicadas al diseño, de empresas, de organizaciones sociales y redes sociales han utilizado esta opción con gran éxito. Es una excelente forma de llamar la atención, mientras que, al mismo tiempo destaca la marca de una empresa o de proyecto en particular.
En este artículo, presentamos algunos usos para las imágenes y vídeos de fondo. Las mejores prácticas para esto están en constante desarrollo, pero se han estabilizado, centrándoseen la usabilidad, la experiencia de usuario, y en darle prioridad al contenido. Mientras el sitio web sea funcional y el contenido del fondo se sume al mensaje general, entonces el uso de estos elementos está en el camino correcto.
Imágenes versus video
Un fondo de pantalla completo está compuesto típicamente por una imagen o un vídeo. Si se usan imágenes, se pueden incluir fotos, ilustraciones, un collage de imágenes, e incluso un slider para darle movimiento. Usar un video es más simple en el aspecto del diseño, ya que solo es un elemento, pero también es más difícil de implementar, ya que depende del soporte que entregue el navegador.
En cualquier caso, un principio importante y que siempre debe tenerse presente, es que los fondos deben ser tratados como un accesorio y no como una necesidad. Si se eliminaran del diseño web la imagen a pantalla completa o vídeo, el contenido todavía debería poder leerse correctamente y organizarse adecuadamente.
Ejemplo 1: Agencia deportiva Onside
En este caso, la agencia opto por una imagen y poco texto sobre ella, destacando lo más importante del servicio que ofrece, para saber más se puede acceder a un menú de color llamativo, con respecto al fondo
Ejemplo 2: Zachgold
En este otro ejemplo, se optópor un collage sin textos y un menú para saber más del sitio.
Ejemplo 3: Adidas Design
Acá la página nos ofrece la opción de ejecutar o no el video, con un menú en la parte inferior. De no hacerlo, la imagen a pantalla completa está bien elegida para hacer destacar el poco texto presente, y el menú de desplazamiento.
Diseño de la página de inicio del sitio (Home)
El lugar más común y más útil para incluir contenido a pantalla completa en un sitio web, se encuentra en la página de inicio. Otras páginas del sitio se destinan para contenidos específicos, como pueden ser los catálogos de productos, los datos de contacto de la empresa, o información de otro tipo sobre la empresa o sus clientes.
Una alternativa para la página de inicio es hacerla en un solo color, y a medida que se baja mediante el scroll, van apareciendo otras imágenes y textos de diversos colores.
Lo que es importante, es que incluya muy poco texto y un menú, ya que así la página llama la atención y hará que el usuario deba recorrer la página para descubrir todo lo que el sitio puede ofrecer.
Ejemplo 4: Underbelly
Esta empresa optó por una imagen de color azul para el inicio, un menú de iconos y un desplazamiento vertical.
Ejemplo 5: Brady Williams
Este chef uso una imagen en tonos verdes oscurecida, y una frase, nada más, para descubrir lo que ofrece el sitio, el usuario debe hacer uso del scrollieng vertical.
Alto contraste
El contraste es la propiedad de visibilidad entre un primer y segundo plano. Por ejemplo, en el caso de texto blanco sobre fondo negro la página posee un contraste muy alto. Esto es exactamente lo que busca el diseño web con los fondos de pantalla completa.
Ejemplo 6: Gravitate design
En este caso, el video de fondo se oscurece, para destacar el texto en blanco, además de utilizar un color rosa intenso para hacer contrastar el menú con el fondo.
Es necesario colocar el texto más importante en lugares con fondo algo oscuros, y si no es posible simplemente dar al texto un fondo de color sólido. Es bueno recordar que el contenido de pantalla completa está destinado a ser visualmente atractivo, y complementar el contenido. No sirve de nada tener un sitio atractivo siel usuario no puede leer la información que se le entrega.
Videos y sliders a pantalla completa
Cuando se trata de imágenes a pantalla completa podemos elegir dos tipos de diseño de fondo. Uno es el fondo estático con una imagen fija, mientras que el otro es dinámico, con diferentes estilos de rotación de imágenes. Estas presentaciones en rotación son populares porque pueden mostrar el trabajo de diseño de una empresa o de un fotógrafo.
Ejemplo 7: Valentino
En este caso se optó por imágenes que cambian mediante el scroll vertical. Lo útil del diseño es que la tratarse de líneas de productos, se puede usar una imagen de fondo distinta para cada una de ellas. Ropa, accesorios, regalos, etc.
Un sitio con imágenes en movimiento, y oscurecidas, para que el texto blanco en ningún momento deje de poder leerse por parte del usuario.
Distribución de tamaño variable
Una de las tendencias del diseño web en los últimos años, y que seguirá siendo prioritario, es el diseño responsive. Este aspecto debe ser considerado siempre como fundamental en el diseño web moderno, permitiendo que un solo diseño pueda ser visualizado en cualquier resolución de pantalla.
Con fondos de pantalla completa, puede ser más difícil de crear un diseñoresponsive, pero eso no es excusa para renunciar totalmente al concepto. Muchos sitios web utilizan fondos de pantalla completa y aun así siguen siendo responsives.
Ejemplo 9: Santiago Hotels
En este caso, vemos que la imagen de fondo aun achicándose con el diseño responsive, sigue abarcando todo el espacio del fondo.
Para finalizar, podemos recomendar aplicar estos estilos a cualquier tipo de sitio web. El contenido a pantalla completa se ha vuelto popular y está soportado por la mayoría de los navegadores web.
Estos consejos deberían ser suficientes para empezar a probar diseños de páginas web modernas y bien elaboradas.
En este artículo, presentamos algunos usos para las imágenes y vídeos de fondo. Las mejores prácticas para esto están en constante desarrollo, pero se han estabilizado, centrándoseen la usabilidad, la experiencia de usuario, y en darle prioridad al contenido. Mientras el sitio web sea funcional y el contenido del fondo se sume al mensaje general, entonces el uso de estos elementos está en el camino correcto.
Imágenes versus video
Un fondo de pantalla completo está compuesto típicamente por una imagen o un vídeo. Si se usan imágenes, se pueden incluir fotos, ilustraciones, un collage de imágenes, e incluso un slider para darle movimiento. Usar un video es más simple en el aspecto del diseño, ya que solo es un elemento, pero también es más difícil de implementar, ya que depende del soporte que entregue el navegador.
En cualquier caso, un principio importante y que siempre debe tenerse presente, es que los fondos deben ser tratados como un accesorio y no como una necesidad. Si se eliminaran del diseño web la imagen a pantalla completa o vídeo, el contenido todavía debería poder leerse correctamente y organizarse adecuadamente.
Ejemplo 1: Agencia deportiva Onside
En este caso, la agencia opto por una imagen y poco texto sobre ella, destacando lo más importante del servicio que ofrece, para saber más se puede acceder a un menú de color llamativo, con respecto al fondo
Ejemplo 2: Zachgold
En este otro ejemplo, se optópor un collage sin textos y un menú para saber más del sitio.
Ejemplo 3: Adidas Design
Acá la página nos ofrece la opción de ejecutar o no el video, con un menú en la parte inferior. De no hacerlo, la imagen a pantalla completa está bien elegida para hacer destacar el poco texto presente, y el menú de desplazamiento.
Diseño de la página de inicio del sitio (Home)
El lugar más común y más útil para incluir contenido a pantalla completa en un sitio web, se encuentra en la página de inicio. Otras páginas del sitio se destinan para contenidos específicos, como pueden ser los catálogos de productos, los datos de contacto de la empresa, o información de otro tipo sobre la empresa o sus clientes.
Una alternativa para la página de inicio es hacerla en un solo color, y a medida que se baja mediante el scroll, van apareciendo otras imágenes y textos de diversos colores.
Lo que es importante, es que incluya muy poco texto y un menú, ya que así la página llama la atención y hará que el usuario deba recorrer la página para descubrir todo lo que el sitio puede ofrecer.
Ejemplo 4: Underbelly
Esta empresa optó por una imagen de color azul para el inicio, un menú de iconos y un desplazamiento vertical.
Ejemplo 5: Brady Williams
Este chef uso una imagen en tonos verdes oscurecida, y una frase, nada más, para descubrir lo que ofrece el sitio, el usuario debe hacer uso del scrollieng vertical.
Alto contraste
El contraste es la propiedad de visibilidad entre un primer y segundo plano. Por ejemplo, en el caso de texto blanco sobre fondo negro la página posee un contraste muy alto. Esto es exactamente lo que busca el diseño web con los fondos de pantalla completa.
Ejemplo 6: Gravitate design
En este caso, el video de fondo se oscurece, para destacar el texto en blanco, además de utilizar un color rosa intenso para hacer contrastar el menú con el fondo.
Es necesario colocar el texto más importante en lugares con fondo algo oscuros, y si no es posible simplemente dar al texto un fondo de color sólido. Es bueno recordar que el contenido de pantalla completa está destinado a ser visualmente atractivo, y complementar el contenido. No sirve de nada tener un sitio atractivo siel usuario no puede leer la información que se le entrega.
Videos y sliders a pantalla completa
Cuando se trata de imágenes a pantalla completa podemos elegir dos tipos de diseño de fondo. Uno es el fondo estático con una imagen fija, mientras que el otro es dinámico, con diferentes estilos de rotación de imágenes. Estas presentaciones en rotación son populares porque pueden mostrar el trabajo de diseño de una empresa o de un fotógrafo.
Ejemplo 7: Valentino
En este caso se optó por imágenes que cambian mediante el scroll vertical. Lo útil del diseño es que la tratarse de líneas de productos, se puede usar una imagen de fondo distinta para cada una de ellas. Ropa, accesorios, regalos, etc.
Ejemplo 8: Ideaware
Un sitio con imágenes en movimiento, y oscurecidas, para que el texto blanco en ningún momento deje de poder leerse por parte del usuario.
Distribución de tamaño variable
Una de las tendencias del diseño web en los últimos años, y que seguirá siendo prioritario, es el diseño responsive. Este aspecto debe ser considerado siempre como fundamental en el diseño web moderno, permitiendo que un solo diseño pueda ser visualizado en cualquier resolución de pantalla.
Con fondos de pantalla completa, puede ser más difícil de crear un diseñoresponsive, pero eso no es excusa para renunciar totalmente al concepto. Muchos sitios web utilizan fondos de pantalla completa y aun así siguen siendo responsives.
Ejemplo 9: Santiago Hotels
En este caso, vemos que la imagen de fondo aun achicándose con el diseño responsive, sigue abarcando todo el espacio del fondo.
Para finalizar, podemos recomendar aplicar estos estilos a cualquier tipo de sitio web. El contenido a pantalla completa se ha vuelto popular y está soportado por la mayoría de los navegadores web.
Estos consejos deberían ser suficientes para empezar a probar diseños de páginas web modernas y bien elaboradas.
Fuente: America
No hay comentarios:
Publicar un comentario