Share
El espacio es un parámetro fundamental en el diseño web, pero también uno de los más subestimados. Si tomamos el control del espacio en blanco, podemos controlar un elemento sutil, pero definitorio, de una página web y hacer un buen uso de ella..
En pocas palabras, el espacio en blanco es el espacio entre los diferentes elementos, ya sea entre las secciones reales de la página o hacia el espacio entre las letras. En la mayoría de los casos, utilizamos espacios en blanco (también conocidos como espacio negativo) para espaciar el contenido para un escaneo más fácil y, en última instancia, más rápido de una página sin la necesidad de colocar elementos de separación específicos.
Hoy, cubriremos cómo puede usar el espacio negativo en sus diseños y descubriremos cómo exactamente ayuda a darle a su diseño una sensación limpia y ordenada..
Como acabo de explicar, el espacio en blanco (o espacio negativo) es el espacio entre los diferentes elementos que no contiene nada. Para propósitos de comparación, llamamos positivo al espacio que está lleno. El espacio negativo en realidad ayuda a moldear y definir qué es el espacio positivo. Esto se puede demostrar al observar la ilusión óptica a continuación..
¿Que ves? ¿El jarrón, o las dos caras? Si ves las caras, eso se debe a que, en este diseño particular, el espacio en blanco actúa como espacio negativo, mientras que el negro es lo positivo. Podemos invertir los roles y obtener una vista completamente diferente porque ambos están trabajando juntos para moldear la imagen.
A lo que intenta llegar este ejemplo es que su espacio negativo es bastante importante ya que puede ayudar a definir el contenido que reside en el espacio positivo. No piense en los espacios en blanco como el bit sobrante para el que no creó el contenido, sino como un jugador estructural importante en el diseño de su sitio..
Hay dos niveles de espacio en blanco también. Estos son espacios en blanco macro y micro, relacionados con el espacio entre los elementos del núcleo y el espacio entre los elementos más pequeños, respectivamente.
Google, como puede ver, es un gran defensor de los espacios en blanco en sus diseños. Se considera que el motor de búsqueda tiene un diseño limpio, ya que el enfoque está en el objetivo principal de la página, sin una dedicación masiva a otras áreas (a diferencia de otras).
Admiro el trabajo de diseño que el equipo de Envato realizó con este sitio. Hay un uso agradable y equilibrado del espacio en blanco entre los títulos, las líneas de crédito y los párrafos..
El espacio negativo en realidad no tiene que ser un solo bloque de color. En fotografía, cualquier área que no esté enfocada podría clasificarse como espacio negativo. En este ejemplo, la falta de enfoque en el fondo atrae tus ojos a la taza que es. (Y también, ¿Starbucks no cambió su logotipo?)
Cuando uno diseña, su enfoque está normalmente en el espacio positivo. Es casi inconsciente que el espacio negativo sigue y en realidad ayuda a moldear y dar forma a la forma en que se presenta el espacio positivo y luego se lee. Esta propiedad se puede modificar para adaptar la experiencia a un mejor momento de lectura e interacción con el espacio positivo..
Digamos que estás en una tienda. No sería una experiencia cómoda o placentera si tuviera problemas para moverse debido a los pasillos abarrotados, junto con el asistente de ventas que constantemente le pedía que ofreciera sus ofertas especiales. Hay demasiado para mirar y no tienes ni el tiempo ni la paciencia para encontrar lo que originalmente buscabas. No es agradable.
Esta es una de las características clave de por qué las tiendas de Apple funcionan tan bien. Son muy minimalistas y se da una gran cantidad de la planta a los propios productos. Sin embargo, si se adentra en otra tienda de computadoras, los pasillos interminables de máquinas lo consumen y tienen un aspecto diferente. En mi experiencia, la experiencia de compra minimalista es mucho más agradable..
Ahora, ¿qué tiene eso que ver con el diseño web? Mucho en realidad No nos conectamos a la tarea de buscar una cadena de texto específica debajo de una gran cantidad de contenido sin sentido que no le interesa. El espacio negativo ayuda con estos dos problemas al dejar los diseños ordenados al mismo tiempo que llama la atención sobre el punto focal de la página.
Podría preguntar, ¿por qué debería molestarme en asegurarme de que mi espacio negativo sea el correcto??
El texto en la web es diferente al texto en cualquier otra plataforma, y todos adaptamos nuestros diseños para que el usuario final tenga la experiencia más sencilla al leer nuestro contenido. A diferencia de un periódico, puede ser frustrante en la web intentar descifrar dónde está realmente el contenido que le interesa. Los diseños desordenados que son demasiado pesados para abordar no proporcionan una experiencia de lectura limpia y fácil, ya que primero nos vemos obligados a examinar la página web para distinguir los elementos entre sí. El espacio en blanco corta un búfer entre elementos, por lo que es más fácil para nosotros encontrar el contenido que nos interesa..
También podemos dirigirnos a un artículo mío reciente sobre tipografía, donde observé ocho factores importantes que contribuyen a una buena tipografía web. Al romper los elementos espaciales (como el espaciado inicial y el espaciado de letras), podemos aumentar la legibilidad. Trabajar a este nivel significa que estamos trabajando con microespacios blancos..
En pocas palabras (una diferente a la mencionada anteriormente, sin embargo), los espacios en blanco espacian todo, dan a los elementos su propio espacio para ser ellos mismos, para ser reconocidos y para ser fácilmente leídos e interactuados con ellos..
El espacio negativo se utiliza en muchos campos creativos, especialmente la fotografía. En fotografía, el espacio negativo es cualquier espacio que no se utiliza para sostener un tema, que no está muy lejos de su papel en el diseño web. Si echamos un vistazo al diseño web de Apple, ellos, naturalmente, utilizan tanto los espacios en blanco macro como los micro para rellenar elementos y darles su propio lugar en la página web..
El diseño de Apple utiliza espacios en blanco macro y micro, definidos por los dos colores diferentes superpuestos en la imagen de abajo. Esto da como resultado un diseño limpio y elegante que está espaciado con gracia. Puede que no lo sepas, pero tu atención al contenido habrá sido influenciada por la falta de contenido en las áreas de espacios en blanco. Se ha demostrado que nuestra capacidad de atención es más corta cuando se encuentra en la web, por lo que los diseños de impresión abarrotados y pesados no eran una tendencia que pasara a los reinos de diseño virtual..
Por supuesto, el espacio no tiene que ser realmente blanco. Cualquier tipo de espacio en blanco que no compita con el contenido de enfoque puede clasificarse como "espacio en blanco", como sugiere el diseño a continuación.
En el diseño de impresión, puede notar que su cliente quiere cada pieza de su propiedad inmobiliaria utilizada para promocionar su producto. Sin embargo, es una historia diferente cuando se diseña para terrenos virtuales. El espacio en blanco puede agregar una sensación de sofisticación y lujo a una página web genérica al crear la sensación de que el producto es más importante que los bienes raíces en los que vive. Puede hacer que un producto se vea lujoso usando el principio de "menos es más". Cuando nos fijamos en el sitio web de Apple, una marca que consideramos que se encuentra en el extremo más premium de la informática, no se necesita mucho, ya que los productos hablan por sí mismos, aunque junto con algunos eslogan minimalistas. Este es un fenómeno que también es popular entre los sitios web de salud y bienestar premium donde se necesita poco contenido para comunicar la idea general del producto o servicio anunciado..
A menudo, las marcas más baratas parecen meter tanta información en un espacio como sea posible; Diferentes mercados, diferentes usuarios finales. Los sitios de HP y Apple, por ejemplo, destacan este punto. Apple es notoriamente confiada y deja que sus productos hablen por sí mismos. Si desea el producto, eche un vistazo alrededor, si no se mueve a lo largo. Por otro lado, el sitio de HP emplea ventas más intensas y cruzadas, promociona ofertas y pone precios económicos en la mente del usuario, además de tratar de mostrar una variedad de productos alternativos en los que podría estar interesado..
En este momento, debe reconocer qué es el espacio negativo y cómo identificarlo en su diseño. Si es nuevo en este campo, puede confundirse cuando alguien le sugiere que mejore el espacio en blanco. No me sorprendería por completo si respondieras con algo como "eso es solo el espacio que queda". Bueno, de hecho, su espacio negativo puede mejorarse enormemente al ajustar algunos problemas comunes para que su existencia sea mucho más efectiva..
El espaciado inconsistente puede ser uno de los problemas más grandes, pero uno que se puede modificar fácilmente. Todo parece más equilibrado y, en general, más atractivo cuando el relleno alrededor de un elemento es igual. Si observamos el siguiente ejemplo, el diseño (el de nuestro sitio hermano, ActiveTuts +), el verdadero en el lado derecho, se ve mucho mejor porque el relleno entre los elementos es mucho más consistente..
Los márgenes tampoco deben hacer que un diseño se sienta desconectado. Los márgenes que son demasiado grandes podrían romper la relación entre los elementos, disminuyendo la sensación de unidad en el diseño. Los grandes márgenes también desperdiciarán sus bienes raíces, lo que potencialmente disminuirá la efectividad de su trabajo.
Como se explicó anteriormente, el espaciado a nivel micro es el espacio negativo que existe entre los elementos más pequeños de la página, como las letras en un párrafo..
El espaciado entre líneas puede mejorar drásticamente la legibilidad de un cuerpo de texto, ya que es un factor decisivo en su estudio de caso de tipografía bien adaptada. El espaciado entre líneas, o la inicial, es el microespacio en blanco entre las líneas de texto. Generalmente, cuanto más grande sea el líder, mejor será la experiencia que el usuario tendrá mientras lee, aunque demasiado puede romper la unidad y hacer que el diseño se desconecte..
He usado la imagen de abajo en varios artículos diferentes aquí en Tuts +, y quiero señalarlo de nuevo. El ejemplo de la derecha tiene más ventaja y, cuando se usa en una selección más amplia de texto, debería facilitar la lectura..
Del mismo modo, el espacio entre letras puede contribuir a un espacio negativo bien utilizado. Las letras pequeñas no son tan divertidas de leer, pero tampoco lo son las que podría confundir con palabras individuales. Una vez más, se trata de encontrar el equilibrio perfecto..
Al diseñar y adaptar su diseño web, hágalo con una mente fresca que no esté contaminada con lo que hizo la última vez. Cada proyecto es diferente y, dado que no hay pautas predefinidas o matemáticas consistentes, debe usar su ojo recién refinado para analizar cada producto por separado..
El espacio negativo, como lo he mencionado varias veces a lo largo de este artículo, tanto el diseño de desordenamientos como la ayuda a moldear y enfocar el contenido de la página. Volviendo a la analogía de las compras, nadie quiere tener que trabajar para lograr el resultado deseado. En su lugar, quieren que se sirva en un plato fácilmente identificable que no sea perturbado por platos de acompañamiento sin sentido que no pidieron, ni quieren..
Para resumir, también podemos mejorar el uso negativo del espacio analizando y refinando los márgenes al mantenerlos consistentes en la mayoría de las circunstancias, y prestando atención a la tipografía y el espaciado de micro niveles. Idealmente, también debería tomar cada proyecto de manera diferente para reconocer el punto dulce en el diseño.
Aparte de los beneficios prácticos de una página web limpia y ordenada, el espacio negativo puede crear una sensación de sofisticación y elegancia al permitir que el contenido "hable por sí mismo" sin grandes intrusiones que parezcan baratas..
Gracias por sumergirse en un viaje interesante en un área que no lo es. Es de esperar que haya aprendido algo (ciertamente lo he hecho) acerca de la importancia del espacio negativo en el diseño, y quizás piense dos veces antes de intentar introducir un millón de objetos sin sentido o innecesarios en su página. Antes de dejarte, un último consejo: prueba la prueba de cinco segundos (ve una página web durante cinco segundos y anota lo que recuerdas) solo para confirmar que tu diseño está despejado y que usa bien su espacio en blanco.
Accentsconagua