Cómo usar espacio negativo para crear sitios web increíbles

Los sitios y aplicaciones tienen todo tipo de elementos visuales que tienen que coexistir: botones, columnas, iconos, imágenes, líneas, soporte de medios y tipografía. Todos estos elementos necesitan un lienzo (página web vacía) y ese lienzo necesita espacio vacío, es decir, espacio negativo o en blanco. El ojo del espectador no puede procesar lo que ve sin él. Suscríbase a nuestro canal de YouTube ¿Cuál es el espacio negativo? El espacio positivo es la parte del trabajo que se llena con el sujeto u otros puntos focales. El espacio negativo ocupa el resto. Puede ser blanco o blanco, contrastante por color o diseño, una imagen de fondo sutil, sea lo que sea, se sentirá vacío en lugar de estar lleno o lleno de gente. Sin embargo, solo porque el espacio negativo está vacío, eso no significa que no sea importante: llama la atención sobre el espacio positivo y, a veces, incluso se convierte en el espacio positivo en sí cuando se ve de manera diferente.
Ejemplos de espacio negativo El espacio negativo, y su contraparte, el espacio positivo, están en todo tipo de arte y diseño, incluido el diseño web. Veamos el logotipo de FedEx. Ver 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 tal como se crea el espacio positivo. En un ejemplo como este, el espacio negativo no se crea simplemente porque no es el espacio positivo. NBC Peacock hace lo mismo:

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

Fuente: Guillaume Morellec en Behance Hay un término para esto: invertir la figura-themelie. Básicamente significa que los colores en primer plano y el fondo cambian los lugares para cambiar la perspectiva e interpretaciones. Si está interesado, consulte el trabajo de MC Escher, especialmente sus huellas digitales de transformación. La tierra negativa juega el mismo papel en la foto. Mira este retrato que le hice al hijo de mi primo, Julian. El fondo negro lo enfatiza:

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

Fuente: unssplash

Fuente: Unsplash también lo usamos en nuestro sitio web. Nuestra página inicial contiene mucha información, pero no es abrumadora debido a la forma en que los distanciamos. Y, aunque el fondo tiene pistas de color y algunas formas se suman al diseño, no se divierte de ninguna manera: todavía da la apariencia de agradablemente vacío, sin ser aburrido (y es marca).

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

Micro vs. Macro negativo El micro espacio negativo se refiere a los pequeños espacios entre los elementos: el espacio entre las líneas de texto o el área entre los enlaces en un menú de navegación. Esto influye en cuán legible es el contenido del lector. Si no hay suficiente espacio entre líneas o si el texto sale de los bordes, el usuario tendrá dificultades para leer y comprender. El espacio macro negativo es más grande; Es el espacio alrededor de la apariencia y los espacios entre los grandes elementos de diseño. Un ejemplo es el área entre los bloques de contenido. Las partes vacías del contenedor son las que contienen todo el diseño. La web se encuentra con pequeñas cantidades de espacio macro negativo tiende a ser extremadamente informativo. Los sitios web con grandes cantidades de espacio macro negativo a menudo son minimalistas o tienen lujo. El primer ejemplo es un pequeño espacio macro negativo, y el segundo es de gran espacio macro negativo:
Espacio activo activo vs. Pasivamente, 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 desea ir. El espacio negativo pasivo mejora la apariencia del sitio web, pero no mueve al usuario a través de un flujo específico. Cuando el espacio está descentrado y asimétrico, generalmente está activo. Cuando está 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:

Aquí hay un ejemplo de un espacio negativo pasivo:


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


Tienes que 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 igualmente importante, manteniendo a las personas en su página.
La cantidad de espacio alrededor de un elemento determina cuánto enfoque se coloca en el elemento: más espacio significa más enfoque.
Elegir el equilibrio correcto del espacio negativo y positivo cuánto uso de espacio negativo y positivo dependerá de la apariencia que está buscando y de lo que desea evocar en el espectador.
Si desea un diseño estético agradable, probablemente usará espacios iguales y positivos.
Para un diseño que se ve intencionalmente estrictamente y minimalista, optará por un espacio más negativo.
Para verse fuerte y frente a ti, puedes optar por un espacio más positivo.
Los diseñadores deben jugar con espaciado hasta que alcancen el equilibrio adecuado para la marca y los fines del sitio web previstos. Desaltar sitios web pesados ​​con espacio negativo Cuando tiene que recopilar una tonelada de información de una página, encontrar dónde colocar el espacio negativo se vuelve difícil, especialmente si esta información es pesada en el texto, lo que puede parecer lleno de gente. HostingDude es un excelente ejemplo de espacio demasiado positivo:
El New York Times, por otro lado, se dio cuenta de cómo empacar su página inicial con sus noticias, sin conducir los ojos y todo se debe al espacio (y las elecciones de color). Aunque no hay mucho espacio para el espacio macro, aprovecharon el micro espacio:
Incluso si los elementos de Hostingdude están más cerca, los elementos en el sitio del New York Times parecen más unificados debido al espacio adicional entre ellos. El ojo tiene un momento más fácil para comprender 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 hacerse cargo de lo que ve. El espacio negativo cree que menos es más. Super el texto con el espacio negativo ¿Has visto cómo los diseñadores pueden crear una página de inicio estética, pero qué queda con bloques de texto más largos? Mezclar los párrafos cortos con los largos, la audacia de los títulos, crear las listas y agregar materiales de medios en un artículo contribuye a la construcción de un espacio negativo alrededor de las palabras, lo que lo hace más atractivo para el lector. El aspecto importa, incluso con una copia, y los grandes diseñadores consideran esto. Explicando el punto del espacio negativo para los clientes Los diseñadores de sitios web pueden colisionar con los clientes sobre el espacio negativo. Los clientes ven aún más espacio para recaudar información importante que gane dinero. Sienten que el espacio vacío 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. Sé que todo el espacio en un sitio web es importante, incluso el espacio que no contiene contenido.
Aquí hay útiles las herramientas de diseño y prototipo. Muestre al cliente dos versiones de su sitio web, una con un espacio negativo agradable y otro sobrecargado de espacio positivo. Póngalos mirando sitios web uno al lado del otro y pídales que jueguen con ellos. Supongo que es fácil navegar en el sitio web bien diseñado y sentirse perdido en el diseño débil. Los sitios web de acabado tienen muchos elementos diferentes y, si desea que estos elementos vivan en armonía y atraigan al espectador, necesita espacio en blanco a su alrededor. La cantidad de espacio en blanco que usa y la forma en que funcionan depende de (a) de su marca y (b) de las acciones que desea tomar en el usuario. También puede ser creativo con el espacio en blanco, como revertir los colores o dibujar con espacio negativo para definirlo de una manera interesante o atractiva. Independientemente del enfoque que adopte, el espacio en blanco debe sentirse equilibrado, sin embargo, 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 tener. Para el espectador, el equilibrio significa poder mirar un sitio web sin estar confundido o abrumado. Experiencia con el espacio en blanco en su sitio web. Agregue algunos, retire algunos. Reduzca la macro y aumente micro, o viceversa. Prueba más o menos espacio en blanco alrededor de ciertos elementos alienta 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 pesadas y rápidas. Diseñar un sitio de turismo?