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:
“Una buena jerarquía visual no tiene que ver con gráficos alocados ni con los últimos filtros de Photoshop, sino con organizar la información de forma que sea utilizable, accesible y lógica para el visitante cotidiano del sitio web.”
Brandon Jones - Antiguo Editor de Tuts+
En el post de hoy, veremos cómo el espacio puede contribuir a un gran diseño de UI. Te mostraremos cómo empezar y te contaremos algunos secretos del oficio. Es fácil diseñar bien el espacio: ¡sólo necesitas las herramientas adecuadas!
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).
A menudo, los diseñadores aplican la proximidad para distinguir grupos de elementos y crear subjerarquías para grupos de elementos de UI e iconos. En realidad es sencillo. Sólo consiste en colocar elementos relacionados cerca unos de otros. Por ejemplo, echa un vistazo al diseño de UI de nuestra impresionante biblioteca de UI de Justinmind. Los iconos de chat y mensajería se han colocado muy juntos porque están estrechamente relacionados entre sí:
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.
Recuerda que no se trata de la cantidad de elementos de UI en tu interfaz, sino de la calidad. A nadie le gusta leer un muro de texto. Echa un vistazo a estos ejemplos de diseño con espacio en blanco y verás a qué nos referimos.
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:
Para aplicar adecuadamente el espacio a un diseño de UI, necesitas las herramientas adecuadas. Al diseñar tu interfaz con una herramienta de diseño de UI como Justinmind, siempre tienes una visión de 360° de tu diseño: espacio, elementos de UI y enlaces. Veamos cómo puedes aplicar correctamente el espacio en Justinmind.
Empieza a wireframe productos hoy mismo. Proyectos ilimitados.
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 los diseñadores de UI crean interfaces, no se limitan a colocar elementos de UI por la pantalla, sino que también prestan atención al espacio que hay entre esos elementos y a su alrededor. Disponer cuidadosamente los elementos de UI alrededor del espacio en el lienzo ayuda a los diseñadores a dar un propósito a su diseño, crear énfasis y definir una ruta de navegación para su interfaz.
Justinmind tiene un conjunto de herramientas de alineación especialmente diseñadas para ayudarte a organizar tus widgets de UI en el espacio del lienzo. Puedes leer todo sobre el espacio de trabajo de Justinmind en nuestro centro de aprendizaje en línea: El Módulo de Interfaz de Usuario. Nuestras reglas, guías inteligentes, cuadrículas y geometría de ajuste facilitan la manipulación del espacio en el lienzo.
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.
Esto es similar a la forma en que se envuelve el texto en Creative Suite de Adobe.
Y no te olvides de la función Diseño de Justinmind, que te permite cambiar las propiedades de diseño de cada elemento de UI. Elige entre la disposición horizontal, vertical y libre, según cómo quieras que se alineen tus elementos en el lienzo. A continuación, añade espacio entre los elementos, de este modo:
Empieza a wireframe productos hoy mismo. Proyectos ilimitados.
La jerarquía visual es un concepto interesante en diseño. Es el orden en que un usuario procesa la información en una pantalla. Los diseñadores deben prestar atención a la jerarquía visual para garantizar que los usuarios puedan encontrar y comprender la información con facilidad. Cuando una pantalla carece de una jerarquía visual fuerte, corres el riesgo de perder la atención del usuario. Esta es una de las razones por las que tantos diseñadores recurren repetidamente a los Patrones de UI: se trata de una jerarquía y una estructura que se ha probado y demostrado que funciona.
Las siguientes son características visuales (según la Interaction Design Foundation) que los diseñadores deben tener en cuenta para que sus pantallas sean lo más legibles y utilizables posible.
- Proximidad – colocar elementos relacionados (por ejemplo, el texto de llamada a la acción con el botón de llamada a la acción) ayuda a darles significado y contexto
- Espacios en blanco: la cantidad adecuada de espacios en blanco puede ayudar a resaltar el contenido importante, lo que resulta especialmente destacado en los sitios web minimalistas.
- Tamaño: los elementos de UI más grandes llamarán la atención del usuario
- Color: los colores vivos captan antes la atención que los apagados.
- Contraste – a los usuarios les atraen las composiciones más brillantes
- Alineación – crea un diseño más nítido y visualmente más atractivo
- Repetición – la repetición crea coherencia y ayuda a unir los elementos
Todos estos factores tienden a reflejarse en los patrones más utilizados en el diseño y la disposición de la UI, como el diseño de la UI de tarjetas.
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.