Diseño de Grillas UI
Nuestra percepción tiende a organizar los elementos visuales con diversos criterios. Es por ello que debemos prestar suma atención a la forma en que alineamos, espaciamos, y distribuimos los objetos dentro del plano.
Maquetación o diagramación son términos que se suelen utilizar en el Diseño Editorial para referirnos al modo de organización de un espacio. En inglés, veremos este término utilizado en UI como “Layout”.
La maquetación o layout en el caso de una interfaz como explica Jenifer Tidwell, contiene elementos informativos, funcionales, que se utilizan como contenedores o marcos, y decorativos. La forma en que se distribuyen estos elementos determina la importancia de la información y las funciones de la UI y es clave en ayudar al usuario a entender que necesitan saber y qué hacer con ello.
Para organizar esta información, en diseño se utiliza una grilla.
— ¿Qué es una grilla? —
Una grilla es un conjunto de líneas invisibles horizontales y verticales que dividen una pantalla en columnas y filas. Son uno de los principios fundamentales en el diseño de interfaz.
Como explica Müller Brockmann, con la grilla o retícula, una superficie se subdivide en campos reducidos, a modo de reja. Estos campos están determinados por el ancho de las columnas y el alto de las filas.
¿Por qué es conveniente utilizar grillas?
- Dan estructura y claridad al diseño: ayudan a organizar y alinear todos los elementos.
- Facilitan la comprensión y uso de un producto digital: como vimos, la cercanía elementos visuales genera que se perciban como parte de un conjunto, mientras que su lejanía los separa. Utilizar grilla, ayuda a establecer jerarquías claras.
- Ayudan a que el diseño se vea correctamente en distintos dispositivos al hacerla adaptable (responsive).
Vamos a basarnos en el libro de UI Design Principles de Michael Filipiuk. En este libro plantea que la grilla está constituida por 5 elementos: Columnas, Rows (filas), Gutters (calles), Márgenes y Módulos.
Para comenzar, detallaremos algunos elementos de las grillas a tener en cuenta.
📌Columnas
Las columnas son las secciones verticales de la grilla. Cuanto más columnas existan, más flexible será. La mayoría de los diseños de interfaz orientados a web, suelen utilizar 12 columnas.
📌Filas (Rows)
Las filas son las secciones horizontales de una grilla. Si bien en el diseño tradicional se utilizan junto con el interlineado para definir los campos o espacios, en el diseño UI no suelen utilizarse. En general, los diseños se rigen por las columnas.
📌Calles (Gutters)
Las calles son el espacio libre que queda entre las columnas. A menor tamaño de calles, menor cantidad de espacios en blanco en el diseño, es decir, más juntos los elementos.
📌Márgenes
Los márgenes son el espacio por fuera de las columnas, Se pueden pensar como calles que están fuera de la grilla. Dan el espacio en blanco en los límites del diseño. También se utilizan para separar el contenido dentro de componentes.
📌Módulos
Los módulos son las divisiones resultantes de la intersección de filas y columnas.
— Grillas fluidas y grillas estáticas —
Al diseñar para pantallas, tenemos que considerar que existen una múltiple cantidad de tamaños y resoluciones, por lo que nuestro diseño debería poder adaptarse de una forma adecuada a diversos formatos. No existe un tipo universal de grilla en el diseño de interfaz, por lo que es necesario comprender las que se usan más habitualmente.
👉Grilla fluida
En una grilla fluida, el ancho de las columnas varía según el ancho de la pantalla, mientras que los márgenes y las calles permanecen estáticas. Este tipo de grilla es una de las más habituales para diseñar interfaces adaptables a distintos dispositivos (responsive), ya que su contenido cambia según el tamaño de la pantalla y se pueden ajustar fácilmente.
👉Grilla estática (fixed)
Este tipo de grilla tiene valores estáticos de columnas y calles, con márgenes que varían según el ancho de la pantalla.
Este tipo de grilla sirve para contenido que debe permanecer exactamente igual entre distintas pantallas. Suele utilizarse para algunos sitios y para portales de noticias, ya que achicar el contenido haría que pierdan legibilidad.
👉Grillas mixtas
En algunos casos, veremos que ninguno de los dos tipos de grilla se adapta del todo bien a nuestro diseño. Para ello, debemos entender que no todos los elementos de la UI deben ser fluidos.
Por ejemplo, si diseñamos una aplicación para web con un panel lateral y utilizamos una grilla fluida, al ampliar o reducir la ventana también se reducirá o ampliará el panel, cuando lo ideal sería que tengamos más espacio para el contenido y no márgenes extra dentro de ese lateral. Esto sucede porque en las grillas fluidas se establecen porcentajes para definir el tamaño de las columnas y escalarlas correctamente.
La solución, sería determinar que el menú lateral fuese estático mientras que la parte del contenido, sea fluida.
— Construcción de una grilla —
Cuando pensamos la construcción de una grilla siempre debemos comenzar por establecer un valor de base: es el número más pequeño que utilizaremos para establecer todos los demás valores y definirá no solo el tamaño de los objetos sino también los espaciados. Todos los valores de la grilla deben ser divisibles por este número. En general se utilizan grillas de 8 puntos o grillas de 10 puntos.
Antes de comenzar debemos explicar algunas particularidades sobre las pantallas y sus unidades de medida.
👉Pantallas y resolución
El diseño de interfaz se basa totalmente en pantallas. El estándar de las pantallas se estableció en 72 pixeles por pulgada.
Lamentablemente es imposible prever todas las resoluciones posibles que presentan los dispositivos hoy en día, por lo que primero que debemos plantear al realizar un diseño es al menos en qué tipo de pantalla se verá y por ende, cuál es la distancia que el usuario tendrá del dispositivo. Una pantalla tradicional se distingue de una TV o de un dispositivo móvil como un celular: las televisiones tendrán que ser vistas a distancia en las habitaciones, una pc o notebook tendrá una distancia media y un celular, una distancia corta. De esta forma, podremos priorizar qué características deben tener los elementos de la UI en cada caso y llegar a una buena experiencia final.
👉Grillas de 10 puntos
Es una de las más usadas porque resulta sencillo dividir y multiplicar por 10. En diseños con grillas fluidas, se suelen utilizar 20p para las calles, y se dobla ese valor a 40p para los márgenes.
👉Grillas de 8 puntos
Funciona de la misma forma que la de 10p, se utiliza 8 como valor de base y luego se multiplica por dos o se suma 8 a los valores para mayor fluidez.
Actualmente, es la más popular ya que da una mayor flexibilidad con los espaciados, por lo que se pueden encajar en grilla elementos más pequeños y complejos. Además, muchas resoluciones populares son divisibles por 8, lo que es de suma ayuda para diseñar interfaces para dispositivos móviles.
Para crear esta grilla, se comienza multiplicando el número de base por dos. En general, las calles son de 16 y los márgenes externos de 32 o 24.
En general, se prefiere la de 8p a la de 10p porque al generar espaciados dentro de elementos como botones y campos, podemos tener más libertad en escalas de 8 que en 10, donde los espaciados pueden resultar demasiado amplios.
👉Grillas blandas (Soft grids)
Una grilla blanda se utiliza alineando y espaciando los objetos utilizando el número de base y sus múltiplos. En general, es más sencillo implementar este tipo de grilla en diseño y en código, y suelen ser las más utilizadas.
Se suele utilizar un módulo de 8p (o 4p en algunos casos para diseños destinados a dispositivos móviles) y sus múltiplos (16, 24, 32, 48, 64) para generar los espaciados de los objetos.
Los valores más pequeños se utilizan para los componentes, donde los espacios y márgenes son más detallados y pequeños, y los valores más altos, para la diagramación en general. Para auxiliar esta tarea, podemos crear una escala de cuadrados de estos tamaños y luego verificar los espaciados dentro del diseño para ajustarlos.
Este método no sólo es útil para diseñar sino también para indicar a los programadores el sistema de espaciado en los prototipos. De esta forma, podremos generar una mejor consistencia a través de todas las pantallas de nuestras aplicaciones.
— Jerarquía Visual —
Cuando hablamos de jerarquía visual, como su nombre lo infiere, nos referimos a la importancia que tienen algunos elementos con respecto a otros en una composición. Apenas observamos algo, automáticamente buscamos la información importante y establecemos relaciones entre las partes. Ordenar es una tarea central del diseñador y el generar una correcta jerarquización no solo ayudará a la persona usuaria a comprender la información fácilmente sino que también estaremos facilitando su interacción.
Un buen diseño de interfaz debe tener en cuenta qué información debe comprender la persona usuaria de forma inmediata, qué elementos son secundarios y cuáles son necesarios en últimas instancias. Esta clasificación es la que establece la jerarquía visual.
Para determinar el orden de importancia podemos trabajar con distintos criterios como posición, color, tamaño, espaciados y forma. Por ejemplo, un elemento muy importante, se puede distinguir por tener un tamaño mayor y un color llamativo y saturado, mientras que un contenedor, o un fondo, debe tener un color neutro y ayudar a la cohesión de los elementos sin resaltar demasiado.
Establecer jerarquías claras es una de las tareas más necesarias y difíciles ya que tendremos que trabajar con muchas variables en simultáneo para poder optimizar la cantidad de información en pantalla, mantener una consistencia y al mismo tiempo pensar en las particularidades de la vista que estamos diseñando.
Para saber cómo jerarquizar nuestro contenido, primero deberemos entender qué es lo que queremos comunicar y cuales son las necesidades de nuestras personas usuarias. Un mal resultado generará confusión en el usuario y lo notaremos rápidamente.
Para pensarlo con un ejemplo claro, imaginemos la estructura de una página cualquiera. En ella tenemos títulos, subtítulos, listas y párrafos de texto. Al leer, cada uno de estos elementos tiene un formato diferenciado que nos ayuda a estructurar la información visualmente.
En resumen una buena jerarquización visual no solo brindará una armonía estética, también mejoraremos la usabilidad y experiencia de usuario.
💡Cómo construir una jerarquía visual
A través del contraste entre diferentes elementos de la interfaz lograremos jerarquizar la información. Es importante también mantener la consistencia y equilibrio a lo largo de nuestro diseño para guiar la atención de la persona usuaria y no distraerse.
Veamos a continuación aquellos atributos que nos serán útiles para la creación de jerarquías visuales:
📌Tamaño
Siempre nos llamará la atención aquellos elementos que sean más grandes porque destacan sobre el resto. A través del tamaño podremos crear un recorrido claro para que nuestra persona usuaria, primero visualizará aquellos elementos más grandes y seguirá por los más pequeños.
📌Color
A través del tratamiento del color podremos captar la atención de la persona usuaria, destacar elementos interactivos y ofrecer información sobre el estado de la interfaz. Aquellos colores que sean más vivos y luminosos serán captados con mayor facilidad.
📌Alineación
Nuestro cerebro procesa la información a través del reconocimiento de patrones, nos resulta más sencillo comprender si los elementos están ordenados, pero aquel elemento que rompa este patrón de orden se destacará fácilmente.
📌Repetición
Aquellos elementos estructuralmente similares se perciben como un mismo nivel de jerarquía o también pueden percibirse como elementos relacionados. La repetición de forma consistente favorece enormemente la navegación y comprensión de la interfaz.
📌Proximidad
Cuando diseñamos y creamos un orden de lectura, lo recomendable es agrupar elementos según el orden de lectura que queremos conseguir ya que la persona usuaria suele ir de un elemento al siguiente más cercano.
📌Espacio vacío
También conocidos como espacios en blanco, son esenciales en nuestras composiciones, gracias a este podemos realzar y resaltar elementos. Los espacios vacíos son necesarios para lograr bajar la carga cognitiva y que nuestra interfaz respire.
💡Tip para verificar que las jerarquías sean correctas
Como explican los autores de About Face, en diseño y otras disciplinas visuales se utiliza una prueba muy sencilla para verificar qué vemos primero: el squint test, que traducido significa entrecerrar los ojos. En esta prueba, nos alejamos físicamente unos pasos del diseño, cerramos un ojo y entrecerramos el otro. Al forzar una visión borrosa y no distinguir claramente los elementos, podremos ver cuáles son los que resaltan primero o se ven agrupados y corregirlos en el caso de que sea necesario.
Bibliografía
Cooper, A. About Face: The Essentials of Interaction Design. New Jersey. Wiley. 2014
Tidwell, J. Designing Interfaces. California. O’Reilly. 2020
Samara, T. Diseñar con y sin retícula. Barcelona. Gustavo Gili. 2016
Lupton E., Phillips J. C. Diseño Gráfico: Nuevos fundamentos. Barcelona. Gustavo Gili. 2016
Filipiuk, M. UI Design Principles. (eBook) https://michaelfilipiuk.gumroad.com/l/uiguide
Busquets, C. Mejora tu diseño UI utilizando retículas. 2019. https://www.uifrommars.com/mejora-tu-diseno-ui-utilizando-reticulas/
Cimino, L. Cómo usar las grillas en el diseño de interfaces. 2021. https://blog.ida.cl/diseno/como-usar-las-grillas-en-el-diseno-de-interfaces/
Campos, M. La importancia de las grillas en diseño web y UX. 2019. https://medium.com/ux-ripley/la-importancia-de-las-grillas-en-dise%C3%B1o-web-y-ux-27abf06be8f
Luiggi, S. Todo diseño necesita tres niveles de jerarquía tipográfica. 2014. https://www.staffdigital.pe/blog/diseno-niveles-jerarquia-tipografica/
Gamma UX. La importancia de la jerarquía en el diseño de interfaces. 2021. https://www.gammaux.com/blog/la-importancia-de-la-jerarquia-en-el-diseno-de-interfaces/
