Utilizar Espacio Blanco (o Espacio Negativo) en sus Diseños

El espacio es un parámetro fundamental en el diseño web, pero también, es uno de los más subestimados. Si aprovechamos el control del espacio en blanco, podemos controlar un sutil, pero definido elemento de una página web y hacer buen uso de él.

En pocas palabras, el espacio en blanco es el espacio entre diferentes elementos, ya sea que éste sea entre las secciones actuales de la página o el espacio correcto entre las letras. En la mayoría de los casos, usamos espacio en blanco (al que también nos referimos como espacio negativo) para separar el contenido así como; para facilitar y, en última instancia, escanear más rápido una página sin la necesidad de presentar en específico elementos separados.

Hoy, descubriremos; como puede usar el espacio negativo en sus diseños y calcular con cuánta exactitud ayuda a darle a sus diseños una sensación de nitidez y orden.

¿Por qué Espacio en Blanco?

Como acabo de explicar, espacio en blanco (o espacio negativo) es el espacio entre diferentes elementos que no contienen nada. Para propósitos de comparación, denominamos así al espacio que está ocupado de forma positiva (es decir, fondo blanco imagen negro). El espacio negativo -fondo blanco-, de hecho, ayuda a moldear y definir lo que es el espacio positivo. Esto puede demostrarse al mirar la siguiente ilusión óptica.

¿Qué ve? ¿El florero o las dos caras? Si ve las caras, eso es porque, en este diseño en particular, el espacio en blanco está actuando como el espacio negativo mientras que el negro es el positivo. Podemos invertir los roles y conseguir una vista completamente diferente porque ambos están trabajando juntos para moldear la imagen.

Lo que éste ejemplo está tratando de conseguir es que su espacio negativo es muy importante por que este puede ayudar a definir el contenido que reside en el espacio positivo. No piense en el espacio blanco como los sobrantes y que no creará contenido, más bien es un actor principal en la estructura de su sitio.

También hay dos niveles de espacio en blanco. Estos son espacio macro y espacio micro, relativo al espacio entre los elementos centrales y el espacio entre los elementos más pequeños, respectivamente.

Google

Google, como puede ver, es un gran defensor del espacio en blanco en sus diseños. El motor de búsqueda es generalmente considerado por tener un diseño limpio ya que el enfoque esta en el objetivo principal de la página, sin una dedicación enorme a otras áreas (a diferencia de otros).

Webdesigntuts+

Admiro el trabajo de diseño que el equipo de Envato hizo con éste sitio. Hay un, agradable y equilibrado, uso de espacio en blanco entre los títulos, los créditos y los párrafos.

Starbucks

El espacio negativo, en realidad, no tiene que ser un solo bloque de color. En la fotografía, cualquier área que no está enfocada, podría ser como un espacio negativo. En este ejemplo, la falta de enfoque en el fondo atrae sus ojos hacia lo que esta en la taza. (Y además, ¿no cambió Starbucks su logo?).

Cuando en los diseños, su enfoque es, por lo general, en el espacio positivo. Es casi subconsciente que el espacio negativo recorre y, realmente, ayuda a moldear y formar como el espacio positivo está establecido y después se lee. Esta propiedad, entonces puede ser modificada para personalizar la experiencia para un mejor tiempo de lectura e interactuar con el espacio positivo.

Un Analogía

Digamos que estás en una tienda. No sería una experiencia a gusto o agradable si tuviera problemas para moverse debido a los pasillos repletos, al lado del asistente de ventas continuamente incitándole con sus ofertas especiales. Hay demasiado que ver y usted no tiene ni el tiempo ni la paciencia para encontrar lo que, originalmente, vino buscando. Es no es agradable.

Esta es una de las funciones claves de porque las tiendas de Apple funcionan bien. Hay un diseño muy minimalista, además, una gran cantidad de espacio en la tienda está dado a los mismos productos. Sin embargo, debería aventurarse en otra tienda para PCs, será consumido por pasillos interminables de máquinas que lucen y funciona de forma diferente. En mi experiencia, la experiencia minimalista en la tienda de Apple es mucha más agradable.

