Principios Universales de Diseño: Espacio en blanco en interfaz de usuario (UI)
Continuamos avanzando con los principios universales de diseño, la semana pasada revisamos el Espacio en blanco, es por ello que esta semana lo extenderemos al uso del espacio en blanco en los elementos que componen la interfaz de usuario (UI).
Al diseñar elementos de interfaz de usuario, hay dos tipos de espacios en blanco que utilizarás, el relleno (padding) y el margen (margin). Ambos tipos de espaciado se utilizan en el desarrollo web o de aplicaciones para dar estilo a la interfaz de usuario, por lo que entender la diferencia entre ellos facilita la comunicación entre diseñadores y desarrolladores.
El relleno (padding), como su nombre indica, es el espacio que acomodas en el interior de un elemento que lo contiene. En otras palabras, el relleno empuja el elemento hacia adentro desde la parte superior, inferior, izquierda o derecha de un elemento.
El margen (margin) en cambio, es el espacio entre los elementos de la interfaz de usuario. A diferencia del relleno, el margen crea espacios en blanco en el exterior de un elemento. En otras palabras, el margen aleja otro elemento de la parte superior, inferior, izquierda o derecha.
Pautas de relleno y margen
Entender cómo usar eficazmente los espacios en blanco puede ser un desafío. Es por ello que las siguientes pautas de Google Material Design pueden ayudarte a crear consistencia en tu diseño, utilizando como unidad de medida utilizaremos los pt.
1. En dispositivos móviles, un elemento necesita al menos 16pt de relleno:
2. En tablets o dispositivos de escritorio, los elementos necesitan al menos 24pt de relleno:
3. Para alinear, deberás aplicar la misma cantidad de relleno en los lados izquierdo y derecho de los elementos para mantener todo el contenido alineado horizontalmente:
4. Evita combinar el margen y el relleno para crear espacios en blanco:
5. La mayoría de los elementos de interfaz de usuario deben tener un mínimo de 8pt de margen entre ellos:
6. No utilices demasiado margen entre dos elementos que están relacionados:
7. Aumenta el margen para comunicar una distinción entre dos elementos o grupos de elementos:
8. Utiliza el margen de una manera consistente para establecer el ritmo vertical y horizontal:
Conclusión
Los espacios en blanco son clave en el diseño de la interfaz de usuario (UI). Es un elemento fundamental que debes adaptar al tipo de dispositivo, ya sea móvil, tablet o escritorio, adaptando los pt de margen y relleno según sea necesario para crear consistencia en tu diseño.
Referencias:
· Principles of Design: White Space