Mi primer trabajo de diseño fue en una pequeña agencia de diseño de impresión en Manchester que producía el trabajo de varios medios de comunicación: embalaje, publicaciones, marketing de materiales de apoyo y… Correo directo. Pronto descubrí que los principios de diseño gráfico que había aprendido en la universidad eran de poco uso cuando diseñé para el correo directo, donde lo grande, las letras fuertes, y lo apiñado es el orden del día. En palabras de un cliente – palabras que nunca olvidaré – “un espacio en blanco es un espacio vacío”.

Creo que todos hemos tenido que pasar, a manos de jefes o exigencias del cliente, por este momento.

Los clientes del correo directo necesitan sus paquetes para permanecer en el mercado, porque trabajan para ello. Pero para todo lo demás, mi cliente no podría haber estado más lejos de la verdad.

Conocer los espacios en blanco

“Espacio en blanco” o “espacio negativo” es el espacio entre dos elementos en una composición. Más específico, el espacio entre los elementos mayores en una composición es el “macro especio en blanco”. El Micro espacio en blanco es – si, lo has adivinado – el espacio entre elementos más pequeños: entre listas de objetos, entre un título y una imagen, o entre palabras y letras. The itty-bitty stuff.

macroespacio en blanco

Figura 1. Macro espacio en blanco

microespacio en blanco

Figura 2. Micro espacio en blanco.

Así que, ¿qué hacer con el espacio en blanco?

Micro espacio en blanco y legibilidad

Hace un par de meses, tuve bastante suerte de ver una conferencia de Erik Spiekermann. Parte de su charla se basaba en su rediseño del periódico The Economist, que en parte fue motivado por el cliente ya que su diseño era demasiado pesado y el contenido demasiado difícil para leer.

En el diseño del periódico, la información es densa. A veces, como en el diseño web, es difícil añadir espacios en blanco debido al contenido requerido. Los periódicos a menudo tratan con esto poniendo su contenido en un tipo de letra de imprenta sencilla con bastante espacio en blanco entre los caracteres. Esto era parte de la solución de Spiekermann para rediseñar The Economist.

Mientras se conservaba la rareza del tipo de imprenta original de The Economist, Spiekermann lo rediseñó ligeramente, añadiendo más espacios en blanco a los caracteres individuales. Entonces puso una tipografía ligeramente más pequeña y con más resalte. Todos estos cambios añadieron un micro espacio en blanco al diseño. El resultado total era sutil: el contenido era más legible y el sentimiento total del periódico era ligero, aún cuando la cantidad de contenido seguía siendo la misma.

Aunque Spiekermann también añadiera un macro espacio en blanco y color al The Economist su acertado rediseño de la tipografía demuestra que el espacio entre los elementos más pequeños puede tener un impacto grande sobre la eficacia de un diseño – y esto se aplica también al diseño web.

Posicionamiento de la marca

Los diseñadores usan los espacios en blanco para crear un sentimiento de sofisticación y elegancia para las marcas. Junto con un empleo elegante de tipografía y fotografía, el generoso espacio en blanco es visto por todas partes como un mercado de lujo. Los cosméticos, por ejemplo, usan extensos espacios en blanco en su material de marketing para decir al lector que son sofisticados, de la alta calidad, y generalmente caro.

Mi viejo cliente de correo directo estaba en lo cierto en su evaluación del espacio en blanco para su producto en particular, porque los paquetes de correo directo tienen que aparecer por debajo del mercado para trabajar – y la adición del espacio en blanco a su diseño le habría prestado a su paquete una calidad indeseablemente alta. Tome el ejemplo siguiente.

Mensaje directo y diseño de lujo

Figura 3. Ejemplos de correo directo vs. Diseño de lujo.

El contenido es el mismo en ambos diseños, al igual que los otros elementos, así como la fotografía. Aunque los dos diseños están terminados son opuestos en cuanto a la marca. Menos espacio en blanco = barato; más espacio en blanco = lujo.

