Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Photography
Webdesign

La guía del diseñador web para seleccionar la imagen de fondo perfecta

by
Length:ShortLanguages:

Spanish (Español) translation by Elena Pari (you can also view the original English article)

Durante mucho tiempo los fondos han sido un ingrediente clave para un sitio web bien diseñado. Las tendencias modernas de diseño han puesto aún más énfasis en ellos. Ahora ya no solo se espera que le den un marco al contenido, sino que también proporcionen una separación visual para varias secciones dentro de una página.

Cuando usas imágenes para el fondo de tu sitio web, es mejor elegir con cuidado. La elección equivocada realmente puede desviar tu mensaje; sin mencionar los posibles impactos negativos en la accesibilidad.

Con esto en mente, exploraremos algunas de las mejores prácticas para elegir e insertar imágenes de fondo.

1. La accesibilidad es lo primero

La primera pregunta que uno debe hacerse al considerar una imagen de fondo es: ¿Qué efecto tendrá en la legibilidad del contenido? Asegúrate de que el texto sea legible y que, cuando se combine con el fondo, se establezca una relación de contraste aceptable.

Si no estás muy seguro de los problemas de accesibilidad anteriores, pero realmente te encanta una imagen en particular, hay algunas cosas que puedes hacer para que funcione. Puedes usar un software de edición de fotos o incluso CSS para cambiar elementos como la opacidad y el contraste, o agregar máscaras para que el contenido sea más legible. También es importante elegir el tipo y el tamaño de fuente adecuados para el texto en sí.

Garden flowers on wood
Flores de jardín sobre madera

En conclusión, el fondo nunca debe interferir con la capacidad de un usuario para ver correctamente el contenido.

Real Ray of light from Underwater
Vista submarina de un rayo de luz

2. Las fotos deben ser relevantes y ordenadas

Los fondos fotográficos se han vuelto muy populares en la web y son una excelente opción para cubrir áreas amplias. Es una buena idea elegir fotos que de alguna manera sean relevantes para el sitio web. Podría ser una foto de la ubicación física, un producto o un servicio de tu empresa. Pero también puedes buscar algo que ayude a transmitir el mensaje del contenido. Las imágenes de fondo deben considerarse como parte de la estrategia general de tu marca.

Batumi Adjara Georgia Panorama Aerial View Of Urban Cityscap
Batumi, Adjara, Georgia. Panorama, vista aérea del paisaje urbano

Es recomendable usar fotos que tengan algún espacio vacío (como un horizonte o un campo de hierba). Una foto abarrotada puede distraer del contenido, aún si se ajustó la opacidad o el color. Esto no significa que no puedas usar fotos de acción u otras imágenes llamativas. Es más una cuestión de evitar las imágenes que resulten demasiado abrumadoras.

Waterfall in Alaska
Cascada en Alaska

3. Usa texturas que sean sutiles y continuas

Las texturas le pueden agregar un toque de clase a la apariencia general de un sitio web. Ya sea que quieras usarlas para el fondo de una página o para un área específica del contenido, busca texturas sin divisiones, de manera que se pueda repetir el patrón en toda la pantalla para que se vea como una imagen grande. Si bien a veces es posible usar una imagen de la textura a tamaño completo, no siempre funcionan bien –especialmente las detalladas– en los diferentes tamaños de pantalla. Además, las imágenes de gran tamaño pueden alargar el tiempo en el que carga la página.

Dark Patterns
Patrones oscuros

La sutileza también es deseable en una textura (a menos que prefieras un aspecto más grotesco). Una vez más, la idea es no abrumar a los usuarios con patrones demasiado audaces. Busca imágenes con líneas y colores suaves que contrasten bien con el contenido.

Geometric Minimal Patterns
Patrones geométricos minimalistas

4. Considera múltiples pantallas y dispositivos

El área visible de un fondo puede cambiar dramáticamente en los diversos tamaños de pantalla. Esto puede afectar en particular a las fotos. Lo que puede parecer simplemente espectacular en un monitor de pantalla ancha también puede verse fatal en un teléfono móvil, ya que tal vez se pierdan partes clave de la imagen y, por ende, se pierda el contexto.

El desafío aquí es en parte la selección de fotos y en parte el código. Primero, busca imágenes que se ajusten a la relación de aspecto (paisaje, retrato, cuadrado) del contenedor principal. Es más probable que estas se adapten bien a las pantallas más pequeñas.

Telephone Smart Phone Technology Connecting Concept
Teléfono Teléfono inteligente Tecnología Concepto de conexión

También debes revisar cómo el CSS de tu sitio web maneja las imágenes de fondo para las diferentes pantallas. Por ejemplo, la propidad CSS background-size: cover; garantiza que esté visible toda la imagen. Solo recuerda que puedes cambiar un poquito el tamaño del contenedor. Lo más probable es que se tengan que hacer ajustes para que todo se vea perfecto a nivel de píxel en todos los dispositivos.

Diverse Group of People Community Togetherness Concept
Grupo diverso de personas Comunidad Concepto de compañerismo

5. Comienza con imágenes de alta resolución, luego recorta

Cuando descargues imágenes que planees usar para un fondo, elige la resolución más alta disponible. Esto permitirá realizar las modificaciones necesarias y luego recortar la imagen a un tamaño más apropiado. Asegúrate de guardar las versiones editadas como un archivo separado.

Dark Textured Spotlight Backgrounds
Fondos de luz con textura oscura

Determinar el tamaño apropiado dependerá del ancho del contenedor en el sitio. Mientras que algunas imágenes se estiran o se repiten bastante bien (una ventaja de usar texturas sin divisiones), otras pueden aparecer distorsionadas. En ese caso, recorta de acuerdo al lado más ancho que necesitas. Incluso puedes utilizar consultas de medios CSS para usar versiones más pequeñas de una imagen en otros tamaños de pantalla.

Vintage Effects for Photo or Designs
Efectos vintage para foto o diseño

Trayendo los fondos al primer plano

Es comprensible que con tantas tecnologías interesantes que influyen en el diseño web no se le preste mucha atención a los fondos, pero ellos desempeñan un papel muy importante en la narración y nos ayudan a crear una interfaz de usuario agradable. Los fondos a página completa ayudan a establecer el tono para un sitio web, mientras que los fondos de las secciones le brindan a nuestro contenido algo de espacio para respirar.

Por supuesto, todo funciona mejor cuando elegimos imágenes que satisfacen nuestras necesidades. Imágenes que no interfieren sino que mejoran la capacidad del usuario para consumir contenido. Pero también debemos considerar detalles como el tamaño, la relación de aspecto y la idoneidad para dispositivos móviles. Recuerda que los detalles son importantes, incluso si se trata de elementos utilizados en segundo plano.

Enlaces útiles


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.