Cómo usar 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 necesidades espacio en blanco, es decir, espacio negativo o blanco. El ojo del espectador no puede procesar lo que ve sin él.

(incrustar) https://www.youtube.com/watch?v=GfUxLD9IshY (/ incrustar)

Suscríbase 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 blanco o 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 abarrotado. Sin embargo, solo porque el espacio negativo sea hueco, eso no significa que no sea importante: llama la atención sobre el espacio positivo y, a veces, incluso se convierte en 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:

espacio en blanco

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

El pavo real de NBC hace lo mismo:

espacio en blanco

Mientras que el punto del espacio negativo es generalmente para poner el foco en el espacio positivo, a veces se convierte El enfoque en diseños inteligentes. Aquí hay otro ejemplo: mira cómo los dientes del lobo forman un árbol:

espacio en blanco

Fuente: Guillaume Morellec en Behance

Hay un término para esto: inversión de 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, echa un vistazo a M.C. El trabajo de Escher, especialmente su impresiones de transformación.

https://www.mcescher.com/gallery/transformation-prints/

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

espacio en blanco

Puede encontrar un espacio negativo 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é.

espacio en blanco

Fuente: Unsplash

espacio en blanco

Fuente: Unsplash

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 separado. Y a pesar de que el fondo tiene toques de color y algunas formas para agregar al diseño, de ninguna manera distraen, todavía da la apariencia de estar agradablemente vacío sin ser aburrido (y está en la marca).

espacio en blanco

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 micro vs macro negativo

El espacio micro negativo se refiere a los espacios pequeños entre elementos: el espacio entre líneas de texto o el área entre enlaces en un menú de navegación. Esto impacta cuán legible es el 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 comprenderlo.

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

espacio en blanco

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 en blanco

espacio en blanco

Espacio negativo activo vs. pasivo

El espacio negativo activo se agrega a la estructura de la página, mejora el flujo de contenido y guía al usuario a donde quiere 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, generalmente es pasivo, evoca menos movimiento, lo que no obliga al usuario a mirarlo de cierta manera. Aquí hay un ejemplo de espacio negativo activo:

espacio en blanco

Y aquí hay un ejemplo de espacio negativo pasivo:

espacio en blanco

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 importante para mantener a las personas en su página.
  • La cantidad de espacio alrededor de un elemento determina cuánto foco está en el elemento; más espacio significa más foco.

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 visor.

  • Si desea un diseño estéticamente agradable, probablemente utilizará partes iguales de espacio negativo y positivo.
  • Para un diseño que se vea intencionalmente rígido y minimalista, buscará más espacio 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 del sitio web.

Limpiar 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 abarrotado rápidamente. HostingDude es un gran ejemplo de demasiado espacio positivo:

espacio en blanco

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

espacio en blanco

A pesar de que 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 entender la página, lo que le da un diseño más completo y coherente. 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.

Romper 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, poner titulares en negrita, crear listas y agregar medios a lo largo de un artículo, todo ayuda a construir un espacio negativo alrededor de las palabras, haciéndolo más atractivo para el lector. La apariencia es importante, incluso con copia, y los grandes diseñadores lo tienen en cuenta.

Explicando el punto de 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 espacio desperdiciado. Los diseñadores, por otro lado, ven la ruptura visual que el ojo necesita para absorber la información que ya existe. Ellos saben que todas el espacio en un sitio web es importante, incluso el espacio libre de contenido.

Aquí es donde las herramientas de prototipos y maquetas son útiles. Muestre al cliente dos versiones de su sitio web, una con una cantidad agradable de espacio negativo y otra que está sobrecargada con 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 espacios 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 sorprendente.

Independientemente del enfoque que adopte, el espacio en blanco debe sentirse equilibrado, aunque eso no necesariamente significa simétrico. En cambio, significa que los elementos existen en una página sin competir entre sí y al tiempo que atraen el tipo de atención que desea que tengan. Para el espectador, el equilibrio significa poder mirar un sitio web sin confundirse ni sentirse abrumado.

Experimente con el espacio en blanco en su sitio web. Agregue un poco, saque un poco. Reduzca macro y aumente micro, o viceversa. Pruebe cómo más o menos espacio en blanco alrededor de ciertos elementos alienta 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.

Diseño de un sitio web de viajes? Probablemente va a utilizar mucho 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