Mucho más entra en juego la colocación de la marca que el espacio en blanco, pero al igual que un pedido llega a tu escritorio para una marca de lujo, es muy probable que el cliente – y su objetivo, la audiencia – espere que el espacio en blanco y todo lo demás alinee el producto con el de sus competidores.

Espacio en blanco activo y pasivo

El espacio en blanco a menudo es usado para crear un equilibrio, un diseño armonioso. Uno en el que “se sienta” bien. Esto también puede llevar al lector a un viaje por el diseño de la misma forma que deja una “habitación” en una fotografía de retrato para posicionar el objeto en el centro del marco y examinar el espacio restante. Cuando es espacio en blanco es usado para conducir al lector de un elemento a otro se le llama “espacio en blanco activo”.

Vamos a echar un vistazo al siguiente ejemplo antes de que sea aplicado el espacio en blanco activo:

texto antes de añadir espacio en blanco

Figura 4. Texto antes de añadir el espacio en blanco.

Todo está bastante apretado. Tenemos que añadir espacios en blanco para crear la armonía y la comodidad visual en el diseño. Primero, añado márgenes, cambio la tipografía y el tamaño, y también aumento el interespacio (o la altura de línea, como se conoce en CSS). Esto es “espacio en blanco pasivo“.

texto con espacio en blanco pasivo

Figura 5. Texto con espacio en blanco pasivo.

Unos podrían argumentar que el espacio en blanco pasivo es el espacio no considerado presente en una composición. Yo discrepo: si no consideras todo tu espacio en blanco, eso es un mal diseño. El espacio en blanco pasivo crea un espacio que respira y da equilibrio. Eso es importante.

Aunque aún no lo hemos hecho. Dentro de este contenido hay algo que quiero que el lector le preste atención: la segunda cita. Podría destacar este elemento con un color diferente o hacerle una tipografía mayor, pero en este caso, simplemente he añadido un macro espacio en blanco alrededor del elemento para conducir al ojo del usuario, entonces reduzco el micro espacio en blanco dentro de la tipografía para hacerla en negritas y fuerte.

con espacio en blanco activo

Figure 6. Después de que el espacio en blanco activo haya sido añadido.

Esto es el espacio en blanco activo – espacio en blanco añadido a una composición es mejor que enfatizar o estructurar información.

Práctica, práctica, práctica

El único camino para conjugar esto con un concepto tan subjetivo como el espacio en blanco es el de la práctica. De la misma forma que los expertos en artes marciales tienen que pasar horas y horas perfilando técnicas simples, los diseñadores gráficos han de hacer lo mismo. Los estudiantes de diseño gráfico han realizado ejercicios compositivos durante décadas y, por suerte para nosotros, algunas leyendas de diseño de años pasados han documentado el proceso. Emil Ruder es uno de mis favoritos.

Ruder fue un tipógrafo suizo que murió en 1970. Después de 21 años de enseñar la tipografía, sacó un libro llamado Typography: A Design Manual (Tipografía: Manual de diseño), en cual declara:

El libro está deliberadamente restringido a la tipografía pura, al funcionamiento con los tipos prefabricados que son subordinados a un sistema exacto de medidas. Su objetivo es de hacer evidente las leyes de tipografía y – a pesar de ciertos rasgos comunes – el contraste entre ellos y el diseño gráfico que tanto en la selección como en su uso, es más libre y más complejo.

Las enseñanzas de Ruder son blancas y negras, focalizándose sobre la tipografía y la sutileza de diseño con los formularios de cartas. Ruder te lleva por lo correcto y lo incorrecto, un gran lugar para a aprender los principios fundamentales de composición. El libro está hasta los topes de grandes ejercicios que cubren el espacio en blanco y otros dispositivos compositivos. Es caro, pero bien vale ese precio.

Una vez que sepas diseñar y manipular el exterior espacial, dentro, y alrededor de su contenido, serás capaz de dar a tus lectores un comienzo, productos de posición más precisos, y quizás incluso comenzar a ver tu propio contenido con una nueva luz.

(Fuente: artículo de alistapart.com escrito por Mark Boulton y traducido por Encarni para nerv. )