Retícula 8pt: ¿Qué es y por qué utilizarla?

Brenda Gonzalez Ortega

@brenda-ort
twitter icontwitter icontwitter icontwitter icon

Si has escuchado sobre la retícula 8pt y no tienes ni idea a que se refiere, sigue leyendo este post y descubre por qué es tan popular entre los diseñadores.

La retícula (grid) o el layout son muy importantes cuando hablamos de diseño de interfaces, una retícula bien definida aporta consistencia, estructura, jerarquía y solidez a nuestro diseño.

Definimos la retícula como una serie de líneas verticales y horizontales que dividen un espacio en secciones, y estas secciones se utilizan para organizar y distribuir contenido. Como diseñadora, me ha pasado incontables veces (y seguramente a ti también) notar inconsistencias en el diseño por la falta de definición de retícula 😩, cada pantalla utilizando una márgenes, columnas, o tamaños distintos generando inconsistencias.

¿Por que la retícula 8pt? Cuando empezaron a surgir una gran gama de dispositivos móviles Android y IOS, empezamos a ver pantallas de una inmensa variedad de tamaños, por lo que diseñar para todos los tamaños era algo imposible y diseñar para tamaños específicos generaba problemas de usabilidad en otros. Así que, a raíz de este problema, se empezó a buscar la forma de estandarizar el diseño de las aplicaciones.

Y justamente buscando está estandarización se definió la base 8pt, ¿Por qué 8?porque es un número par, fácil de multiplicar y dividir que nunca nos dará números decimales o medios píxeles (el píxel perfect esta a salvo). Pero eso no es todo, 8 hace que la escala de espaciados de suficiente aire entre los elementos mientras que 6 o 10 separarían poco o mucho nuestros elementos generando problemas de legibilidad o proximidad.

Ahora bien, los pt son una unidad de medida un tanto abstracta, que depende de la resolución de cada pantalla. Así que para ver la equivalencia con una unidad más conocida, pensemos en los píxeles, tenemos que en una pantalla de 1px (@1x), la equivalencia es 1pt = 1px, mientras que en una pantalla de retina y súper retina la equivalencia es 1:2 y 1:3 respectivamente. Lo cual significa que hay más pixeles por pulgada.

enter image description here

¡Pero hey! No te asustes 🤯. Sin considerar en la equivalencia o la unidad podemos seguir usando la base 8. No por nada la retícula 8pt es la sugerida por Android y Apple.

enter image description here

En conclusión, la retícula en sí misma nos permite mantener la consistencia de nuestro diseño, sobre todo cuando trabajamos en equipos colaborativos; pero el uso específico la retícula 8pt nos permite escalar óptimamente nuestro diseño y distribuir correctamente el contenido.

enter image description here

Pero recuerda, la retícula 8pt no es una regla de oro, es más una convención que nos permite iniciar rápidamente con nuestro diseño, así que siéntete libre de elegir y usar una retícula que se adecue a las necesidades de tu proyecto.

twitter logo bluetwitter logo bluetwitter logo bluetwitter logo blue

© 2022 Brenda González Ortega - All rights reserved.