Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Añadir espacio a tus diseños

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
An Introduction to Composition
Building Consistency and Relationships into Your Designs

Spanish (Español) translation by Benjamín Porras (you can also view the original English article)

Aclaremos las cosas básicas primero. El espacio blanco no es simplemente un bloque de espacio en tu diseño que tiene que ser blanco. En su lugar, piensa en ello más como un espacio estructural "vacío", donde no hay elementos extra, adornos u otras partes de tu diseño.

A great example of whitespace - but still with embellishments - on Layervault's website.A great example of whitespace - but still with embellishments - on Layervault's website.A great example of whitespace - but still with embellishments - on Layervault's website.
Un gran ejemplo de espacio blanco, aunque tenga diseños, en el sitio web de Layervault.

Esencialmente, el espacio blanco es espacio "sin usar", aunque creo que puede ser un mal término para ello. Aunque el espacio blanco puede parecer no tener uso, en realidad sirve para un propósito muy útil en tus diseños y, de hecho, funciona muy bien. El espacio blanco es valioso para cualquier diseño, permitiendo que tu diseño respire y ofreciendo un mayor equilibrio a tus diseños.

Después de todo, ¿qué define la presencia de un bloque, si no es el espacio blanco que lo rodea?


Micro y macro espacio en blanco

Si quieres profundizar más, podemos definir otros tipos de espacios en blanco: micro y macro.

El microespacio blanco

El microespacio en blanco es lo que esperarías, todas las pequeñas, pequeñas partes de tu diseño que están desprovistas de cualquier elemento. Esto puede ser los pequeños trozos de espacio entre cada letra de una palabra, o entre cada línea de palabras.

El macroespacio blanco

El macroespacio en blanco se refiere a los trozos más grandes de espacio que encontrarás en tu diseño, entre los principales bloques de contenido, elementos o módulos. Por ejemplo, puedes encontrar bloques de macro espacio en blanco entre un encabezado y el siguiente bloque de contenido, o entre un trozo de texto a otro.


¿Por qué deberíamos preocuparnos por los espacios en blanco?

Imagina que estás navegando por un sitio web y, no importa donde mires, no estás seguro de haber encontrado lo que buscabas. Eso, y también es difícil de leer; el texto es estrecho, está demasiado cerca del siguiente bloque de texto y no hay un divisor sensato (o incluso solo el espacio suficiente) para diferenciar los bloques. Es molesto, ¿no?

Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.
Mailchimp usa los espacios en blanco de tu página web para destacar el mensaje de tu marca con mayor claridad.

Lo más probable es que los usuarios de los sitios web que diseñes se sientan de la misma manera. En todo caso, serán menos pacientes que tú; nosotros entendemos que crear un buen sitio web toma tiempo, talento y mucho conocimiento, pero a la mayoría de los usuarios no les importa y a menudo solo esperan un buen sitio web, una buena experiencia, y se frustran cuando no reciben eso.

Cuando estás mirando cualquier truco de composición u opción de diseño, los espacios en blanco son una de esas cosas que deberían estar siempre presentes en la mente. Permitir que todos los elementos principales de nuestro sitio respiren da un mejor equilibrio a un sitio web, también nos permite poner más confianza en nuestra jerarquía para dirigir a nuestros usuarios hacia donde queremos que vayan, guiándolos en su viaje a través del uso del sitio web.


Ventajas de del espacio en blanco

Ya deberíamos saber que tener más espacios en blanco en nuestros diseños da a cada elemento diferente de la página más espacio para respirar. Esto crea un equilibrio, ya que significa que podemos dar más peso a los elementos en los que queremos centrarnos.

On Dan Edward's site, he uses whitespace to offset the typography and introduction to his portfolio website.On Dan Edward's site, he uses whitespace to offset the typography and introduction to his portfolio website.On Dan Edward's site, he uses whitespace to offset the typography and introduction to his portfolio website.
En el sitio de Dan Edward, usa el espacio en blanco para compensar la tipografía y la introducción a su portafolio de sitios web.

De acuerdo con nuestra jerarquía, el espacio en blanco también puede ayudar a guiar a nuestros usuarios a través de la página web de forma adecuada y tal y como pretendemos que lo hagan. Con más espacio alrededor de nuestros elementos, también podemos esperar acelerar las interacciones entre nuestro usuario y el sitio web. Esto significa que nuestros usuarios deberían ser capaces de encontrar lo que están buscando lo más rápido posible, lo que solo ayuda a mejorar su experiencia en tu sitio web.


Cómo utilizar el espacio en blanco en tus diseños

Entender que el espacio en blanco es bueno para tus diseños es una cosa, pero tienes que saber cómo ponerlo en práctica.

KISS (Keep It Simple, Stupid) (Manténlo simple, tonto)

Siempre me gustaría poder llamar a esa parte "KIS", ¡ya que odio llamar estúpida a la gente! Sin embargo, es verdad, mantén todo simple. A menudo, no hay necesidad de complicar tu diseño metiendo trozos de información en cada rincón. Lo que quieres hacer es usar todas las otras técnicas de composición (espacio en blanco, color, tamaño, tipografía, etc.) para llamar la atención sobre las áreas de tu diseño que necesitan un poco más de atención.

Mantener un diseño sencillo no solo ayuda a facilitar tu vida como diseñador y desarrollador, sino que también facilita las cosas a los usuarios. Mantén las cosas simples eliminando absolutamente todo lo que no es necesario o importante, o que el usuario no necesita saber.

Esto no significa que termines con una absurda cantidad de espacio completamente vacío, la cual haría parecer que ninguna parte de tu diseño tiene relación con la otra. En cambio, utiliza el espacio que tienes inteligentemente, y mejora la usabilidad de tu diseño a través de un espaciado que sea consistente y que asegure que tu diseño sea claro y fácil de entender y seguir.

Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.
Squarespace usa el espacio, la textura, el color y la tipografía para establecer un tono de marca claro, incluso con muchas historias diferentes que contar.
squarespace-2squarespace-2squarespace-2
squarespace-3squarespace-3squarespace-3

A continuación...

Habiendo introducido los fundamentos de la composición, y hablado un poco sobre los espacios en blanco, nuestra siguiente sección llevará las cosas más lejos al buscar la consistencia y las relaciones en nuestros diseños.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.