La separación frente-fondo

Escrito por Tzek el 18/11/08
Clasificado en: Diseño de Información, Diseño de Interfaces, Diseño Gráfico, Diseño Web, Métodos y proceso de diseño, Reflexión

Un producto de diseño visual, por su naturaleza, "aplasta" dentro de un área delimitada los elementos que lo constituyen, viviendo éstos "en capas". En forma burda, podemos distinguir al menos dos: un frente y un fondo. Si nuestro ojo está mejor educado podemos descomponer el frente en dos o más capas también, sin embargo lo que sí es un problema de diseño es cuando no se pueden distinguir al menos estas dos capas, ya que no se puede "leer" o extraer el significado de lo está al frente o bien, entender si el fondo es despreciable.

Esta separación se hace más importante cuando los productos poseen un carácter informativo con el fin de tomar decisiones o bien, involucran realizar una tarea. Ejemplos de éstos son sitios web, interfaces gráficas en teléfonos celulares, cajeros automáticos, señales en las autopistas, entre otros. En algunos casos el tiempo en el que el usuario puede separar el frente del fondo resulta relevante; por ejemplo, ¿qué implica si en una autopista a 120 km/h un conductor no puede entender lo que dice una señal porque la información pertinente no se distingue del fondo? 

La separación del frente y del fondo depende de dos factores básicos:

  1. La estructura visual de lo que constituirá el frente. Esta estructura implica que la información tiene una buena distribución y una buena jerarquización; es decir, se pueden identificar los pedazos o chunks de información.
  2. El contraste visual entre el frente y fondo.

Poco contraste entre el contenido informativo y el fondo

Manejo del fondo de un sitio web

Mejor contraste con el fondo

En algo "más" sencillo como un sitio web, puede cometerse el error de colocar la información "directamente" sobre una imagen de fondo (que puede repetirse o no) y a veces, aunque haya una estructura visual, el contraste entre el frente y fondo no es suficiente y todo queda "ruidoso".

Variaciones del mismo fondo que ayudan a identificar el contraste que separa el fondo de un frente de información ya visualmente estructurada.

La separación entre el frente y el fondo podría ser equivalente a tener una letra escrita en una hoja de papel. No importa la tinta empleada o el tipo de papel; para ser leída, es importante que se pueda distinguir la letra, entonces se cuida la forma de la letra misma así como el papel en el que se escribe. Contrariamente, una letra garigoleada (con mucho adorno) sobre un papel excesivamente texturizado podría dificultar la lectura.

