Los sitios web y las aplicaciones tienen todo tipo de elementos visuales que deben coexistir: botones, columnas, íconos, 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
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 estar 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 carezca de importancia: llama la atención sobre el espacio positivo y, a veces, incluso se convierte en el espacio positivo en sí mismo 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 logotipo de FedEx. Ves letras moradas y naranjas, ¿verdad? Sin embargo, hay una flecha allí, en el espacio en blanco:
Esa flecha oculta de FedEx usa el espacio negativo de manera similar al dibujo y la pintura: el contorno se crea de la misma manera que se crea el espacio positivo. En un ejemplo como este, el espacio negativo no se crea simplemente porque es donde no se crea el espacio positivo .
El pavo real de la NBC hace lo mismo:
Si bien el objetivo del espacio negativo suele ser poner el foco en el espacio positivo, a veces se convierte en el centro de atención en 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-fondo. 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 tomé del hijo de mi primo, Julián. El fondo negro pone todo el foco en él:
Puedes encontrar espacios negativos en la naturaleza, como en el espacio entre los pétalos de las flores, y en el 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 aunque el fondo tiene toques de color y algunas formas para agregar al diseño, no distrae de ninguna manera: aún da la apariencia de estar agradablemente vacío sin ser aburrido ( y está en la marca).
Tipos de espacio negativo
Hay algunos tipos de espacio negativo. 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 micronegativo 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 se sale de los márgenes, el usuario tendrá dificultades para leerlo y comprenderlo.
El espacio negativo macro es más grande; es el espacio alrededor del diseño y los espacios entre los 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 a menudo son minimalistas o exhiben lujo. El primer ejemplo es de espacio macro negativo pequeño, y el segundo es de espacio macro negativo grande:
Espacio negativo activo vs. pasivo
El espacio negativo activo se suma a la estructura de la página, mejora el flujo de contenido y guía al usuario hacia 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 es 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:
- Necesitas ver el espacio en una composición para mantenerlo bien proporcionado.
- También te permite jugar con las relaciones entre diferentes objetos en un diseño.
- En el diseño web, puede desempeñar un papel tan importante para mantener a las personas en su página.
- La cantidad de espacio alrededor de un elemento determina cuánto enfoque hay en el elemento: más espacio significa más enfoque.
Elegir el equilibrio correcto de espacio negativo y 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 usará 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 espacio hasta que logren el equilibrio adecuado para la marca y los propósitos previstos del sitio web.
Ordenar sitios web con mucho texto y 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 parecer desordenado rápidamente. HostingDude es un gran ejemplo de demasiado espacio positivo:
The New York Times, por otro lado, descubrió cómo llenar su página de inicio con sus noticias sin volverse loco, y todo gracias al espaciado (y las opciones de color). Si bien no hay mucho espacio para el espacio macro, han aprovechado el espacio micro:
Aunque los elementos de HostingDude están más juntos, los elementos del sitio web del New York Times parecen más unificados gracias al espacio adicional que hay 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 captar lo que está viendo. El espacio negativo cree que menos es más.
Dividir texto con espacio negativo
Ha visto cómo los diseñadores pueden crear una página de inicio estéticamente agradable y llena de texto, pero ¿qué pasa con los bloques de texto más largos? Mezclar párrafos cortos con largos, títulos en negrita, crear listas y agregar medios a lo largo de un artículo ayuda a crear un espacio negativo alrededor de las palabras, haciéndolo más atractivo para el lector. La apariencia importa, incluso con texto, y los grandes diseñadores lo tienen en cuenta.
Explicar el punto del espacio negativo a los clientes
Los diseñadores de sitios web pueden chocar con los clientes por el espacio negativo. Los clientes ven aún más espacio para incluir información importante y lucrativa. Sienten que el espacio en blanco es espacio desperdiciado. Los diseñadores, por otro lado, ven el descanso 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 maquetas y prototipos son útiles. Muestre al cliente dos versiones de su sitio web, una con una cantidad agradable de espacio negativo y otra sobrecargada de espacio positivo. Pídales 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 utiliza y cómo funciona depende de (a) su marca y (b) las acciones que desea que realice el usuario. También puede ser creativo con el espacio en blanco, como invertir los colores o dibujar con espacio negativo para definirlo de una manera interesante o llamativa.
Independientemente del enfoque que adopte, el espacio en blanco debe sentirse equilibrado; sin embargo, eso no significa necesariamente que sea 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 ni abrumarse.
Experimente con el espacio en blanco en su sitio web. Añade un poco, quita un poco. Reducir macro y aumentar micro, o viceversa. Pruebe cómo más o menos espacio en blanco alrededor de ciertos elementos anima al usuario a tomar medidas. La belleza del espacio en blanco es que es una técnica artística, lo que significa que no hay reglas estrictas.
¿Estás diseñando un sitio web de viajes? Probablemente vas a utilizar una gran cantidad de espacio macro. Echa un vistazo a nuestro resumen de Divi Child Themes para sitios web de viajes .
Imagen destacada a través de StockVector / Shutterstock.com