Cuando se diseña la interfaz de usuario en una aplicación, es importante mantener la consistencia a través de las pantallas. Esto se logra por medio del uso de retículas. La retícula o "grid", se define como un esqueleto o estructura de líneas verticales y horizontales que dividen un espacio en módulos. Estos módulos se utilizan para organizar el contenido.
La retícula como tal tiene su origen en el diseño editorial y ha sido utilizada para desplegar información de manera armónica y jerárquica por siglos. Algunos de los beneficios del uso de retículas en el desarrollo de productos digitales son:
Consistencia. El uso de retícula permite definir elementos estándares que serán reutilizados a lo largo de la aplicación.
Algunos de estos ejemplos son márgenes entre elementos o altura y espacio entre botones. El definir e implementar estas reglas ayudan a mantener una consistencia y armonía entre los elementos visuales.
Otro beneficio es la claridad y la coherencia. Esto se logra por medio del uso de simetría, proximidad y continuidad, además de jerarquía y ritmo, lo cual resulta en la presentación de contenido de una manera visualmente coherente. Es importante notar que el uso de retícula agiliza el trabajo de diseño.
El definir módulos de tamaño predeterminado conociendo cómo y dónde encaja cada uno de los elementos en una retícula tiene como resultado un proceso de diseño más veloz y eficiente. Otro beneficio es que facilita el desarrollo del producto.
El equipo de desarrollo es capaz de sistematizar componentes reutilizables, agilizar la implementación del producto digital cuando se define una retícula que les ayuda a conocer dónde va cada elemento, qué tamaño tiene y cuántos módulos ocupa dentro del espacio establecido.
El sistema de retícula en base a ocho puntos toma la cifra de ocho y, utilizando múltiplos y divisibles del mismo, define el espacio y tamaño de los elementos que componen la retícula de acuerdo a ese número. En este ejemplo podemos observar que es de 16 píxeles, que es un múltiplo de ocho. A continuación, la combinación del margen y una de las columnas es de 64 píxeles, otro múltiplo de ocho. Y así sucesivamente.
A continuación observemos tres ejemplos de retícula en diferentes resoluciones de pantalla. En primer lugar contamos con una retícula para un móvil en posición vertical.
En este caso, dependiendo de la resolución y el tamaño de pantalla, podemos contar con de cuatro a ocho columnas, con un margen de 16 píxeles. En cambio, cuando observamos la misma retícula en la pantalla de una tableta con mayor resolución, podemos contar con una retícula que tiene de ocho a 12 columnas con un margen de 24 píxeles.
El aumento en el margen ayuda a mantener la proporción visual en la pantalla. En la siguiente resolución, una computadora portátil, podría ser de 12 columnas o más, 16, 18 o 24 de acuerdo a la resolución de la pantalla. en este caso se continúa con el margen de 24 píxeles.
El uso o implementación correcto de retícula durante nuestra etapa en diseño de interfaz es importante para mantener consistencia, claridad y coherencia a través del producto reflejado en sus pantallas.