Blog de iStock Buenas Prácticas Diseño Ideas de fondos que son tendencia para tu sitio web

El diseño de fondos de sitios web ha recorrido un largo camino desde los primeros días de Internet. Hubo un tiempo en el que los fondos de los sitios web eran solo colores sólidos o imágenes aparentemente aleatorias que podían no tener el tamaño correcto para la página.

Hoy en día, las imágenes de fondos son una forma de arte por derecho propio y van mucho más allá de tu sitio web. Desde sencillos y modernos, como degradados sutiles, hasta ilustraciones abstractas con efecto líquido, el fondo perfecto para un sitio web puede ser como una alfombra que unifique la habitación.

En este artículo, cubriremos algunas de las preguntas que los diseñadores hacen sobre los fondos de sitios web y abordaremos algunas de las tendencias más importantes en el diseño de fondos de sitios web que hemos visto últimamente.

Un buen fondo debe complementar el resto de tu diseño y tener varios atributos básicos.

• Utiliza el mismo esquema de color general 
• Coincide con el sitio web o marca
• No distrae la atención de los elementos más importantes del diseño
• Tiene el tamaño adecuado (es decir, el archivo no debe ser demasiado pequeño ni demasiado grande; más información sobre esto a continuación)
• Es de alta resolución (es decir, no debe verse pixelado)

A partir de ahí, el patrón de fondo perfecto es una cuestión de gusto personal. Si te gusta cómo se ve y piensas que no distrae y que coincide, probablemente funcione con tu diseño.

Si bien el mejor color de fondo para un sitio web depende de la estética general y de la combinación de colores existente, los fondos de colores neutros y claros suelen ser atractivos para la mayoría de los sitios web. Esto es porque todos quieren que su fondo complemente las funciones más importantes de su página, incluidos texto, llamadas a la acción y otras imágenes.

Generalmente, un color de fondo más claro servirá para mostrar las imágenes, el texto y los gráficos que deberían ser el punto focal de tu sitio web. Los colores de fondo del sitio web que sean más oscuros o más brillantes podrían distraer demasiado la atención de los elementos que importan de tu sitio.

Según WordPress.com, el tamaño de fondo ideal para un sitio web es de 1920×1080 píxeles con una relación de 16:9 y un DPI de al menos 72. Es posible que el tamaño de imagen de fondo más óptimo sea diferente para tu sitio web en función de cómo fue diseñado, pero 1920×1080 píxeles es generalmente la opción más segura para una imagen de fondo.

Como todo lo demás en diseño, las tendencias de fondos de los sitios web cambian con el tiempo. A continuación se muestran algunos diseños de fondos interesantes que podrían servirte de inspiración.

Los fondos degradados de color están teniendo su momento en la actualidad. Los degradados de color pueden ir desde una apariencia sutil que difumina un tono de un color con otro, a versiones más atrevidas donde diferentes colores se funden entre sí.

Hay algunos tipos diferentes de degradados.

• Lineal, donde los colores o matices cambian en una línea horizontal, vertical o lateral 
• Radial, donde los colores o matices cambian hacia afuera en un patrón circular
• Reflejado, que es similar a lineal pero los tonos cambian como un espejo

Por ejemplo, este fondo vectorial abstracto con un degradado sutil sigue vagamente el patrón radial. Los tonos más claros están en el medio y se desvanecen en rojos cálidos y azules fríos con un tono melocotón cálido en el medio.

Una gran ventaja de los degradados radiales para las texturas de fondos de sitios web es que puedes centrar los elementos importantes de tu página en el medio, donde el degradado está menos cargado.

También hay fondos con degradados difuminados, que se adhieren a diferentes tonalidades en un mismo color general. Este no sigue ninguno de los tres tipos de degradados principales. En cambio, ondula de una manera que agrega movimiento a la apariencia de un sitio web.

Las imágenes de fondos degradados no se limitan a uno o dos colores. Por ejemplo, hay patrones de fondos que combinan múltiples remolinos de colores juntos (es decir, azules, morados, rojos, amarillos y naranjas). Puede que esto resulte demasiado cargado para algunos diseños de sitios web ya bien surtidos de contenido, pero podría ser una gran característica para sitios más simples.