18 Comentarios.   ¡Faltas tú!

  • Rodohobbit

    Hola mi querido Tzek!

    Hace un rato que no comentaba por acá. Buen post! Medio ñoño pero bueno a fin de cuentas…jajaja!

    A ver si un día de estos que no esté tan ocupado te echo una llamada. Por lo pronto te dejo aquí un par de ligas que te podrían interesar.

    Un abrazo.
    Rodohobbit.

    http://www.flypmedia.com/issues/17/#1/1

    http://issuu.com/fontshopsf/docs/font007?mode=embed&documentId=081010000946-f0f6b267f0094d5bafafd96a6ab6ea19&layout=grey

  • http://lacoctelera.com/berzma br

    Tzek! ya se extrañaban tus posts!!
    si, es algo interesante, y que de repente se ve por ahi un diseño con este problemilla.
    lo que me pasa a mi es en algunos telefonos celulares, como que el brillo no me deja enfocar lo que trato de leer…pero si esto lo he visto en algunos sitios..donde el fondo (aún siendo una plasta de color) no te deja leer el contenido, por contraste.

  • http://bluku.tv Hugo E. López Menéndez

    Acaso estás burlandote de mi sitio web?, concuerdo que está un poco ñoño el post, pero es para resolver problemas de usabilidad.

    buen post.

  • http://lumagogu-design.blogspot.com/ Luis Martín González

    Prof Omar:
    Me parecio interesante el artículo, ya que demuestras la importancia del cuidado entre separar el frente – fondo en los objetos de Diseño, en especial en los Sitios Web, los cuales a menudo presentan esta problemática, en la cual aveces por muy bien logrado que este el diseño del fondo, en cuestión de usabilidad para el usuario es pésimo al grado de no poder leer lo que esta en la página. En lo pesonal un problema que he experimentado que puedo ligar por tratarse de algo similar es el caso de algunos cajeros automáticos los cuales tienen tanto adorno y una tipografía mínima, en ocasiones no sabes ni lo que estas visualizando.

  • Mariana Arrioja

    Prof. Omar,
    Interesante artículo y muy cierto porque en ocasiones el diseño de fondo de algunos Sitios Web te impide apreciar el contenido. Coincido con Luis en que dicho problema lo puedes llegar a encontrar en los cajeros automáticos, pero también incluiría a algunos celulares en los que el brillo te impide leer los textos. Creo que debe de existir un cierto “equilibrio” entre el frente-fondo en un diseño, aunque no siempre es tan fácil alcanzarlo.
    Saludos!

  • Armando García

    Muy interesante post ya que si pasa muy amenudo, y simplemente no se entiende a lo que se quieren referir por eso hay que tener mucho cuidado y hacer con cuidado este tipo de cosas para no caer en este tipo de problemas.

  • itzel Lopez

    omar:
    super acertado tu post, es verdad que en las aplicaciones de diseño muchas veces ocurren cosas como las que comentas no se hace un buen diseño de fondo por lo que el frente se ve afectado, pero esto sucede por que no pensamos claramente en la usabilidad del producto de diseño, muchas veces te enfocas mas en adornar la interfaz para que se vea linda y no te ocupas de lo que realmente es importante de la función que pretende cumplir tu producto y olvidamos poner prioridades y como menciona mariana lograr un equilibrio, que nos lleve a lograr nuestro objetivo.
    concuerdo con mis compañeros en los ejemplos que mencionan acerca del mal uso del fondo con el frente.
    Salu2s.

  • Valeria Montiel

    Totalmente de acuerdo. La cuestión en este asunto es considerar los porqués. Las formas cerradas o “terminadas” son más estables visualmente, lo que hace que el usuario tienda a “cerrar” y a completar con la imaginación las formas percibidas, buscando la mejor organización posible, y esto se realiza de manera subconsciente como forma de reducir la tensión perceptiva que nos genera una figura no reconocible para nosotros. Aunque nuestra mente sabe por experiencia que existe un frente y un fondo en el monitor o cualquier material gráfico, nos cuesta evitar esta tendencia al cierre cuando los elementos presentan características similares que nos impiden hacer una organización jerárquica de estos. Se requiere de un esfuerzo cognitivo para reestructurar la imagen en función de nuestro sentido común. Ahora, el diseñador debe encargarse de ahorrar al usuario este esfuerzo cognitivo, ya que no hay nada mas desconcetante que un estímulo para el que no disponemos un marco de comprensión adecuado, y anula por ende la efectividad del mensaje.

  • Idalia Molina

    Muy interesante, creo que es un error muy frecuente al momento de hacer no solamente páginas web sino en cualquier producto de diseño; como diseñadores de informaci{in es importante que tengamos esto en cuenta pues para que la información sea leíble primero tiene que ser legible y no puedes esperar que el usuario reciba el mensaje si no puede descifrarlo.

  • Mallinalli Gabarrón

    Me engañaste!!! jajajaja este post ya lo había leído, pensé que iba a ser algo nuevo.
    Sí me parece que es básico poder distinguir los elementos visuales del fondo, si no, el trabajo es una porquería, pero tengo dudas con la funcionalidad de los fondos de marcas de agua… porque los usan mucho y a mi juicio no son necesarios. Aveces incluso “anacan” el producto.
    Se supone que esto lo aprendimos en primer semestre, pero sí hay clases en las que se olvida el conocimiento anterior. :)
    Saluditos!!

  • Ivan Maliachi ibero Puebla

    Creo que la distinción entre lo que esta adelant
    y lo que esta atrás es importante, como vimos
    en el ejemplo no se debe dificultar la distinción
    de capas.

    en pocas palabras la fácil distinción de las capas
    hace fácil el entendimiento

  • christian

    hola profe, me parecio muy interesante ya que a menudo eh tenido este problema ya que en muchas paginas no existe esta separacion ni ponen atencion a esto y nos causa muchos problemas de visibilidad que a menudo hacen qque las paginas ademas de otras cosas se tornen desesperantes, y no entendibles….

  • angel Lira Ramos

    Hey, el conductor que no leyera eso a 120 km/h moriría!, claro solo si es de suma importancia el letrero jaja!

    esta muy interesante el post, pero màs que interesante, es útil, ya que así es como debemos hacer las cosas en realidad!

  • Fatyma fay

    Pareciera algo sumamente tonto, pero muchos lo cometemos todavía. Las imágenes de fondo de repente se volvieron toda una moda para mi cuando empecé a bajar wallpapers :p jajaja (como esas páginas que luegon ponen mosaicos de fotos con poca resolución >__>, cosas feas…), en fin, a mi parecer incluso imágenes de fondo abajo de texto se me hace algo muy poco estético, prefiero omitirlas o dejarlas al ladito =)

  • Kahiry Daniela G

    O_o, el problema mayor… es que los de los micros/combis etc etc. No saben de estoo!! aaa! Yo medio ciega y ellos con sus super contrastes que no se ven, sólo se distinguen cuando están a 1.5 m de distancia del ojo humano. Son cansados y ademas son un peligro para las personas (que se acercan más de la cuenta a la calle) Quizás muchos piensen que no tiene que ver con su “área de diseño” pero naaa. esas cosas deberían ser funcionales….

  • Araceli

    Buen post Omar, al final de cuenta con nuestros diseños estamos transmitiendo un mensaje, el cual debe ser claro y entendible.

  • Josimar

    El saber utilizar el fondo para dar información y datos a las personas, pueden ser cruciales en momentos críticos de la vida, Ya se que suena muy extremo pero el saber reconocer un letrero que diga aquí esta el hospital significa que trabajo con la separación de frente y fondo fue acertada

  • Victor Hugo Pérez Cruz

    Me parece interesante el articulo creo que como diseñadores una de nuestras principales tareas es facilitar el entendimiento de lo que persevimos con la vista, facilitar la asimilacion y lograr transmitir información de una manera rapida, facil y sencilla.