Una guía completa para diseñar fondos en 2024

Si se suscribe a un servicio desde un enlace en esta página, Reeves and Sons Limited puede ganar una comisión. Vea nuestro Declaración de Ética.

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 correctamente es más difícil de lo que era antes y presenta algunos desafíos nuevos, al tiempo que restringe parte del potencial que tienen otros fondos.wise tendría.

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

Por qué las cosas han cambiado es por la necesidad de responsive diseño y la diversidad de diferentes tamaños de pantalla y tipos de pantalla que la gente podría 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 puede ver en la imagen de arriba, los sitios web mejor clasificados no se molestan en absoluto con los fondos, y no parece haberles hecho el más mínimo daño con respecto a la aceptación del usuario.

Esto va en contra del pensamiento convencional sobre el diseño de sitios web, pero es difícil discutir con hechos fríos y duros. Sorprendentemente, el primer sitio web en la lista con un fondo no se activa hasta que llega al número 10, que es Twitter, y ese fondo solo es 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 (10º puesto)
  • 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 un fondo de sitio es que ayuda a mantener un sentido de identidad del sitio en varias páginas, pero dado 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 presentan desafíos adicionales cuando se trata del sitio responsiveness, y puede requerir una actualización frecuente para evitar que se vuelva obsoleto.

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 mejor clasificados y deshacerse de la idea de fondo de una vez por todas. Pero si el resumen insiste en que el sitio debe tener antecedentes, ¿qué puede hacer? Eso es lo que intentaremos 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 su página en diferentes capas, puede crearle problemas cuando necesite 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 sentir que eso no es importante para usted en este momento, pero a menudo sucede que se convierte en un factor más adelante.

Lo más importante que hay que entender es que el "fondo" es todo lo que no es contenido. 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 determinar dónde debería estar su contenido en relación con el fondo. En este día de responsive Sin embargo, el diseño suele ser más complicado que eso.

Con responsive diseño, 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 donde el contenido siempre se ve (más o menos) igual sin importar en qué tipo de pantalla se vea.

Usando la escala para responsiveness

Cuando usa 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 el esperado o incluso el deseado, especialmente si usa un fondo fotográfico.

Veamos un ejemplo de esta técnica en acción. Comenzando con el Samsung Galaxy S5 en modo vertical (tenga en cuenta que estas imágenes están escaladas para encajar en el artículo, por lo que el texto que puede ver allí es realmente legible en el propio dispositivo).

Así es como se ve en modo horizontal (casi siempre es mejor sostener un teléfono en orientación horizontal para todo excepto para hacer llamadas telefónicas, sin embargo, la gente aún insiste en sostener 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 use el escalado es que hay poca variación entre diferentes dispositivos y resoluciones, excepto que puede haber mucho espacio vertical desperdiciado en la vista vertical.

En realidad, sería mejor usar diferentes métodos en las partes de fondo y contenido, de modo que los elementos del menú se ajustaran en una cuadrícula de 2 × 2 en lugar de permanecer siempre en un diseño de 1 × 4, pero la razón por la que no se hace de esa 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 por fases responsiveness

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 gradualmente si no hay suficiente espacio para mostrarlo, por lo que el contenido del sitio siempre recibe la máxima atención.

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

Samsung Galaxy S5 paisaje.

retrato del iPad.

iPad paisaje.

Aquí se puede 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 sostiene en posició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. Estirar normalmente es mejor para fondos fotográficos o para confinarlos dentro de un espacio predefinido.

La era de los grandes fondos llamativos está prácticamente muerta, a excepción de los sitios especializados destinados solo para verlos en una desktop. La mayoría de los fondos diseñados para desktops no se verá bien cuando se ve 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 endivifondos duales para cada punto de interrupción, pero como de costumbre, 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.

Comentarios Comentarios 0

Deje un comentario

Su dirección de correo electrónico no será publicada. Las areas obligatorias están marcadas como requeridas *

Clasificación *

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.