Espacio libre en diseño web. 9 sitios de inspiración

El espacio vacío no siempre es malo.

La experiencia mundial del diseño web ha demostrado: es mucho mejor cuando hay mucho aire y espacio vacío en el diseño.

Los visitantes del sitio web se utilizan para hojear rápidamente las páginas y hojear publicaciones. Diseños sobrecargados, donde los desarrolladores han intentado encajar demasiada información, confunden a tales usuarios. La simplicidad es la clave para la atención indivisa de los usuarios. Y esta simplicidad comienza con el uso efectivo del espacio libre.

Analicemos brevemente por qué el espacio libre es tan importante como aumenta la conversión, además de considerar nueve sitios y la eficacia con la que sus creadores usan el espacio libre, alentando a los visitantes a actuar.

El espacio libre en el diseño web es el aire entre los distintos elementos. Separa visualmente el diseño del sitio y la información en secciones, atrayendo la atención de los visitantes a lo más importante.

Las áreas que se dejan vacías intencionalmente son agradables a la vista. Además de la estética, tienen un impacto significativo en cómo el cerebro percibe y procesa la nueva información. Demasiada información o datos visuales, apretados en un espacio pequeño, causan fatiga cognitiva: se vuelve más difícil percibir la información. Para el diseño no hay nada peor que la congestión.

¿Por qué necesitas espacio libre?

Recuerda lo difícil que son las páginas del directorio telefónico alfabético. Todas estas pequeñas columnas de texto se combinan en un flujo indigesto de información. Es extremadamente difícil encontrar lo necesario en tales libros de referencia.

Afortunadamente, a diferencia de los directorios telefónicos, creados para proporcionar la máxima información, ocupando un espacio mínimo, la mayoría de las publicaciones impresas utilizan activamente el espacio libre, facilitando la percepción.

A continuación, en los diseños del servicio de tinta digital, hay un ejemplo vívido de cómo el uso eficiente del espacio libre facilita la percepción de la información:

¿Ves la diferencia? En el diseño de la izquierda, la mayor parte del espacio libre se utiliza, como resultado, el texto parece masivo y sobrecargado. La página no causa interés. Incluso con una mirada rápida, está claro que la lectura será tediosa.

Y en el diseño a la derecha, la distancia entre las columnas y los párrafos es mucho mayor. Los simples cambios de diseño hicieron que el texto fuera más legible y atractivo.

Además de que el espacio libre simplifica la comprensión del texto, se puede utilizar para resaltar puntos especialmente importantes: Atraer la atención del lector hacia lo más importante. Al separar el diseño y formar pequeñas secciones, hace que la página sea más ponderada y refinada.

Echa un vistazo a estos diseños de tarjetas de impresión printwand:

En la tarjeta de visita a la izquierda hay un espacio vacío, pero los elementos aún están apretados en una esquina, debido a que la tarjeta de visita no es profesional. La tarjeta de negocios de la derecha muestra el uso efectivo del espacio libre: los elementos están a una distancia considerable entre sí, es mucho más fácil percibirlos.

En el diseño web, el espacio libre es un elemento clave tanto para la estética como para la optimización de la conversión. El uso adecuado del espacio libre le permitirá facilitar la navegación a través del sitio, hacer que sea comprensible y conveniente y que permita a los usuarios llamar a la acción de manera discreta, lo que aumenta la conversión del servicio.

La investigación clásica de Human Factors International reveló que El uso de espacio libre para resaltar elementos importantes del sitio web aumentó el alcance de los visitantes en casi un 20%.

Echa un vistazo a estos dos diseños:

En el diseño de la izquierda, el botón de llamada a la acción se comprime con otros bloques: separadores y texto densamente colocado. Es difícil para un visitante elegir lo más importante, porque hay demasiadas distracciones en la página.

En el diseño a la derecha, el botón de llamada a la acción está rodeado de espacio libre. Ella inmediatamente atrae la atención del visitante.

Al agregar un poco de espacio libre alrededor de los elementos de la llamada a la acción, mueve el otro contenido a continuación. Pero no hay nada de malo en eso. No intente ajustar todo el contenido de la página sin desplazarse. Como resultado, el sitio puede ser masivo y sobrecargado.

9 sitios que efectivamente utilizaron espacio libre

1) Shopify

La página principal de la plataforma de comercio electrónico Shopify está diseñada para ofrecer a los visitantes registrarse para obtener una versión de demostración gratuita.

Para este propósito, el formulario de registro de un solo perfil estaba rodeado de una cantidad suficiente de espacio libre, minimizando las distracciones. Así que los usuarios definitivamente notarán el mensaje principal de esta página. La fuente de la navegación del sitio principal es significativamente menor que en la oferta de suscripción. Y el bloque de menú se desplaza a la parte superior de la pantalla para no distraer a los usuarios del formulario principal.

2) Everlane

