Fuerzas Invisibles: Formas y Espacios

En el artículo anterior, aprendimos acerca de cómo el tamaño y la escala pueden ser utilizados para hacer tus diseños armónicos y claros. En este, nuestro artículo final de fuerzas invisibles en el diseño, aprenderemos acerca del uso sutil del espacio -a menudo llamado "espacio en blanco" o "espacio negativo"- puede ser utilizado para hacer que tus diseños comuniquen eficientemente.

Tu Coeficiente de "Información/Tinta"

Cuanto más conscientemente utilices el espacio en blanco, mayor el coeficiente de "información/tinta". Este es un concepto introducido por el guru de diseño de la información Edward Tufte. Es una función de cuanta información se consigue con cada gota de tinta -o, en el caso de diseño mobile y web- por cada pixel.

El gráfico de la izquierda tiene mucho mayor coeficiente de información/tinta que el gráfico de la derecha. Realmente el gráfico necesita estar lleno de "tinta"? No, comunica igual de bien con líneas y puntos.

Qué pasa si tomas un paso más y remueves las líneas, dejando solo los puntos?

Ahora, la comunicación se pierde. Si, puedes ver todos los puntos de información, pero ahora estás perdido en la "historia" de como la información cambia con el tiempo. Además, se vuelve difícil distinguir de un gráfico de dispersión, cuando el "tiempo" no es una de las variables, y la información no sigue un curso lineal.

Los Elementos más cercanos se perciben como relacionados

En el primer artículo de esta serie, aprendimos como la alineación de los elementos implica relaciones entre esos elementos. Lo que también es importante, es que tan cerca esos elementos están entre si,

Este es solo un ejemplo de una grilla de cuadrados, como baldosas en un suelo.

Pero si creas mayor espaciado horizontal entre las columnas verticales de cuadrados, obtienes una serie de columnas.

Entonces, cuando hay cambios drásticos en la información del gráfico anterior, la mente quizás quiera conectar los puntos en una secuencia errónea, solo porque un punto está más cerca a otro.

Usando el Espacio Blanco para Layouts más limpios.

Estos principios se extienden mucho más allá de los gráficos de líneas. Están presentes en todo lo que diseñes. Especialmente cuando diseñas para pantallas pequeñas, no quieres desperdiciar pixeles -quieres diseñar con un alto coeficiente de información/tinta.

Los diseñadores tienden a utilizar grillas para ayudar a organizar la información en un layout. Las grillas ayudan a alinear elementos -como líneas de texto- que luego crean regiones de información que se relacionan unas con otras.

Aquí hay un layout básico, diseñado en una grilla. El lado izquierdo es tu navegación, y el área más grande contiene el contenido principal.

Este layout está bien, pero nota que el espacio en blanco entre la navegación y el espacio en blanco entre las columnas de texto en el área principal es el mismo.

Tendría sentido ampliar levemente el espacio entre la navegación y el área de contenido principal.

Ahora hay una delimitación más clara entre la navegación y el contenido principal, y todo lo que tuvimos que hacer fue agregar un poco de espacio en blanco,

Usando el Espacio en Blanco para Tipografías más limpias.

En el artículo anterior, aprendimos acerca de como el tamaño es uno de los varios factores que pueden ser utilizados para crear jerarquía tipográficamente. El espacio en blanco puede ayudar a organizar tu tipografía también.

Por ejemplo, mira en el encabezado, la meta data y el texto del cuerpo.

Tienen relaciones armoniosas entre uno y otro, gracias al hecho de que sus tamaños están seleccionados desde una escala variada, pero, parecen bastante desprolijos!

El problema es que los espacios negativos entre estos elementos no fueron considerados.

La línea de meta data ya está bien diferenciada del encabezado> es de un tamaño diferente, está todo en mayúsculas y también fue agradablemente separada un poco.

Un gran truco es utilizar el alto de la tipografía de la meta data para determinar cuanto espacio debería haber entre esta y el encabezado. Como así:

Generalmente, estarás utilizando tus ojos para averiguar este espacio. No hay una manera matemática de decirte exactamente cuanto espacio debería haber. Es en función del alto de línea, el tamaño del margen o espaciado que estés utilizando, y las características particulares de la fuente.

Ahora, qué hay del cuerpo de texto?

Tiene sentido que la meta data esté realmente cerca del encabezado, pero el encabezado no necesita estar tan cerca del cuerpo de texto. De hecho, el encabezado y la meta data pueden ser su propia unidad.

Puedes usar la distancia desde la parte superior del encabezado a la inferior de la metadata como una guía, y poner la mitad de esa distancia entre la metadata y el cuerpo de texto.

Conclusión

Pensando cómo le das forma a tu layout y se comunica con el espacio en blanco, tus diseños se verán más limpios y claros, y serán más usables, y convertirán mejor.

Esto cierra las cosas por ahora -si aún no lo has hecho, asegúrate de chequear el primer y segundo artículo de la serie!