Diseño de fondos para sitios web

Una vez que la parte más importante del diseño de un sitio web, el fondo de un sitio puede usarse de muchas maneras para ayudar a crear una mejor experiencia de usuario.

Hoy en día, crear fondos de manera adecuada es más difícil de lo que alguna vez lo fue, y presenta algunos desafíos nuevos, al tiempo que restringe parte del potencial que de otra manera tendrían los fondos.

Por ejemplo, el fondo en tiempos anteriores podría ser usado como parte práctica del diseño. Podría ponerle flechas, por ejemplo, para dirigir la atención del espectador hacia algo importante.

La razón por la que las cosas han cambiado se debe a la necesidad de un diseño receptivo y la diversidad de diferentes tamaños y tipos de pantalla que las personas podrían estar usando.

Como resultado, el fondo se ha convertido en un elemento menos importante en el diseño de sitios hoy en día, y muchos sitios no tienen antecedentes oficiales en absoluto.

¿Son los fondos realmente importantes? Para averiguarlo, inspeccionamos los sitios web mejor clasificados de 30 (sin incluir las repeticiones) y los resultados son muy interesantes.

Como se puede ver en la imagen de arriba, los sitios web mejor clasificados no se molestan en absoluto en los fondos, y no parece haberles hecho el menor daño con respecto a la aceptación del usuario.

Esto se opone al pensamiento convencional sobre el diseño de sitios web, pero es difícil discutir con datos duros y fríos. Sorprendentemente, el primer sitio web en la lista con un fondo no se activa hasta que alcanza el número 10, que es Twitter, y ese fondo solo está visible si no ha iniciado sesión.

En los principales sitios web de 30 para 2017, los únicos sitios con antecedentes adecuados fueron:

  • Twitter, con un fondo fotográfico (clasificado 10th)
  • En vivo (Outlook), con un fondo de color sólido (clasificado 12th)
  • NetFlix, con un fondo de collage (clasificado 21st)
  • WordPress, con un fondo de color sólido (clasificado 26th)
  • Bing, con un fondo fotográfico (clasificado 29th)
  • Tumblr, con un fondo fotográfico (clasificado 30th)

Así que solo 20 por ciento de los principales sitios web de 30 tenían antecedentes, y los que sí lo estaban estaban en la lista.

La única ventaja de los antecedentes del sitio es que ayuda a mantener el sentido de identidad del sitio en varias páginas, pero ya que hay otros elementos que pueden lograr este objetivo igual de bien y quizás mejor, eso no es realmente una gran ventaja.

Las desventajas son numerosas. Los fondos introducen desafíos adicionales cuando se trata de la capacidad de respuesta del sitio, y pueden requerir actualizaciones frecuentes para evitar volverse obsoletos.

Otro desafío para el diseñador moderno es que, además de los fondos estáticos, ahora también es posible crear fondos de video. Si opta por este último, es vital saber lo que está haciendo, porque muchos usuarios encontrarán un fondo de video mal diseñado para ser molesto.

Con tantas razones para no usar fondos, puede decidir seguir los pasos de esos sitios web de primer nivel y deshacerse de la idea de fondo de una vez por todas. Pero si el breve insiste en que el sitio necesita tener antecedentes, ¿qué puede hacer? Eso es lo que trataremos de resolver en el resto de este artículo.

Los fondos deben estar contenidos

El contenido siempre debe estar en una capa sobre el fondo de la página. Si no separa los elementos de la página en diferentes capas, puede crear problemas cuando se necesita cambiar algo.

Es una buena práctica emplear esta separación de capas tanto como sea posible. Por ejemplo, ¿el logotipo del sitio realmente necesita ser incorporado directamente al fondo? La mayoría de las veces sería más sensato tener el logotipo en una capa separada. De esta manera, si el logotipo necesita actualizarse, se puede actualizar independientemente de todo el fondo.

Usar capas de esta manera significa más trabajo para usted en el lado de la creación, pero menos trabajo en el lado de mantenimiento. También le brinda el máximo control, ya que puede ocultar cosas, moverlas o hacer que se comporten de manera diferente según sus necesidades en cualquier momento.

Esta imagen muestra la estructura ideal para una plantilla de diseño de fondo:

Dentro de cada capa (excepto la capa base), existe la posibilidad de crear capas adicionales para grados de separación aún mayores si los necesita.

Cuantos más grados de separación cree, más control podrá obtener. Puede que sientas que eso no es importante para ti en este momento, pero a menudo sucede que luego se convierte en un factor.

Lo más importante que hay que entender es que el "fondo" es algo que no está contento. Por lo tanto, el texto o las imágenes que deben estar en la página pero no como contenido cuentan como parte del fondo, pero no todos los clasificarán de esa manera.

Enmarcado

