¿Alguna vez has entrado en una página web saturada de contenido? Esas webs en las que no consigues encontrar lo que estabas buscando por la gran cantidad de información. Cuando creamos una página web, no todo es rellenar sin parar y justo eso es el White Space, zonas vacías. Es tan importante porque en una web a parte de buscar información también buscamos que esté bien estructurada y no sature. Gracias a el White Space, permitimos que el diseño respire y la página quede bien estructurada.
¿Qué es el White Space?
El White Space es cualquier zona de la pantalla en la que no hay nada, ni imágenes, ni texto, ni menú, simplemente nada. Esto aporta orden y estructura toda la web, además nos aporta muchas ventajas que trataremos posteriormente en profundidad, así como que refuerza la legibilidad al proporcionarnos áreas de descanso visuales. Además de que un espacio en blanco puede separar diferentes elementos visuales en una web. Sin embargo, no es tan simple como parece, no basta con que las páginas sean visuales, sino que se deben considerar bien los elementos, dar prioridad a aquellos que aportan relevancia, por ejemplo, enlaces muy importantes en lugar de imágenes de relleno que no aporten información. Por lo que en base a la finalidad, las expectativas de la audiencia, etc debemos reducir o ampliar los White Space.
Mejora la UX
¿No sabes lo que es el diseño UX? Te dejamos un artículo sobre esto. Al crear espacios vacíos entre los elementos, conseguimos que estos tengan más importancia y marcamos el límite de cada uno. Gracias a esto, facilitamos la interacción del cliente con nuestro contenido y así hacemos que nuestra página web sea más usable. Pongamos un ejemplo, piensa en los botones de una página web, si estuvieran demasiado juntos se correría el riesgo de pulsar el equivocado. En todas las páginas web es necesario usar el White Space, pero especialmente en las tiendas online, dónde la experiencia del usuario por la web es fundamental para alcanzar la conversión.
Favorece la lectura
El hecho de añadir espacios entre los títulos y los párrafos no es algo actual, en la maquetación editorial ya se venía haciendo, de esta manera el texto es mucho más visual. Usar White Space entre las diferentes jerarquías tipográficas hace que la lectura resulte mucho más sencilla y mejora la estructura visual.
Crea grupos
La ley de proximidad se refiere a que aquellos elementos que tienen poca distancia entre sí, pertenecen al mismo grupo, mientras que los que tienen más distancia entre ellos, pertenecen a grupos diferentes. Así usando los White Space, podremos crear agrupaciones sin la necesidad de usar separadores.
La imagen de la derecha muestra un correcto White Space, mientras que la de la izquierda no, ya que los botones están muy próximos.
Ejemplos de White Space
- Bordes dentro de un diseño de página.
- Áreas entre las columnas de texto.
- El espacio que rodea a los elementos.
- Márgenes entre los textos y las imágenes.
- Huecos al rededor de los botones.
- La distancia entre las líneas del cuerpo del texto.
Datos y estadísticas relevantes
- Los sitios web con amplios espacios en blanco reciben entre un 35 – 45% más de atención visual que los que no hacen un correcto uso de los White Space.
- El espacio en blanco de una web puede llegar a representar un 50%, equilibrándolo con el contenido de esta.
- Contrastar espacio en blanco con elementos más oscuros añade profundidad a la web.
Equipo PubliUP
