22/01/2014

Utilizando espacios en blanco en diseño web

Utilizando espacios en blanco en diseño web

El espacio en blanco o espacio negativo es aquel comprendido entre los elementos de una composición. Por ejemplo, hay un espacio en blanco entre esta línea de texto y la anterior, al igual que entre este párrafo y la imagen que acompaña el post. Puede haberlos entre distintos elementos de una lista, entre una imagen y su epígrafe, entre un formulario de contacto y el botón «enviar»: toda agrupación de elementos visuales separados entre sí genera espacios en blanco (aunque, cabe aclarar, no necesariamente de ese color).

Si varias veces se ha dicho que «la música es el espacio entre las notas», no es descabellado pensar que, en el diseño, el espacio en blanco es un importante elemento constructivo y no, simplemente, espacio vacío. Son muchos los sitios web que utilizan la separación entre elementos como un recurso que aporta claridad y limpieza. Uno de los mejores ejemplos es el del buscador Google, donde los elementos ocupan solo una pequeña porción de la pantalla, destacándose sobre el fondo.

Como ya hemos destacado, una buena separación entre caracteres y párrafos contribuye a la legibilidad de una página: la acumulación de símbolos solo confunde y entorpece la lectura. Reglas similares afectan a los elementos de mayor tamaño. Si queremos destacar un elemento de interfaz (como un botón, un enlace o un formulario), crear un gran espacio en blanco alrededor de él puede ser una solución más elegante que rellenarlo con un color estridente. Pero, además, la separación entre los elementos crea un flujo de lectura entre ellos: la mirada del usuario seguirá la trayectoria que hayamos definido a través de una jerarquización basada en los espacios vacíos.

El uso de espacio negativo también es importante en el diseño de logos, algo que podemos apreciar en muchos ejemplos. En la mayoría de estos casos, el logo incluye un gráfico fácilmente visible y otro que solo se advierte al recortar su silueta contra el fondo. Un recurso creativo que genera logos memorables con un alto poder de comunicación.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce