Descubre por qué el espacio es uno de los pilares de un buen diseño de UI, y obtén consejos para iniciar tu proceso de diseño con Justinmind.
El espacio está en todas partes: ¡está por todas partes en esta entrada del blog! Aunque a menudo se pasa por alto como componente de la disposición en el diseño de UI, no hace falta ser un científico espacial para comprender que el espacio tiene un impacto directo en la usabilidad del sitio y de la aplicación. Se puede observar desde las primeras etapas, como la fase de wireframe.
Empieza a wireframe productos hoy mismo. Proyectos ilimitados.

Utilizar el espacio de forma eficaz en el diseño de tu UI ayuda a aumentar la legibilidad, proporciona retroalimentación y atrae al lector hacia las partes más importantes de la pantalla. No creemos que nadie haya podido resumir mejor la importancia del espacio y la disposición en el diseño de UI que el conferenciante y autor de diseño web Brandon Jones:
Relacionado con el diseño y la composición de la IU, el espacio es un aspecto esencial del lenguaje visual de un diseño de IU, junto con el color, la tipografía y la iconografía. El espacio es lo que ayuda a los diseñadores a crear un respiro visual para el ojo, y hace que los usuarios quieran permanecer en la página. También puede ayudar a sugerir la función y crear énfasis en el contenido importante. Cuando hablamos de espacio en el diseño de UI, nos referimos a dos conceptos: proximidad y espacio negativo, o espacio en blanco.

La proximidad es un principio de la Teoría de la Gestalt en el diseño UI/UX. El principio de proximidad se basa en la idea de que los objetos que aparecen cerca unos de otros en una pantalla están relacionados entre sí (especialmente en comparación con los que están situados más lejos unos de otros).

La proximidad es una poderosa herramienta para los diseñadores. La familiaridad en pantalla ayuda a los usuarios a crear conexiones significativas con las marcas. Puedes encontrar más bibliotecas en nuestra página de kits de UI.
El espacio en blanco es el espacio entre los elementos de UI en una pantalla. Un buen uso del espacio en blanco ayuda a despejar tu sitio web o aplicación, para que los usuarios puedan centrarse en los elementos importantes y leer el contenido más fácilmente.
La forma de incorporar el espacio al diseño de tu UI difiere de una pantalla a otra. Por ejemplo, puedes utilizar mucho espacio en blanco en una página de inicio para resaltar un botón de llamada a la acción, pero menos en un sitio que enumera varios elementos, como una página de producto de comercio electrónico. Alternativamente, también puedes utilizar un enfoque calculado del espacio en blanco para asegurarte de que el diseño de tu formulario sea intuitivo y fácil de entender. Aquí tienes algunos buenos artículos si quieres perfeccionar tus habilidades en el diseño de formularios:

En la herramienta de Justinmind, hemos añadido una nueva función de margen en la paleta Propiedades. Antes, podías cambiar el tamaño y la posición de cualquier elemento de UI en el lienzo. Ahora, tienes aún más control sobre el diseño de la UI de tu pantalla y la posición de tus widgets de UI. Añade un margen con cualquier número de píxeles para crear espacio y respiro entre los widgets de UI. El margen que desees se mantendrá sea cual sea el tamaño del dispositivo o la dimensión, para que tu arquitectura de la información sea siempre perfecta en píxeles.
Añadir márgenes para mantener la disposición y composición reales de tu diseño en la fase de prototipado es una buena práctica de diseño. Al fin y al cabo, no hay nada peor que trabajar como un esclavo en tus diseños y luego tener que comunicar a desarrollo cuánto espacio pretendías dejar entre los iconos y las secciones de la pantalla, de acuerdo con los principios de diseño de UI.

Cuando quieras manipular el espacio en el lienzo, nuestra función de envoltura también resulta útil. Puedes envolver elementos de UI horizontal o verticalmente dentro de un contenedor.


Concentrarte en la jerarquía visual de tu UI es una forma estupenda de pensar en el espacio de tu diseño. Por suerte, hay algunas técnicas que te ayudarán a organizar el contenido y reforzar la jerarquía visual de tu UI. Por ejemplo, piensa en distintas formas de diseñar la disposición de tu UI. El tipo de diseño que utilices dependerá de si diseñas para web o para móvil, de si tu UI tiene mucho contenido y de quiénes sean tus usuarios objetivo. Al trazar las características visuales de tu sitio, incluido el espacio, puedes comunicar el orden y la importancia del contenido en tu interfaz, y ayudar a que sea más fácil de leer. Por cierto, no dudes en consultar nuestro post sobre los mejores tipos de letra para aplicaciones móviles e incorpóralos a tu diseño desde el principio para obtener los mejores resultados.






























