Laboratorio temático I

Espacio

Espacio

Si bien el espacio no es la parte primordial de una interfaz, sí es lo que permite que todos sus componentes fluyan de manera orgánica y permite que el usuario le encuentre el sentido más fácilmente a la misma.

Un espaciado adecuado nos permite crear un sentido de orden, dirigir la atención de un usuario y reduce, en general, la carga cognitiva de quien usa la interfaz.

En general, usamos el espacio entre elementos para mejorar:

1. la jerarquía visual de los componentes
2. la legibilidad de los mismos

Jerarquía visual

El espacio nos ayuda a determinar que parte es importante entre varias más.

Podemos ajustar la distancia entre elementos para guiar hacia el contenido más importante (o, por el contrario, distraer del menos importante).

Legibilidad

El espaciado adecuado entre líneas y párrafos hace que el contenido sea más fácil de leer.

Tipos de espacios

En términos generales, hay cuatro tipos de espacio que debemos tener en mente cuando diseñamos una interfaz gráfica:

1. Relleno (padding)
2. Margen (margin)
3. Altura de líneas (line height)
4. Espacio negativo (whitespace)

Relleno

El relleno es el espacio dentro de un elemento; como el espacio entre el texto dentro de un botón y el borde del mismo

Margen

Los márgenes son los espacios fuera de un elemento y son los que garantizan que los componentes no estén amontonados

Altura de líneas

La altura de líneas controla el espacio entre las líneas en un texto o párrafo

Espacio negativo

El espacio negativo es todo el espacio alrededor de los componentes que no tiene nada dentro

¿Espacio adecuado?

Un problema natural de empezar a manejar el espacio en una interfaz es la incertidumbre de que valores son más convenientes/prácticos/sustentables y que tengan sentido para el usuario

¿Espacio adecuado?

Un problema natural de empezar a manejar el espacio en una interfaz es la incertidumbre de que valores son más convenientes/prácticos/sustentables y que tengan sentido para el usuario

Si bien existen herramientas que nos permiten generar escalas de espacios, de forma parecida a las de la tipografía, hay otras formas más prácticas de resolver el problema y con menos cálculos

Retícula de 8px*

Una solución simple es usar una retícula con una unidad base de 8px

• En otras palabras: 8px, 16px, 24px, 32px, 64px....
• O, en el otro sentido: 4px**, 2px, 1px...

El número obedece a que es fácil aumentar o disminuir, además de que una buena parte de los dispotivos en uso en el mundo tiene pantallas con medidas que pueden dividirse entre ocho

Retícula de 8px

En términos generales, hay dos enfoques que se usan al trabajar con esta retícula:

Retícula dura

Retícula suave

Retícula de 8px

Cuál de los enfoques sea el más adecuado depende del caso particular de uso:

• Android usa Material Design en el que todo está ajustado a una retícula de 4pt, de modo que usar una retícula dura está dado por defecto
• iOS no tiene elementos de interfaz gráfica definidos por una retícula, por lo que es más fácil usar una retícula suave
• HTML cuenta con retículas y subretículas en CSS, por lo que cualquiera de los dos enfoque es fácil de implementar*

Principio de proximidad

Los elementos físicos cercanos entre sí tienden a ser percibidos como un grupo, unidad o conjunto, independientemente de su forma o color

Principio de proximidad

Principio de proximidad

Principio de proximidad

Consejos generales

Para cerrar:

1. Usen una retícula
2. Usen márgenes y rellenos consistentes
3. No le tengan miedo al espacio negativo