Las retículas y los layouts lo son TODO cuando hablamos de diseño en general, pero la retícula de 8pt más si hablamos de UI/UX Design en particular. Una retícula bien pensada, aporta consistencia, jerarquía y solidez al dibujo. Si hablamos de productos digitales, una buena retícula también hará el desarrollo del producto mucho más fácil y eficaz. La retícula de 8pt es una de las más conocidas y utilizadas en diseño de producto. Conocerla mejor y utilizarla solo aportará mejores soluciones al dibujo. Y justamente eso es lo que haremos hoy. De la mano de nuestra Slasher Ana Rita Maravilhas, UX/UI Designer, aprenderemos cómo y porqué usar la retícula de 8pt.
¡Ojo! Y antes de que algún hater se sienta ofendido. Esto no quiere decir que el color y la fuente tengan un papel secundario, sino que tener una retícula bien dibujada hará que nuestro diseño sea mejor y mucho más funcional.
Genial tener una retícula tan perfecta, pero ¿qué es un pt?
Un pt es un punto. Una unidad de medida de espacio que depende de la resolución de la pantalla. La explicación más sencilla es que en una resolución de 1px (@1px), 1pt = 1px.
Con la llegada del primer iPhone, la equivalencia era sencilla. Con el paso del tiempo y la mejora de la tecnología y de las pantallas, los dispositivos pasaron a tener retina (@2x) y súper retina (@3x). Esto significa que hay más píxeles por pulgada y, por lo tanto, hay mejor resolución. Hablamos de IOS como ejemplo, pero lo mismo sucedió con Android, aunque la nomenclatura sea diferente. Se definen en «dots per inch» (dpi) o sea en puntos por pulgada. Sus dispositivos se clasifican en ldpi, mdpi, hdpi, xhdpi, xxhdpi, siendo el último el de mayor resolución.
Con el avance tecnológico y la grandísima variedad de tamaños y densidad de píxeles en pantallas que van surgiendo, dibujar se volvió muy complicado. ¡Aquí es donde entra la retícula de 8pt! Si utilizamos la retícula de 8pt, aunque la variedad de pantallas sea grande, el diseño se será más consistente, jerarquizado y resultará mucho más fácil la equivalencia entre los distintos tamaños.
¿Pero por qué 8pt?
Hay varios motivos para el número ser 8. Al ser un número par, es fácil multiplicar y dividir sin que genere medios pixeles. Además, con este número podemos dibujar en pixel perfect sin obtener nunca números decimales que generen pixeles no enteros.
¿Y por qué 8 y no 6 o 10? Al parecer 8 es el número perfecto para obtener suficientes espacios variados sin que sea muy monótono o con demasiada granularidad. Esto es, el 10 sería demasiado monótono y con espacios demasiado grandes en algunos intervalos. Con el 6 ocurriría lo contrario. Es decir, sería demasiado pequeño y con intervalos que se iban a utilizar muy poco.
Para darle más fuerza a los motivos de porqué utilizar retícula de 8pt y no otra, te podemos decir que Apple y Android recomiendan dibujar con esta grid. Evidentemente, no es obligatorio utilizarla. Siempre debemos elegir el método de diseño según las necesidades específicas de cada al proyecto. Pero ante la duda esta retícula es un estándar. ¡Éxito garantizado!
La grid de 8pt y herramientas de diseño
¡Hay mas noticias buenas sobre cómo y porqué usar la retícula de 8pt! Cuando dibujas con la retícula no tienes que preocuparte por el factor de escala ni la multitud de resoluciones que existen. Además, programas de dibujo como Figma y Sketch utilizan frames y artboards con pt que están preparados para exportar y escalar los assets. También tienen plugins y material descargable preparado con esta retícula.
No hay que dibujar siempre con esta retícula, como ya hemos visto siempre depende del proyecto, y de la buena comunicación del equipo entre diseño y desarrollo para tomar buenas decisiones sobre el diseño.
Y si diseñamos con esta retícula, ¿Elijo la ‘soft grid’ ? o ‘hard grid’ ?
Como en todo diseño, hay varias maneras de dibujar con un mismo método. Esta retícula suele ser utilizada de dos maneras, conocidas como ‘soft grid’ y ‘hard grid’. Ambas maneras son correctas, y ambas funcionan. Simplemente una es más flexible y te dará más libertad que la otra. In my opinión, ‘soft grid’ always wins!
Veamos la diferencia entre las dos. En la ‘hard grid’ hay un ‘container’ bien marcado con espacios múltiples de 8 en que estamos limitados a dibujar dentro de esos márgenes y con distancias siempre iguales. Así, dependiendo del contenido que tenemos en nuestro producto esto será limitante o no. En la ‘soft grid’ tenemos igualmente distancias de múltiples de 8 pts, pero no tenemos márgenes ni reglas muy marcadas. Simplemente los elementos se organizan entre sí y se distancian en múltiplos de 8 pts. La razón por la cual para mí «soft grid» always wins es justamente esa libertad que ganamos sin perder el control, jerarquía y armonía en el diseño.
‘’ Utilizar la ‘soft grid’ me parece a mi como diseñadora, tener libertad y creatividad sin perder la armonía, jerarquía y belleza de las medidas perfectas en un diseño. No olvidando claro, la practicidad que esta grid nos aporta en desarollo y en usabilidad.’’ Rita Maravilhas
Curiosamente si nos fijamos, muchas veces cuando buscamos iconos estos mismos ya vienen en formato de algún número múltiple de 8pt (24×24) (32×32). ¡Aquí tenemos un poco de TOC con la grid y nos parece perfecto pensar de 8 en 8pt!
Y tú, ¿utilizas alguna retícula? ¿Has probado la de 8pt? ¿Te animas ? Si te hemos convencido de cómo y porqué usar la retícula de 8pt, te dejamos un descargable de nuestra grid de 8pt, para que la puedas llevar contigo y te sea más fácil pensar de 8pt en 8pt cuando estés dibujando.
SÍ, QUIERO DESCARGAR MI RETÍCULA DE 8PT 