También podría ser una buena opción para un sitio web donde solo fuera visible el borde exterior de la imagen de fondo. Los visitantes del sitio seguirían disfrutando de un hermoso estallido de color, pero no se sentirían abrumados ni distraídos por los colores arremolinados en el medio.

Cuando se trata de patrones de fondo, lo mejor es mantener las cosas relativamente simples.

Este fondo es un gran ejemplo de un patrón sencillo que utiliza bloques y colores fríos para crear movimiento en la página sin resultar abrumador. También hay algo vagamente abstracto en el patrón que le da una sensación moderna.

He aquí otro ejemplo de un fondo de patrón geométrico. Esta vez, sin embargo, en lugar de un patrón simple y repetitivo, vemos un patrón de líneas geométricas asimétricas y colores que se funden entre sí. A diferencia del último patrón (que era más sutil), este patrón es extremadamente abstracto y moderno.

Lo bueno de este fondo es que crea el efecto de movimiento con el ojo, pero no distrae.

Las ilustraciones líquidas se refieren a un patrón fluido de colores que pueden recordar al papel veneciano, a una lámpara de lava, a una salpicadura artística al estilo de Jackson Pollock o cosas por el estilo.

Nuestro primer ejemplo de fondos líquidos y en forma de remolino es este fondo de pinturas de colores que aporta una visión moderna del género. A pesar de que hay varias líneas y algunos colores primarios, este fondo complementa, en lugar de eclipsar, al elemento principal de la página (el cuadro de contenido).

También hay muchos ejemplos de ilustración líquida que recuerdan al expresionismo abstracto de Pollock. Como este fondo colorido de salpicaduras de colores del arcoíris que se encuentra en el medio de la página y se extiende hasta los bordes.

Una cosa excelente acerca de los fondos en los que suceden muchas cosas en el medio de la página, es que la parte más ocupada de la imagen no distraerá al espectador de la información importante de tu sitio web. Dependiendo del diseño de tu sitio, es posible que el espectador solo vea ocasionales toques de color que se irradian desde el centro. Esto le da vida a tu sitio web sin eclipsar el resto de tu diseño.

A primera vista, este fondo puede parecer más geométrico que líquido. Sin embargo, el movimiento de las formas naranjas evoca una lámpara de lava fluyendo.

En este ejemplo, los elementos de diseño de la imagen no están centrados. En cambio, el ojo se dirige hacia la esquina inferior derecha de la página mientras que el resto de la página permanece neutral. Además de ser un bonito y sencillo toque de color que encantará a los visitantes del sitio, atrae la atención hacia la parte inferior de la página, impulsando el scroll.

Una de las tendencias más relajantes en el diseño de fondos de sitios web son las ilustraciones de paisajes (tanto escenas urbanas como naturales). Mientras que los paisajes puede que no sean adecuados para todos los sitios web, muchos blogueros y empresas consideran que este tipo de fondos se ajustan a su tema general, misión de marca, voz y tono general.

Este fondo vectorial de colinas onduladas viene en algunas variaciones cromáticas para adaptarse a diferentes combinaciones de colores. Como muchas ilustraciones de paisajes, sus degradados cambiantes dan la impresión de flotar en el horizonte.

Este ejemplo es perfecto para blogueros de viajes, causas ambientales, sitios de turismo de naturaleza y más. A pesar de ser una ilustración, ofrece más realismo que el primer ejemplo con colinas. Incluso si el contenido del sitio web cubriera la mayor parte de la mitad de la página, el visitante aún podrá ver los árboles de hoja perenne, los cielos azules y una topografía atractiva de fondo.

Los fondos de paisajes no se limitan a escenas naturales. Por ejemplo, este fondo de un horizonte de la ciudad aporta una toma atractiva. Al igual que nuestro primer ejemplo de paisaje, utiliza degradados y una combinación de colores monocromáticos. Esto anima al ojo del espectador a recorrer la página sin perder la atención de otros elementos de la página.

¿Estás listo para probar algunas imágenes de fondo nuevas en tu sitio web? Puedes buscar fondos de escritorio y de sitios web por categoría artística (p. ej., fondos abstractos) o función (p. ej., fondos escolares).