Cuando piensas en los espacios en blanco en el diseño web, ejemplos como Apple o Google son probablemente los primeros que vienen a la mente. Si bien estas empresas hacen un gran trabajo al usar espacios en blanco en sus diseños, ¿hay muchas otras maneras de aprovechar al máximo el espacio? Incluso si no es siempre blanco.
El espacio en blanco es una parte importante de su plan de diseño. Aquí, vamos a ver la importancia del espacio como herramienta de diseño y cinco ejemplos de sitios web que hacen un gran uso del espacio en blanco (que no es en absoluto blanco).
Espacio en blanco 101
El espacio en blanco se refiere a cualquier parte del diseño que queda sin tocar por los elementos de diseño. Esto incluye el espacio entre gráficos o imágenes, entre líneas de texto, y márgenes y canales. El espacio abierto dentro de los elementos de diseño, como el? Oculto? La flecha dentro del logotipo de FedEx se denomina espacio negativo, aunque se ha convertido en un lugar común para intercambiar la terminología.
El espacio en blanco es importante porque desempeña un papel importante al contribuir a la legibilidad y organización general de un diseño.
- Facilita el texto para que los usuarios puedan escanear.
- Ayuda a crear agrupamientos naturales de elementos similares.
- Prioriza elementos en el diseño, como llamadas a la acción, búsqueda o navegación.
- Crea una sensación de armonía y sofisticación.
- Establece el equilibrio y la jerarquía visual.
- Ayuda a hacer que los bloques pesados de texto sean más fáciles de digerir (y es más probable que se lean)
- Guía a los usuarios a través del diseño de una manera lógica.
El espacio no tiene que ser blanco?
Hay un mito sobre el espacio en blanco que necesita ser desacreditado: el espacio en blanco no tiene que ser blanco.
El espacio en blanco puede ser un color sólido, un fondo borroso o incluso un poco de movimiento. El factor común es que el espacio es solo eso? espacio. No contiene otro contenido o elemento de diseño. Si el usuario mirara más allá o fuera de él, no se perdería información.
El umbral es que todos los espacios en blanco en realidad podría ser blanco, pero el diseñador ha optado por crear lo visual de otra manera mientras sigue usando los principios del espacio.
El espacio en blanco puede aparecer en cualquier parte del diseño y debe servir como una herramienta para mejorar la facilidad de uso desde la parte superior de la página hasta la parte inferior y en todas las páginas secundarias. Un buen patrón de diseño utilizará el espacio en blanco constantemente para ayudar a facilitar la visualización de los elementos visuales.
Ejemplo 1: U + Diseño
U + Design, literalmente, invierte el concepto de espacio en blanco con mucha apertura en un lienzo negro para elementos de texto. Las imágenes viven en un espacio más claro, lo que crea un efecto yin y yang, y aunque ninguno de los espacios es técnicamente blanco, todo es espacio en blanco.
El espacio se utiliza igualmente bien debajo del rollo, con mucho espacio para los elementos y un patrón casi móvil de elementos de espacio y diseño que fomenta el desplazamiento.
Si está buscando una lección sobre cómo crear texto legible, eche un vistazo a este diseño. Si bien se utilizan varios estilos y colores de texto, todo es legible y la ubicación y el tamaño del texto proporcionan un buen marco jerárquico.
Ejemplo 2: Emark
Emark usa recortes y patrones geométricos para crear espacios en blanco y agregar interés visual a las imágenes y el texto. El espacio es una mezcla de blanco y color con formas y líneas que ayudan a proporcionar un flujo visual.
El diseño también utiliza bloques de colores sobre un fondo blanco que incluyen un montón de espacio en blanco. La brillante combinación de color y espacio crea contenedores de texto distintivos que se doblan como llamadas a la acción con un gran clic. Debido al espacio en blanco de color, los usuarios saben que cada uno de estos bloques está diseñado para hacer clic.
Todo el diseño utiliza espacios en blanco magnificados alrededor de los elementos de texto con mucho relleno y espacio entre líneas para mejorar la legibilidad también. (Esta es una de esas tendencias que probablemente veremos aún más a medida que los conceptos de espaciado de texto móvil comiencen a filtrarse aún más en diseños de sitios web basados en escritorio).
Ejemplo 3: Broma de invierno
Joke de Winter utiliza una foto borrosa en blanco y negro como plantilla para el espacio en blanco en el fondo de su sitio web. El aspecto es un diseño moderno en capas que tiene una sensación distinta y un flujo fácil.
Debajo del desplazamiento, se utiliza aún más espacio en blanco alrededor de los elementos de texto con márgenes de gran tamaño para poner énfasis en elementos de texto específicos. El espacio en blanco en el diseño alterna entre blanco y gris y, como en el ejemplo anterior, incluye más espacio del que vemos a menudo entre las líneas de texto.
A lo largo del diseño, todos los márgenes tienen un estilo asimétrico con mucho espacio. ¿El balance fuera de balance? Es armonioso y visualmente interesante.
Ejemplo 4: Se buscan astronautas
La acción acelerada de Astronauts Wanted podría no ser lo primero que se le ocurra al pensar en el espacio en blanco. Pero el logotipo, el texto y los elementos en la parte superior del video funcionan de esa manera. La información importante sobre el desplazamiento es fácil de leer y ver a pesar de la acción en segundo plano. Está centrado con mucho espacio a ambos lados y alrededor. (Y el logotipo hecho con espacio negativo ayuda a llamar la atención sobre el efecto general.)
El mismo concepto se utiliza debajo del desplazamiento con bloques de texto sobre imágenes fijas. El espacio está bellamente diseñado y el único elemento real de color blanco en el diseño es el texto en sí.
Ejemplo 5: Le Farfalle
Le Farfalle usa un recorte simple en la imagen del héroe, como uno de los ejemplos anteriores, pero el uso más impresionante del espacio aparece cuando se desplaza con grandes espacios alternos para obtener imágenes equilibradas con espacios en blanco de gran tamaño que contienen texto.
Este estilo facilita que los usuarios se muevan de imagen a texto y luego vuelvan a la página a través de todo el contenido. Lo que podría ser un diseño pesado se vuelve liviano y fácil de leer.
Además, el diseño utiliza amplios márgenes y acolchado para que cada elemento realmente tenga espacio para sostenerse por sí solo.Este uso del espacio crea una estética sofisticada que combina con el ambiente del restaurante.
Conclusión
Para llevar de hoy - el espacio en blanco no tiene que ser blanco. No te dejes caer en esa trampa. Tiene algunos ejemplos de formas de usar el espacio con color, imágenes y video como un lugar para impulsar su creatividad.
Ahora es tu turno de mostrar algunos ejemplos de espacios en blanco. Comparta algunos diseños que haya creado en la galería de Design Shack o comparta los sitios web que ama conmigo en Twitter. (¿Nunca se sabe? ¡Podrían terminar en una publicación futura!)