Bien, ¿qué tiene eso que ver con diseño web? Mucho realmente. No venimos en línea para la tarea de perseguir una cadena específica de texto debajo de un sinfín de contenido innecesario que a usted no le importa. El espacio negativo ayuda con ambos de estos problemas dejando diseños ordenados al mismo tiempo que dirigen la atención hacia el punto focal de la página.

El espacio negativo incrementa la legibilidad.

Podría preguntarse, ¿por qué debería molestarme en estar seguro si mi espacio negativo está correcto?

El texto en la web es distinto de cualquier otra plataforma y todos adaptamos nuestros diseños de modo que el usuario final tenga la experiencia de lectura más fácil de nuestro contenido. A diferencia de un periódico, puede ser frustrante en la web tratar de descifrar en dónde está el contenido en el que usted está interesado. Los diseños desordenados que están demasiado apretados, no ofrecen un experiencia de lectura fácil, ya que nos concentramos en inspeccionar, primero, la página web, para distinguir los elementos entre si. El espacio en blanco corta la barrera entre los elementos, por lo que es más fácil para nosotros encontrar el contenido que nos importa.

Además, podemos dirigirnos hacia un reciente artículo mío sobre la tipografía, en donde observo ocho factores importantes que contribuyen a un buen diseño tipográfico. Al descifrar los elementos espaciales (tales como espaciado entre línea y entre letras) podemos incrementar la legibilidad. Trabajar a este nivel significa que estamos trabajando con espacio en blanco micro.

En resumen (sin embargo, a diferencia de lo que mencione anteriormente) el espacio en blanco separa todo, les da a los elementos su propio espacio, para que se reconozcan y para que pueda ser más fácil la lectura y la relación.

El espacio negativo en el Diseño Web

El espacio negativo es utilizado en muchos campos creativos, especialmente en la tipografía. En la fotografía, el espacio negativo es cualquier espacio que no es utilizado para tener un sujeto, lo cual no es muy diferente de su rol en el diseño web. Si miramos al diseño web de Apple, ellos, naturalmente, usan tanto el espacio en blanco macro como el micro para proteger los elementos y darles su propio espacio en la página web.

El diseño de Apple usa tanto el espacio en blanco micro como el macro, definido por la superposición de dos colores diferentes sobre la imagen debajo. Este resultado es un diseño limpio y elegante, que está separado con gracia. Podrías no saberlo, pero su atención en el contenido habrá sido influenciado por la falta de contenido en las áreas con espacio en blanco. Nuestro espacio de atención está demostrado que es más corto en la web, por lo que los diseños desordenados y saturados de impresión no fueron una tendencia que pasó por encima de las esferas virtuales de diseño.

Por supuesto, el espacio, realmente, no tiene que ser blanco. Cualquier tipo de espacio en blanco que no compite con el contenido central puede ser clasificado como “espacio en blanco”, como lo indica el siguiente diseño.

Sofisticación y Lujo

En el diseño impreso, podría notar que su cliente quiere cada elemento de su propiedad utilizado para promover su producto. No obstante, es una historia diferente cuando diseñamos para el terreno virtual. El espacio en blanco puede añadir una sensación de sofisticación y lujo a una página web genérica, al crear la sensación que el producto es más importante que la propiedad en que vive. Puede hacer que un producto luzca lujoso usando el principio “menos es más”. Cuando mira el sitio web de Apple, una marca que se considera como la más exclusiva de la computación, hay muy poca necesidad, debido a que los productos hablan por sí solos, aunque al lado de unos eslogans minimalistas. Este es un fenómeno que, además de ser popular con sitios que tratan la salud y sitios web que se tratan del bienestar personal, en donde se necesita poco contenido para comunicar la idea general del producto o servicio anunciado.

A menudo, las marcas más baratas parecen meter mucha más información en un espacio como sea posible, diferentes mercados, diferentes usuarios finales. Los sitios de Apple y HP, por ejemplo, resaltan este punto. En Apple se destacan por su seguridad y por eso les permiten a sus productos hablar por sí mismos. Si quiere el producto, solo de una mirada, sino circule. Por otro lado, el sitio de HP emplea ventas cruzadas, ofertas de promoción e insisten con precios baratos en la mente de los usuarios así como tratan de mostrar un surtido de productos alternativos que podrían interesarle.

Incrementando el Espacio Negativo

