Cómo el uso de espacios en blanco mejora sus diseños
Al escuchar el término espacio en blanco, su mente puede saltar a barras laterales blancas vacías que intercalan el contenido en el centro. Sin embargo, el espacio en blanco (o espacio negativo) también se refiere al área vacía alrededor de sus imágenes u otros elementos en la página, además del espacio entre las letras en sus títulos y texto.
Tener algo de espacio en blanco es esencial para el diseño de casi todos los sitios (sin contar sitios como The Million Dollar Homepage). Si se hace correctamente, le da a su sitio un aspecto más refinado sin sacrificar demasiado espacio en la pantalla.
¿No convencido? “No pago por alojar espacios vacíos”, ¿dices? Bueno, aquí hay cuatro razones por las que es posible que desee cambiar de opinión.
# 1: atrae la atención
Empecemos por el más simple. Si bien la mejor estrategia en línea para captar la atención es un tema de mucho debate, todos podemos estar de acuerdo en lo que no llama la atención: nada. Esto es lo que hace que el espacio en blanco sea un método eficaz para conducir y canalizar la atención, porque puede usarlo para llamar la atención sobre el punto de interés más rápido.
Por ejemplo, puede saturar una página con texto e imágenes y resaltar los elementos importantes de la página. O puede dejar más espacio alrededor de las imágenes clave o agrandar las fuentes (aumentando el espacio en blanco de las letras y el interlineado) para que se destaquen ante el espectador de una manera mucho más ordenada. Arfa habla sobre la importancia de los puntos focales en su publicación Hocus Focus: Importancia de los puntos focales y consejos útiles en el diseño web.
Y puede hacer esto con todo tipo de páginas, como su página de inicio, páginas de destino, embudos de conversión, páginas de cartera, etc. Asegúrese de consultar la publicación de Nataly sobre Manejo de espacios en blanco: diseños de sitios web con un sentimiento abierto para obtener más ejemplos de diseño de sitios web.
El principio clave es simple: el espacio vacío alrededor del objeto clave centra la atención del espectador en él, ya que no hay elementos que distraigan ni desorden a su alrededor.
# 2: establece el orden visual
¿Cómo sabe la diferencia entre el logotipo y el chapoteo de la página de inicio de un sitio web? Lo obvio que me viene a la mente es el tamaño del elemento. Quizás un poco menos obvio, pero muy importante desde el punto de vista del diseño, es el tamaño del espacio vacío que rodea al elemento. Los elementos de mayor prioridad tienen más espacio vacío a su alrededor y eso es lo que los hace resaltar y captar la atención del espectador.
Aquí hay un diseño elegante que demuestra la jerarquía visual.
¿Observa cómo no hay líneas, colores o divisores para separar las diferentes secciones? Sin embargo, aún puede diferenciar los elementos de navegación de las opciones en pantalla, el encabezado, los botones para compartir en redes sociales y la información de contacto. ¿Cómo? Una palabra: espacio en blanco.
Al implementar esta jerarquía de prioridades visuales y utilizar el espacio en blanco, su diseño exhibirá un flujo visual fluido que elimina la ambigüedad. El espectador sabe qué es importante y hacia dónde ir.
Las páginas de destino suelen ser un gran ejemplo de esto. Tiene un título grande que contiene más espacios en blanco que el texto que sigue. Y ese texto continúa con un gran ¡Suscríbete ahora! botón que tiene la mayor cantidad de espacio en blanco a su alrededor. Este es un ejemplo bastante genérico que se puede ver en la experiencia de navegación diaria.
Echemos un vistazo a GTmetrix.
La página de inicio de GTmetrix aprovecha el espacio en blanco para establecer un orden visual fuerte. Cuando accedes al sitio web, inmediatamente te atraen el título y el botón Analizar. Su diseño simétrico y su gran tamaño de fuente anima a los visitantes a utilizar la herramienta de análisis de velocidad del sitio.
# 3: separa los grupos
Si todavía piensa que el espacio en blanco y el desperdicio de espacio son sinónimos, permítame mostrarle cómo puede ahorrar espacio usándolo.
Si se está quedando sin espacio en la pantalla, pero sus productos, servicios o cualquier otra cosa hacia la que desea que la atención de su espectador continúe acumulándose, corre el riesgo de alinearlos en el espacio sobrante y colocar los elementos demasiado juntos. . Esto hace que los elementos de esa sección parezcan similares o reciban poca atención porque se han mezclado con el ruido.
Una solución puede ser que en lugar de resaltar sus productos, simplemente cambie su tamaño, cambie su diseño y orientación, o cualquier combinación de los dos. Esto creará un espacio en blanco entre los objetos, los diferenciará entre sí y hará que sea más fácil para el espectador darse cuenta de eso.
Veamos cómo CoSchedule ha diseñado su sección de características.
La sección de características de CoSchedule sigue un diseño que les permite mostrar una característica a la vez. De forma individual, consta de una breve descripción y una imagen. Como solo puede ver una característica a la vez, atrae su atención y la mantiene allí.
También puede agrupar campos similares en un formulario aprovechando el espacio en blanco. Facilita la lectura del formulario y anima al visitante a completarlo. Los formularios con poco o ningún espacio en blanco se ven abarrotados y aparentemente son difíciles de completar. Además, también dan la impresión de que el formulario solicita demasiada información, mientras que en realidad puede estar pidiendo solo lo esencial.
A continuación, se muestra un ejemplo de dos formularios: uno con espacios en blanco y el otro sin él. ¿Ves cómo el formulario con divisores tiene más espacios en blanco y hace que los campos del formulario se agrupen?
# 4: mejor legibilidad
Por último, pero no menos importante, el espacio en blanco es la columna vertebral de la legibilidad del texto. No podría leer este texto si estuviera repleto con un espacio mínimo.
Tener muy poco espacio en blanco hace que el texto parezca estrecho y difícil de leer. Deje demasiado espacio y desperdiciará espacio, además de correr el riesgo de que el texto se vea desarticulado. Esta es la razón por la que los mejores diseñadores del mundo ponen tanto énfasis en las fuentes y la tipografía.
El ejemplo de Google Fonts anterior muestra dos fuentes: BioRhyme Expanded y Cookie. BioRhyme Expanded usa demasiado espacio en blanco, mientras que Cookie es un poco difícil de leer porque sus caracteres individuales no están lo suficientemente espaciados.
Ahora comparémoslos con dos fuentes bien equilibradas:
Las diferentes fuentes utilizan diferentes cantidades de espacio en blanco según el estilo. Sin embargo, otro factor importante es el tamaño de la fuente. Los encabezados son más grandes y utilizan más espacio para ser prominentes para el espectador. Algunas otras áreas que utilizan espacios en blanco para mejorar y mejorar la experiencia de lectura incluyen el interlineado y los márgenes de los párrafos.
Conclusión
En resumen, el espacio en blanco en el diseño es uno de los lugares donde el arte y la ciencia se encuentran. Una aplicación científica de este arte es necesaria para que el diseño sea efectivo. Es un paso en la dirección del embellecimiento mediante la simplificación; de ofrecer más con menos.
Recapitulemos rápidamente los principales beneficios de aprovechar el espacio en blanco para mejorar sus diseños:
- El espacio en blanco ordena su diseño y le permite llamar la atención del usuario a donde quieras.
- Eso establece el orden visual facilitando que el visitante identifique inmediatamente los elementos importantes de su página, como los botones de llamada a la acción.
- El uso de espacios en blanco le permite hacer que sus diseños se vean más prolijos y menos esparcidos por agruparlos juntos.
- Espacio en blanco en fuentes y tipografía mejora la legibilidad de su sitio.
Espero haberle podido convencer de que el espacio en blanco no es un desperdicio de espacio en la pantalla. En todo caso, es tan valioso como el contenido real de su sitio web, si no más para formar su estructura y mejorar la accesibilidad.
¿Cree que puede mejorar el diseño de su sitio web utilizando espacios en blanco? ¿Si es así, cómo? Nos encantaría saber de usted, ¡háganoslo saber comentando a continuación!