Cómo utilizar el espacio negativo para crear sitios web impresionantes

Los sitios web y las aplicaciones tienen todo tipo de elementos visuales que deben coexistir: botones, columnas, iconos, imágenes, líneas, medios y tipografía. Todos esos elementos necesitan un lienzo (la página web en blanco), y ese lienzo necesita un espacio en blanco, es decir, un espacio en blanco o negativo. El ojo del espectador no puede procesar lo que ve sin él.

Suscríbete a nuestro canal de Youtube

¿Qué es el espacio negativo?

El espacio positivo es la parte del trabajo que se llena con el tema u otros puntos focales. El espacio negativo ocupa el resto. Puede ser en blanco o en blanco, contrastando en color o diseño, una imagen de fondo sutil; sea lo que sea, se sentirá vacío en lugar de lleno o desordenado. Sin embargo, el hecho de que el espacio negativo sea hueco no significa que no sea importante: llama la atención sobre el espacio positivo y, a veces, incluso se convierte en un espacio positivo cuando se mira de manera diferente.

Ejemplos de espacio negativo

El espacio negativo, y su contraparte, el espacio positivo, se encuentra en todo tipo de arte y diseño, incluido el diseño web. Veamos el logo de FedEx. Ves letras moradas y naranjas, ¿verdad? Sin embargo, hay una flecha en el espacio en blanco:

Esa flecha oculta de FedEx utiliza el espacio negativo de una manera similar al dibujo y la pintura: el contorno se crea al igual que se crea el espacio positivo. En un ejemplo como este, el espacio negativo no se crea simplemente porque está donde no está el espacio positivo.

El pavo real de NBC hace lo mismo:

Si bien el punto del espacio negativo suele ser poner el foco en el espacio positivo, a veces se convierte en el foco de los diseños inteligentes. Aquí hay otro ejemplo: mira cómo los dientes del lobo forman un árbol:

Hay un término para esto: inversión figura-terreno. Básicamente significa que los colores de primer plano y de fondo intercambian lugares para cambiar la perspectiva y las interpretaciones. Si te gusta esto, mira el trabajo de MC Escher, especialmente sus impresiones de transformación.

El espacio negativo juega el mismo papel en la fotografía. Mira este retrato que le hice al hijo de mi primo, Julian. El fondo negro pone todo el foco en él:

Puedes encontrar espacio negativo en la naturaleza, como en el espacio entre pétalos de flores, y en diseño funcional, como en el espacio a través del asa de una taza de café.

También lo usamos en nuestro sitio web. Nuestra página de inicio tiene mucha información, pero no es abrumadora debido a la forma en que la hemos espaciado. Y a pesar de que el fondo tiene toques de color y algunas formas para agregar al diseño, de ninguna manera distrae: aún da la apariencia de estar agradablemente vacío sin ser aburrido ( y es de marca).

Tipos de espacio negativo

Hay algunos tipos de espacios negativos. Micro y macro se refieren al tamaño del espacio negativo en una composición. Activo y pasivo se refieren a lo que esas áreas hacen por el usuario.

Espacio negativo micro vs macro

El espacio micro negativo se refiere a los pequeños espacios entre elementos: el espacio entre líneas de texto o el área entre enlaces en un menú de navegación. Esto afecta la legibilidad del contenido para el lector. Si no hay suficiente espacio entre líneas o si el texto sale de los márgenes, el usuario tendrá dificultades para leerlo y entenderlo.

El espacio macro negativo es más grande; es el espacio alrededor del diseño y los espacios entre grandes elementos de diseño. Un ejemplo es el área entre bloques de contenido. Son las partes vacías del contenedor las que contienen todo el diseño.

Los sitios web con pequeñas cantidades de espacio macro negativo tienden a ser muy informativos. Los sitios web con grandes cantidades de espacio macro negativo son a menudo minimalistas o exhiben lujo. El primer ejemplo es un espacio macro negativo pequeño y el segundo es un espacio macro negativo grande:

Espacio negativo activo frente a pasivo

El espacio negativo activo se suma a la estructura de la página, mejora el flujo de contenido y guía al usuario a donde desea que vaya. El espacio negativo pasivo mejora el aspecto del sitio web pero no mueve al usuario a través de ningún flujo específico. Cuando el espacio está descentrado y asimétrico, generalmente está activo. Cuando está equilibrado y simétrico, suele ser pasivo: evoca menos movimiento, lo que no obliga al usuario a mirarlo de cierta manera. Aquí hay un ejemplo de espacio negativo activo:

Y aquí hay un ejemplo de espacio negativo pasivo:

Espacio negativo y composición

El espacio negativo es importante para la composición por varias razones:

