DestacadosDiseño Web

Diseño web: el buen uso de espacio en blanco

Por 28 diciembre, 2016 Sin comentarios

diseno-web-espacio-blanco

El diseño web se trata, entre otras cosas, de saber distribuir los elementos en el espacio de maniobra de la página web correctamente. Para lograr este cometido, y proporcionar una excelente experiencia de usuario que genere conversiones, es importante manejar correctamente el espacio negativo o espacio en blanco.

Los elementos deben respirar y tener suficiente espacio para la interacción con otros elementos. Aquí sabrás, mediante varios ejemplos, cómo utilizar correctamente estos espacios y emplearlo en tus proyectos de diseño web.

 

El espacio en blanco como estrategia en diseño web

Cuando los clientes solicitan colocar tanta información en una página web como sea posible, los diseñadores experimentados saben que esto puede llevar a una pesadilla en cuanto a funcionalidad.

Los ejemplos que colocaremos más adelante funcionan porque todo lo que el visitante necesita está allí en la página; todo lo que está parece estar ausente simplemente sería un desorden. En un lugar de ese desorden, el espacio en blanco ayuda a crear balance, y una interfaz fácil de navegar que te permita encontrar lo que necesitas sin ser abrumador.

 

01. Made by Sofa

diseno-web-espacio-blanco-1

Pudo haber sido tentador para esta compañía de diseño de interacciones usar unas magnífica y colorida imagen en su página web en un intento de llamar la atención. Irónicamente, para mantener las cosas simples, es un diseño fashion y minimalista que en realidad capta mejor la atención del ojo. El uso limitado del espacio en blanco expresa una sensación de confianza, mientras un fragmento sutil de espacio negativo en el ícono del sofá le da un toque extra de clase.

02.Apple

diseno-web-espacio-blanco-2

Si Apple se mantiene por algo, es por la importancia que le dan al diseño en su tecnología, y su propia página web lo demuestra con maestría. Cuando tienes productos con excelente imagen como estos, debes enfocar la atención en ellos, y el uso del espacio en blanco alrededor de ellos permite exactamente eso.

03. Built by Buffalo

diseno-web-espacio-blanco-3

El espacio en blanco no es sólo el uso de vistas ultra-mínimas, y aquí hay un gran ejemplo. La agencia Brighton coloca en la página de inicio de Buffalo sus elementos de navegación en hexágonos coloridos, agrupados juntos en un entramado y rodeados por una generosa cantidad de relajante espacio en blanco. Es un diseño web sorprendentemente original que contiene un caleidoscopio de color y enlaces y, al mismo tiempo, proporciona una sensación relajada y libre de estrés a la experiencia del desplazamiento.

04. Dropbox

diseno-web-espacio-blanco-4

Uno de los más grandes éxitos del mundo tecnológico es Dropbox, que combina ilustraciones que parecen hechas por niños con un uso confidente del espacio en blanco en su página principal para un gran efecto. La sensación general es relajada y accesible, haciendo lo que podría ser, para los no iniciados, una proposición muy compleja que parece una cosa divertida y útil para probar.

05. Fell Swoop

diseno-web-espacio-blanco-5

El espacio en blanco siempre ha sido una herramienta de buen uso en una revista de diseño, y este es un eco de esas sensibilidad en el diseño web de la página del Fell Shop de Seattle. Las fuentes ligeramentes más largas de lo usual y contenido en el espacio en blanco, prestan un poco de rara sofisticación para eso que de otro modo sería un sitio bastante estándar de la empresa.

06. UX Myths

diseno-web-espacio-blanco-6

Un sitio que te enseña sobre cómo proporcionar una buena experiencia de usuario necesita practicar eso que predica.  UX Myths, una página que recolecta los errores más frecuentes, ciertamente lo hace. Es clara la tendencia de enfoque en el texto del inicio de la página, que al mismo tiempo se remonta a los primeros días de Internet, y también evita la fealdad de la pantalla de esa época. En realidad hay un montón de información en esta página, pero el uso inteligente de los espacios en blanco da la sensación de que no es así en absoluto.

07. Something Splendid

diseno-web-espacio-blanco-7

Something Splendid es un estudio de diseño australiano que ya no existe, luego de fusionarse con otra agencia, Liquorice, en 2013. La naturaleza de Internet, sin embargo, permite que la gente todavía haga clic a través de antiguos enlaces en su URL anterior. Lo que sorprende a estos visitantes ahora es la adorable colección de su trabajo anterior. Los títulos hacen un uso brillante del espacio blanco al darle un sentido de distancia y transmite ser un tributo adorable en lugar de una página web de trabajo. Es mucho mejor que una página 404 o una inexplicable transferencia a la nueva compañía.

08. Chanel

diseno-web-espacio-blanco-8

La industria del fashion es sobre verse bien, y tener un gran entendimiento del potencial del espacio en blanco para crear una atmósfera y ratificada sofisticación. Chanel no ha estado en el negocio por 107 años y contando por accidente, y su elegante diseño web resalta como un ejemplo para cualquiera que desee el éxito en ecommerce.

09. Lionel Durimel

diseno-web-espacio-blanco-9

Como dijimos antes, no sólo el diseño web minimalista emplea el espacio en blanco. Pero si estás experimentando con el ultra-minimalismo, esto podría ser algo hecho a mano, de hecho. La página web del maravilloso portafolio del director de arte Lionel Durimel combina texto transparente, efectos de scrolling y la atención que llaman los colores, para realmente vender sus servicios, y el uso atrevido y aventurero de los espacios en blanco ayuda a colocar a todos juntos muy bien.

10. Google

diseno-web-espacio-blanco-10

Google permanece como el gran Rey del espacio en blanco en la web. Sólo un pequeño cuadro en tu página de inicio puede atraer mucho de un valor monetario inimaginable. Pero el gigante de las búsquedas ha permanecido sin cambios prácticamente desde 1990. Si alguien critica tu uso del espacio en blanco en diseño web como “espacio desperdiciado” , señálales esto y pregúntales si piensan si la empresa más exitosa del mundo sabe o no lo que está haciendo…

Artículo traducido y adaptado de CreativeBlog. En Staff Digital nos encanta encontrar y compartir información de alta calidad de diversas fuentes. Si encuentras un artículo interesante en inglés sobre Diseño Web, Marketing Digital o Redes Sociales, ponte en contacto con nosotros y uno de nuestros editores se encargará de traducirlo y publicarlo. Gracias por visitarnos!

Luiggi Santa María

Luiggi Santa María

CEO de Staff Digital. Experto en Diseño Web Gráfico y Publicitario.

Deja una respuesta