El aire que rodea a un diseño es tan importante como el diseño en sí. A eso le llamamos whitespace y hace que tu mensaje se transmita mejor y que tus diseños alcancen el equilibrio estético deseado. Veamos qué es el whitespace y por qué es tendencia en la madurez del diseño en Internet.
Cuando un diseñador actúa, tiene que tener en cuenta objetivos claros, como comunicar y llamar la atención. Pero conseguir esto no es tan sencillo como coger el mensaje y llenar una página con él.
Este error, que suena muy absurdo así enunciado, es sin embargo una tendencia natural del ser humano y la conocemos como «horror vacui» o miedo al vacío. Según este impulso, algo con grandes espacios en blanco lo vemos incompleto y parece que no nos satisface. Casi todo diseñador se ha enfrentado a comentarios tipo «mete algo en esta esquina, que se ve muy vacío» o «pon esto más grande, que hay espacio de sobra».
Sin embargo la percepción de alguien ajeno a ese trabajo (es decir, el cliente final), suele ser muy diferente. Nos da mejor impresión un texto corto bien trabajado que un texto largo y farragoso. Preferimos un diseño con márgenes, con un buen espaciado de texto, en el que los elementos respiren con entidad propia.
A estos espacios de blanco en un diseño los llamamos whitespace. Y además de hacerlo más atractivo visualmente, consiguen que transmita mayor serenidad y confianza en el mensaje.
Por el contrario, una proliferación de elementos poco unificados en página nos ofrece una sensación de caos y cansancio, que sólo tendrá un resultado: que queramos poner fin a esa experiencia ya. O sea, cerrar la página web o apartar nuestra vista de ese cartel.
Hoy vamos a hablar de:
Whitespace y la autoridad del mensaje
Resulta lógico que tradicionalmente las marcas que más han usado el whitespace han sido las asociadas al lujo. La tendencia de identificar whitespace con productos o contenido de alta gama continúa, pero en la era digital esta apuesta por lo minimalista es aún más ganadora. La mayor competencia significa mayor necesidad de ser claro y enganchar rápido.
Si a esto le sumamos la experiencia de usuario, tan vital para conseguir que un visitante fluya a través de una web, tenemos un caldo de cultivo genial para un renacimiento del whitespace. Pero no hay que llevarse a error, el espacio negativo es clave en todo tipo de diseños, tanto online (banners, blogs, e-commerces…) como offline (flyers, portadas, folletos…).
Mira este este sencillo ejemplo.
Whitespace a tutiplén
Si te pregunto en qué consiste, probablemente dirás que es simplemente una frase con una palabra en grande. Pero el diseño no son sólo esas letras, sino todo el cuadro. Todo ese espacio que rodea la frase está haciéndola posible y dándole forma. De modo que es tan importante como las propias palabras para crear el diseño, la impresión general en definitiva.
Eso, a grandes rasgos es el whitespace. Suena demasiado simple, ¿no?
¿Qué es el whitespace y para qué sirve?
Whitespace se traduce como espacio en blanco y a veces se le llama también espacio negativo. Yo te he puesto el ejemplo anterior, tan radical, porque me parece el mejor punto de partida. Whitespace equivale a «espacio vacío», toda parte de un diseño que, si la analizamos separadamente del contenido, percibimos como que no hay nada.
Pero, al igual que el silencio es ausencia de sonido, pero no de comunicación, el whitespace puede ser ausencia de tinta o de color, pero, efectivamente, no es ausencia de comunicación.
Entonces, whitespace es la parte de un diseño que no está «escrita», que está sin rellenar. Lo que comúnmente denominaríamos fondo, sin darle mucha importancia.
Pero ese espacio vacío no es aséptico, puesto que es lo que envuelve al contenido y lo pone en contexto.
¿El «White Space» es blanco?
Ya nos hemos hecho la idea del whitespace como «lo blanco de un folio», lo que está sin escribir o imprimir. Pero vamos a trastocarlo un poco, porque no, el whitespace pese a tener ese nombre un tanto puñetero, no tiene que ser blanco. Puede ser de cualquier color. El whitespace puede ser negro en un diseño con letras en blanco. O de otro color plano, ya sea claro u oscuro.
El requisito es que sea espacio que no tiene texto, ni imágenes, iconos o vídeo. Es un fondo sin peso cognitivo, que permite que la vista se enfoque en los elementos principales.
Coge un folio y un boli. Escribe, garabatea, pinta lo que te de la gana. Todo lo que no haya pintado en ese folio, es whitespace. Si el folio es verde, el verde es «white space». Y si el folio es negro y pintas con tippex también, ¡caramba! Casi siempre tu diseño va a tener whitespace, mucho o poco, porque estás rellenando con elementos sobre un lienzo.
Lo que sí podemos es plantearnos aumentar ese whitespace o usarlo mejor, para conseguir diseños más equilibrados, elegantes y organizados.
No importa el color de fondo, todo lo «vacío» es whitespace
Cómo y dónde añadir whitespace
Para usar el whitespace en nuestro favor debemos cambiar la mentalidad a la hora de diseñar. Tenemos que reflexionar sobre las diferentes secciones del diseño, como márgenes, encabezado, faldón, imágenes…
A menudo diseñamos al estilo puzzle; tenemos muchos elementos y los queremos meter en la página como sea. Cuantos más metamos, mejor. ¿Recuerdas el horror vacui? Entonces, hacemos esta pieza un poco más pequeña para hacer sitio a otra, movemos una imagen a la izquierda y así nos cabe otra a la derecha, etc. Esta práctica da como resultado diseños repletos de bloques pegados los unos a los otros. Claro, tú te has quedado a gusto metiendo en una página todo lo que querías, pero ¿qué va a pensar quien vea ese diseño? Nada bueno, ya te lo digo.
Aunque siempre va a ser mejor plantear un diseño con el espacio negativo en mente, es inevitable que creemos diseños saturados que nos pidan añadir espacio después. Vamos a hablar de 3 zonas estratégicas para jugar con el whitespace.
Siempre conseguiremos algo más atractivo y limpio mediante un uso razonable del whitespace
Márgenes
Una parte fundamental del whitespace son los márgenes. Párate a pensar en una novela de 500 páginas que sólo tenga texto. Piensa en sus márgenes. Si ese libro usase menos espacio de margen quizá podría quedarse en 400 páginas. Sería una ventaja, ¿no?; menos papel gastado, un libro más liviano… sólo que sería más ilegible y mucho menos atractivo. Pues si eso pasa con un libro, que la gente que lo abre ya va predispuesta a leerlo, imagínate qué sucedería con tu diseño sin unos márgenes apropiados.
Además, un diseño siempre tiene que tener márgenes extra por razones técnicas. El guillotinado o la impresión de un diseño se puede dejar zonas de los márgenes fuera. Si estos son inexistentes o ridículos, parte de nuestro diseño (imágenes, textos…) podrían perderse o ser recortados. Si hablamos de diseño web, tampoco es estético ni usable que una parte funcional quede muy pegada a los bordes de la pantalla.
Espaciado entre elementos
Los elementos de un diseño tienen que tener un equilibrio. El diseño juega con la simetría (y con la asimetría), con el equilibrio visual… y el espaciado es fundamental a la hora de otorgar pesos, estableciendo asociaciones y jerarquías. Dos elementos con menos espaciado entre sí se perciben como parte de algo común, frente a otros más distantes en la composición.
Si hablamos de diseño web, es sorprendente cómo el whitespace ha ganado terreno. En los primeros tiempos de Internet las tablas reinaban junto a las infames barras separadoras. No se concebía separar ideas en un diseño web sin poner líneas que explicitaran que se cambiaba de sección dentro de una misma página. Hoy el espaciado, junto a otros recursos como sutiles hovers (cambios de estado de botones y enlaces al pasar el ratón), sustituyen a las lineas separadoras en casi todas partes. La idea es que deberíamos ser capaces de distinguir los diferentes elementos de una web sólo con el espaciado.
Espaciado de caracteres
El tracking (separación uniforme de caracteres dentro de un grupo, como una palabra o un párrafo) y el kerning (separación manual entre dos caracteres concretos) son fundamentos básicos del trabajo con tipografía. El fruto de este espaciado es también un juego con el whitespace. Depende también de cada tipografía pero una palabra con menos whitespace podría sugerir más rotundidad, mientras que una más espaciada podría resultar más sugerente o elegante.
El kerning de este ejemplo es absurdo y exagerado simplemente para realzar el efecto
La tipografía y el color, aliados de un buen uso del whitespace
A la hora de usar el whitespace para conseguir un equilibrio, no estamos sólos. Nos ayudaremos de dos armas básicas de todo diseñador.
- Color: Saber combinar el color es fundamental en cualquier diseño. Conocer y experimentar con los colores que casan bien y elegir una paleta de colores consistente son principios fundamentales para que nuestro diseño transmita autoridad.
- La tipografía: Hay que saber que cada tipografía tiene una voz. Si bien hay tipografías elegantes y asépticas como la omnipresente
Comic S…Helvetica, existen tipografías serias y tipografías desenfadadas. Hay que saber elegir, combinar bien la tipografía y adecuarla a tu mensaje.
En definitiva, te recomiendo tener muy en cuenta el espacio negativo en tus diseños porque:
- Aporta facilidad al escaneado y facilita la lectura y comprensión.
- Te ayuda a conseguir una mejor composición y equilibrio visual.
- Te permite conducir mejor la atención.
- Resulta más elegante, autoritario a la par que amigable y profesional.
¿Qué más prueba quieres de que los que van en serio le dan al whitespace bien?