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:
- la jerarquía visual de los componentes
- 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:
- Relleno (padding)
- Margen (margin)
- Altura de líneas (line height)
- 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:
- Usen una retícula
- Usen márgenes y rellenos consistentes
- No le tengan miedo al espacio negativo