En los primeros días del diseño web, el encuadre era simplemente una cuestión de averiguar dónde debería estar su contenido en relación con el fondo. En este día de diseño responsivo, sin embargo, es típicamente más complicado que eso.

Con un diseño receptivo, solo tiene dos opciones para lidiar con el problema del encuadre. La primera opción es escalar el contenido y la imagen de fondo en relación con el tamaño de pantalla disponible. Esto es óptimo cuando la integridad del diseño es el factor más importante, aunque esta será una situación bastante rara.

La segunda opción es eliminar gradualmente las secciones del fondo, o incluso todo el fondo, en la situación más común donde la legibilidad del contenido es más importante que la integridad del diseño.

Este problema de "integridad del diseño", por cierto, simplemente significa que el diseño siempre se ve igual, sin importar en qué tipo de pantalla se vea. Lo contrario es que el contenido siempre se ve (más o menos) igual sin importar en qué tipo de pantalla se vea.

Uso de escalado para la capacidad de respuesta

Cuando utiliza la escala para mantener un encuadre uniforme en diferentes tipos de dispositivos y orientación, mantiene la integridad de su diseño, pero el resultado puede no ser siempre lo que esperaría o incluso desearía, especialmente si utiliza un fondo fotográfico.

Veamos un ejemplo de esta técnica en acción. Comenzando con el Samsung Galaxy S5 en modo retrato (tenga en cuenta que estas imágenes se escalan para que quepan en el artículo, por lo que el texto que puede ver en realidad es legible en el propio dispositivo).

Esto es lo que parece en modo horizontal (casi siempre es mejor sostener un teléfono en orientación horizontal para todo excepto para hacer llamadas, pero la gente todavía insiste en mantener sus teléfonos en orientación vertical).

Como puede ver, el diseño está perfectamente bien cuando se escala, incluso cuando solo tiene 640 x 360 píxeles para trabajar. A continuación tenemos el iPad en orientación vertical.

Y el paisaje.

Lo que notará cuando se utilice la escala es que hay poca variación entre los diferentes dispositivos y resoluciones, excepto que puede haber una gran cantidad de espacio vertical desperdiciado en la vista de retrato.

En realidad, sería mejor utilizar diferentes métodos en las partes de fondo y contenido, de modo que los elementos del menú se ajusten en una cuadrícula 2 × 2 en lugar de permanecer siempre en el diseño 1 × 4, pero la razón por la que no se realiza de esta manera es porque es imposible predecir cuánto espacio vertical estará disponible.

Por lo tanto, la ventaja de la escala es cuando desea asegurarse de que algún componente esté siempre a la vista, sin importar cuáles sean las circunstancias.

Uso de ocultar y revelar la capacidad de respuesta

Un escenario más práctico, y el que la mayoría de los diseñadores querrán usar la mayor parte del tiempo, es un diseño en el que el fondo (o partes de él) simplemente se puede eliminar si no hay suficiente espacio para mostrarlo, por lo que el contenido del sitio siempre recibe la máxima atencion

Aquí hay un ejemplo de la diferencia al usar este método. Usaremos los mismos dispositivos y orientaciones para ilustrar. Primero está el Samsung Galaxy S5 retrato.

Samsung Galaxy S5 paisaje.

retrato del iPad.

iPad paisaje.

Aquí puedes ver una diferencia considerable entre dispositivos. La pequeña pantalla del Samsung Galaxy S5 no permite que se muestre el fondo, independientemente de si el dispositivo se mantiene en orientación vertical u horizontal, y lo que se muestra se ajusta para adaptarse al espacio disponible.

Cuando se ve el mismo sitio en el iPad, el fondo siempre se muestra independientemente de la orientación, pero hay alguna diferencia en lo que se ve.

Los mejores conceptos para el diseño de fondo (en orden)

1. Color sólido (o ningún color)

2. Fotográfico (estirado)

3. Baldosa pequeña (perfecta sin costura)

4. Azulejo grande (perfecta sin costura)

Lo que debe evitar es el mosaico de fondos fotográficos a menos que se pueda hacer de tal manera que no se note. El estiramiento normalmente es mejor para fondos fotográficos, o para confinarlos dentro de un espacio predefinido.

La era de los grandes fondos salpicados está bastante muerta, excepto en el caso de sitios especializados que solo se pueden ver en un escritorio. La mayoría de los fondos diseñados para computadoras de escritorio no se ven bien cuando se ven en los teléfonos.

Una solución alternativa que puede hacer es configurar una gran cantidad de puntos de interrupción en su archivo CSS y diseñar fondos individuales para cada punto de interrupción, pero como siempre, tiene el desafío de que el espacio vertical disponible nunca se puede calcular, incluso cuando se conoce el tipo de dispositivo .

imagen del encabezado cortesía de

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.