Por ahora, debería reconocer que el espacio negativo y cómo identificarlo en su diseño. Si es su primera vez en este campo, es probable que se confunda cuando alguien sugiere aumentar el espacio en blanco. No estaría sorprendido si usted responde con algunas líneas de texto de: “ese es todo el espacio que queda”. Bueno, de hecho, su espacio negativo puede ser mejorado al mejorar algunos problemas comunes para hacer su existencia mucho más efectiva.

Los margenes y el espacio consistente.

Los espacios inconsistentes puede ser uno de los grandes problemas, pero eso se puede ajustar con mucha facilidad. Todo parece más equilibrado, en general, tiene un mejor aspecto cuando el espacio interior de los elementos es igual. Si miramos el siguiente ejemplo, el diseño (de nuestro sitio web hermano ActiveTuts+) el auténtico al lado derecho luce mucho mejor porque el espacio interior entre los elementos es mucho más consistente.

Los márgenes no deberían dar la impresión de que un diseño está desconectado. Los márgenes que son demasiado grandes podrían romper la relación entre los elementos, disminuyendo la sensación de unidad en el diseño. Los márgenes grandes desaprovecharan su propiedad, disminuyendo potencialmente la efectividad de su trabajo.

Espaciado a nivel Micro

Como explique anteriormente, el espaciado a nivel micro es el espacio negativo que existe entre los elementos más pequeños de la página, como las letras y los párrafos.

El espaciado entre líneas puede mejorar considerablemente la legibilidad de un cuerpo de texto, siendo crucial en su caso de estudio de la tipografía bien diseñada. El espacio entre líneas o leading, es el micro espacio en blanco entre las líneas de texto. Por lo general, cuánto más largo el espacio, cuanto mejor la experiencia que los usuarios tendrán mientra leen, aunque, por otra parte, demasiado espacio puede romper la unidad y desconectar el diseño.

He usado la siguiente imagen en varios artículos diferentes acá en Tuts+ y quiero señalarla de nuevo. El ejemplo a la derecha tiene más espacio y cuando lo uso en una selección de texto más amplia, lo haría más fácil de leer.

Del mismo modo, el espacio entre letras puede contribuir al buen uso del espacio negativo. Las letras apretadas no son nada divertido para la lectura, pero tampoco son las que podría equivocarse por palabras individuales. Otra vez, solo se trata de encontrar el balance perfecto.

Analice cada proyecto de forma diferente.

Cuando éste diseñando y adaptando su diseño web, hágalo con una menta fresca que no está contaminada con lo que usted hizo bien la última vez. Cada proyecto es diferente y, ya que no hay pautas predefinidas o una consistencia igual, necesita usar su ojo, nuevamente refinado, para analizar cada producto de forma separada.

Ideas finales

El espacio negativo, como he mencionado varias veces a través de éste artículo, tanto para los diseños desordenados ayudar a moldearlos y dirigir el enfoque hacia el contenido sobre la página. Volviendo a la analogía de la tienda, nadie quiere tener trabajar para lograr su resultado deseado. En vez de eso, quieren ser servidos sobre un plato fácilmente identificable que no está afectado por los lados de los platos innecesarios que ellos no habían pedido, y que tampoco quieren.

Para recapitular, también podemos mejorar el uso del espacio negativo analizando y refinando los márgenes conservándolos consistentes en la mayoría de las circunstancias y prestando atención a los espaciados en los niveles micro para la tipografía. Idealmente, debería ocuparse en cada proyecto de forma diferente para reconocer el punto ideal en el diseño.

Al lado de los beneficios prácticos de una página web limpia, ordenada, el espacio negativo puede crear una sensación de sofisticación y elegancia permitiendo que el contenido “hable por si mismo” sin una mayor irrupción de modo que parece barato.

Gracias por sumergirse en éste interesante vieja en un área que no lo es. Ojala que haya aprendido algo (Yo ciertamente lo tuve) acerca de la importancia del espacio negativo en el diseño y quizá hasta piense dos veces antes de tratar de presionar objetos innecesarios y absurdos dentro de la página. Antes de dejarlo, un consejo final: haga la prueba de los cinco segundos (visualice una página web por cinco segundos y escriba lo que recordó) sólo para confirmar que su diseño está ordenado y usando su espacio en blanco bien.