Diseño de Paginas Web

Utilización del espacio en blanco en el diseño de una web

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 4,25 de 5)
Cargando...

El espacio en blanco es un elemento importante en el diseño web. Su correcta utilización puede ser la diferencia entre un buen y un mal diseño.

El espacio en blanco es uno de los componentes de todo diseño gráfico y diseño web, con la misma importancia desde el punto de vista del diseño en su conjunto que el que tienen los textos, las imágenes y los videos.

Cuando nos iniciamos en el diseño de páginas web, normalmente desconocemos este importante componente, empleándolo solo como el espacio que separa otros elementos. No nos damos cuenta que cada espacio vacío forma parte del conjunto visual de nuestro diseño.

Es frecuente ver como los diseñadores web se esmeran en ocupar la mayor parte del espacio de la página con diferentes contenidos, tratando de evitar que queden espacios en blanco. Esto da como resultado páginas sobrecargadas y con elementos difíciles de ver y distinguir.

El espacio en blanco y los principios de diseño web

En artículos anteriores hemos detallado cuales son los principios en los cuales se basa el diseño web. Estos principios son el balance, el contraste, el énfasis, el ritmo y la proximidad.

En la aplicación de estos principios básicos de diseño la utilización de los espacios en blanco es fundamental. El espacio en blanco contribuye con el balance de los diferentes elementos componentes de una página web, sirve para realzar elementos por contraste, colabora y provoca el ritmo y sirve para dar sensación de proximidad en elementos semejantes.

Por esta razón resulta imprescindible considerar al espacio en blanco como un elemento más en la página web. El empleo de lugares vacío colabora en la jerarquización de los contenidos de la web y en la organización de los mismos.

Si se quiere distinguir entre diferentes grupos de información relacionada, lo más adecuado es el empleo de espacios en blanco, de forma que los diferentes grupos queden bien definidos.

En el siguiente ejemplo, podemos ver como se han separado los diferentes grupos de información empleando espacios en blanco:

Espacios en blanco

Cuando se pretende realzar un elemento por encima de otros, también los espacios en blanco pueden ser muy útiles. En el siguiente ejemplo, el diseñador ha rodeado el título de la página de abundantes espacios en blanco, lo que colabora en gran medida en el contraste de este elemento. Si se hubieran puesto menos espacios, su destaque sería mucho menor.

Contraste con espacios en blanco

El ritmo o repetición de elementos en diseño web, conlleva necesariamente la utilización de espacios en blanco para lograr el efecto deseado.

En la siguiente página web, las imágenes empleadas forman un patrón de repetición. Este ritmo es destacado por el necesario espacio en blanco entre cada una de ellas, haciendo que se note claramente que se trata de imágenes repetidas y no una única imagen.

Ritmo con espacios en blanco

Formar grupos de información relacionada es un excelente método de organizar la información para facilitar el acceso a la misma por parte de los usuarios. Necesariamente, estos grupos deben estar diferenciados unos de otros, por lo que se hace necesario el empleo de espacios en blanco para conseguirlo.

En el siguiente diseño, se han separado cada grupo de información en forma nítida con espacios.

Proximidad con espacios en blanco

El temor a los espacios en blanco

Es común que quienes quieren tener una página web, piensen en economizar el espacio con que cuentan, colocando una gran cantidad de información en ella. Esto hace que se piense en el espacio en blanco como un desperdicio, por lo que muchas veces se rellenan los mismos o se minimizan. Como consecuencia de ello, la acumulación de información hace que la mayor parte de estos contenidos pierdan su visibilidad y sean difíciles de ver en un primer golpe de vista, algo que resulta muy importante teniendo en cuenta que los usuarios de las páginas web emplean muy poco tiempo en la localización de objetos.

Existen ejemplos notables de páginas web cuyo diseño se basa en el destaque de unos pocos elementos, dejando el resto del espacio vacío. Quizá el más paradigmático de esos ejemplos sea el siguiente:

Google y los espacios en blanco

¿Quién no conoce esta página? Todo el diseño se centra solo en el cometido principal de la página, por lo que el usuario no tiene que realizar una búsqueda entre otros contenidos para llegar a lo que realmente le interesa. El resto de la página, un gran espacio en blanco.

Si una de las web más importantes y visitadas del mundo no tiene ningún temor por emplear los espacios en blanco de esta forma, ¿Por qué habríamos de tenerlo nosotros a la hora de realizar nuestros diseños?

¿Por qué son necesarios los espacios en blanco?

Para dar respuesta a esta pregunta, debemos imaginarnos a un orador dirigiéndose a su público. ¿Qué sucedería si no hiciera pausas en su discurso? Además de asfixiarse, el orador no lograría que sus palabras fueran entendidas adecuadamente por su público, ya que el sentido de las frases está marcado en gran medida por los espacios vacíos, que en el lenguaje escrito están marcados por las diferentes puntuaciones.

Lo mismo sucede con los diseños web. Si no separamos los contenidos por espacios en blanco, el diseño no “respira”. Los contenidos pierden visibilidad y destaque y el mensaje que el conjunto del diseño pretende transmitir se pierde.

Por otro lado, el empleo de márgenes hace que el recorrido de la vista sea más corto, por lo que le resultará más cómodo. Por esta razón, son muchos los diseñadores que emplean márgenes amplios, logrando que el conjunto del diseño se vea claramente. La siguiente página es un claro ejemplo:

Márgenes en el diseño web

El diseñador ha dado buenos márgenes a izquierda y derecha del cuerpo principal, por lo que el usuario logrará acceder a todos los contenidos de la página con un breve recorrido de la vista. Además este diseño gana notoriamente en claridad con la utilización de los muy amplios espacios en blanco que podemos ver en el mismo.

Conclusión

A la hora de realizar un diseño, debemos tener en cuenta desde un principio la utilización de espacios en blanco, no solo como forma de mantener separados los elementos de la página, sino que debemos tomarlos como elementos en si mismos.

El espacio en blanco bien empleado, es tan importante para un diseño web como cualquiera de los demás elementos que se deseen utilizar.

Deja una respuesta