• Necesita ver el espacio en una composición para mantenerlo bien proporcionado.
• También le permite jugar con las relaciones entre diferentes objetos en un diseño.
• En el diseño web, puede desempeñar un papel importante para mantener a las personas en su página.
• La cantidad de espacio alrededor de un elemento determina cuánto se enfoca en el elemento; más espacio significa más enfoque.

Elegir el equilibrio adecuado entre el espacio negativo y el positivo

La cantidad de espacio negativo y positivo que uses dependerá de la apariencia que busques y de lo que quieras evocar en el espectador.

• Si desea un diseño estéticamente agradable, probablemente utilizará partes iguales de espacio negativo y positivo.
• Para un diseño que se vea deliberadamente austero y minimalista, optará por un espacio más negativo.
• Para lucir abrumador y directo, puede optar por un espacio más positivo.

Los diseñadores tienen que jugar con el espaciado hasta que encuentren el equilibrio adecuado para la marca y los propósitos previstos del sitio web.

Ordenando sitios web con mucho texto con espacio negativo

Cuando tiene que exprimir una tonelada de información en una página, averiguar dónde colocar el espacio negativo se vuelve complicado, especialmente si esa información tiene mucho texto, lo que puede verse desordenado rápidamente. HostingDude es un gran ejemplo de demasiado espacio positivo:

The New York Times, por otro lado, ha descubierto cómo empacar su página de inicio con sus noticias sin volver locos los ojos, y todo gracias al espaciado (y las opciones de color). Si bien no hay mucho espacio para el macroespacio, han aprovechado el microespacio:

Aunque los elementos en HostingDude están más juntos, los elementos en el sitio web del New York Times se ven más unificados gracias al espacio adicional entre ellos. Al ojo le resulta más fácil dar sentido a la página, lo que le da un diseño más completo y cohesivo. Cuando el ojo tiene la oportunidad de descansar, es más capaz de asimilar lo que ve. El espacio negativo cree que menos es más.

Rompiendo texto con espacio negativo

Has visto cómo los diseñadores pueden crear una página de inicio estéticamente agradable y con mucho texto, pero ¿qué pasa con los bloques de texto más largos? Mezclar párrafos cortos con largos, titulares en negrita, crear listas y agregar medios a lo largo de un artículo, todo ayuda a crear un espacio negativo alrededor de las palabras, haciéndolo más atractivo para el lector. La apariencia importa, incluso con el texto, y los grandes diseñadores lo tienen en cuenta.

Explicando el punto del espacio negativo a los clientes

Los diseñadores de sitios web pueden chocar con los clientes sobre el espacio negativo. Los clientes ven aún más espacio para exprimir información importante y rentable. Sienten que el espacio en blanco es un desperdicio de espacio. Los diseñadores, por otro lado, ven la ruptura visual que el ojo necesita para absorber la información que ya existe. Saben que todo el espacio en un sitio web es importante, incluso el espacio libre de contenido.

Aquí es donde las herramientas de creación de prototipos y maquetas resultan útiles. Muestre al cliente dos versiones de su sitio web, una con una cantidad agradable de espacio negativo y otra que esté sobrecargada de espacio positivo. Haga que miren los sitios web uno al lado del otro y pídales que jueguen con ellos. Supongo que les resultará fácil navegar por el sitio web bien diseñado y se sentirán perdidos en el mal diseñado.

Terminando

Los sitios web tienen un montón de elementos diferentes, y si desea que esos elementos vivan en armonía y atraigan al espectador, necesita un espacio en blanco a su alrededor. La cantidad de espacio en blanco que usa y cómo funciona depende de (a) su marca y (b) qué acciones desea que realice el usuario. También puede ser creativo con el espacio en blanco, como invirtiendo los colores o dibujando con espacio negativo para definirlo de una manera interesante o llamativa.

Cualquiera que sea el enfoque que adopte, el espacio en blanco debe sentirse equilibrado; sin embargo, eso no significa necesariamente simétrico. En cambio, significa que los elementos existen en una página sin competir entre sí y mientras atraen el tipo de atención que desea que tengan. Para el espectador, el equilibrio significa poder mirar un sitio web sin confundirse o abrumarse.

Experimente con el espacio en blanco de su sitio web. Agrega un poco, saca un poco. Reducir macro y aumentar micro, o viceversa. Pruebe cómo un mayor o menor espacio en blanco alrededor de ciertos elementos anima al usuario a actuar. La belleza del espacio en blanco es que es una técnica artística, lo que significa que no hay reglas estrictas.

¿Diseñando un sitio web de viajes? Probablemente vas a utilizar mucho espacio macro. Consulte nuestro resumen de Temas Divi Child para sitios web de viajes.

Imagen destacada a través de StockVector / Shutterstock.com