El espacio libre no tiene que ser un fondo blanco liso. Lo principal es que los elementos están ubicados estratégicamente a una gran distancia entre sí, lo que le permite evitar la congestión de la página y evitar que los visitantes se confundan en una cantidad excesiva de contenido.

Para demostrar la última colección de moda, el minorista de ropa Everlane ha elegido un diseño minimalista. En el fondo hay una foto de la chaqueta "GoWeave". Y en el centro de la pantalla, el botón con una llamada a la acción: "Comprar ahora" se coloca hábilmente. Un ejemplo ideal de cómo ofrecer al usuario hacer una compra y no parecer agresivo.

3) Wistia

Todo lo que necesita para hacer un uso estratégico del espacio libre es asegurarse de que el botón de llamada a la acción esté notablemente separado del resto del contenido. Un cambio tan simple juega un papel importante en cómo los usuarios perciben su sitio.

Wistia Video Platform presenta a los usuarios una página de inicio fija con una pregunta amigable y una lista desplegable. Los dos botones centrales de llamada a la acción son el punto focal principal de toda la página. Al mismo tiempo, están bastante separados de la navegación principal y la imagen de fondo.

4) Welikesmall

La agencia digital Welikesmall demuestra que el espacio libre no tiene que ser aburrido, vacío o estático. En la página principal de su sitio hay un video de demostración con los últimos proyectos. Los episodios cortos atraen instantáneamente la atención del usuario.

El video de pantalla completa en cualquier otro contexto puede parecer demasiado agresivo y sobrecargado. Pero los diseñadores se ocuparon de una cantidad suficiente de espacio libre, por lo que esta solución parece elegante. El foco está en el video de fondo, y la información del texto es mínima. En una esquina de la página está el logotipo de la compañía, y en otra, el menú "hamburguesa". El eslogan "Creer en hacer", junto con un botón de llamada a la acción que conduce a la demostración completa, se centra en la página.

5) Simpla

La página de inicio de Simpla demuestra lo poderosa que puede ser una herramienta de marketing de espacio vacío sin desplazamiento. Esta página simple y minimalista obliga al usuario a desplazarse por la página.

Gran parte del sitio bajo el logotipo y el menú quedaron completamente vacíos. Sin embargo, la parte de la foto que se ve desde abajo y un pequeño fragmento del texto como si invitara al usuario a seguir leyendo y familiarizarse con la historia y los objetivos de la empresa.

Esta solución no solo parece sofisticada, sino que también llama la atención de los usuarios hacia el sitio.

6) Harvard Art Museums

Los museos de arte de Harvard son famosos por exhibir pinturas antiguas. Sin embargo, su página de inicio parece un excelente ejemplo de diseño moderno. Aquí, el espacio libre se convierte en el fondo ideal para las obras de arte: nada distrae al usuario de la contemplación de lo bello. La exposición de arte digital perfecta.

El diseño en forma de piedra atrae al usuario para que se desplace más y asegura que ninguna de las imágenes se pierda entre la multitud. Para mantenerlo minimalista, el menú del sitio está completamente oculto hasta que se desplaza sobre la parte superior de la página.

7) Burnkit

Cuando trabaje con espacio libre en la página principal, debe decidir que la variedad de información es lo suficientemente importante para mostrar. Pero esta agencia de diseño nos muestra que incluso un diseño minimalista puede acomodar una cantidad significativa de contenido en sí mismo, y el diseño no se verá como un montón de basura con bloques que se ejecutan uno sobre el otro.

El contenido principal del blog, los extractos clave de la cartera y algunos trabajos tras bambalinas de la agencia en la página principal de Burnkit. ¿Cómo lograron encajar todo esto en una página sin convertir el sitio en un montón de información sobrecargado? Espacio libre. Un montón de espacio libre. Cada artículo está separado por sangrías anchas. El usuario puede desplazarse por la página para ver el nuevo material.

8) medio

El servicio mediano utiliza de manera muy inteligente el espacio libre, lo que obliga a los lectores a desplazarse por la página y los involucra en estadísticas interactivas: cuántas personas calificaron esta publicación, cuántos comentaron y qué contenido similar pueden leer.

El espacio libre hace que los usuarios presten atención a la columna central de la pantalla, donde se presentan el título y la imagen del título.

9) Ahrefs

El sitio web de Ahrefs es otro ejemplo del hecho de que el espacio libre no debe estar libre de color. Los creadores del sitio nos muestran cómo utilizar correctamente el espacio libre y el formato de texto para atraer la atención del visitante. Su solución es simple y clara: un botón naranja brillante, que ofrece obtener una versión de prueba.

Con texto grande y en negrita, Ahrefs denota el valor central de su software. Luego viene un texto alineado en el centro más pequeño, rodeado de espacio libre, que lleva al usuario directamente al botón de llamada a la acción. Inteligente, ¿verdad?

Artículo traducido por Tatiana Musihina, Agencia Especialista en Marketing en Internet. espacio m2b.

Artículo original por referencia.

Deja Tu Comentario