Diseño UI

¿Qué es una cuadrícula de 8 puntos?

Diseño 2 min. de lectura

Diseñar de forma más óptima y escalable es posible utilizando una cuadrícula para mantener el orden visual de los contenidos.

Nueve cuadrículas de diseño, las cuales nos muestran las guías visuales que nos permitirán estructurar nuestros contenidos.

Dentro del diseño de interfaz siempre debemos definir diversos aspectos que darán vida a nuestro sitio web. Sin embargo, para facilitar todos estos procesos, también podemos contar con ciertos comodines. En este sentido, una cuadrícula de 8 puntos -también conocida como 8pt Grid- será de gran ayuda para mantener un orden visual de nuestros contenidos.

Tener una jerarquía establecida desde los inicios de cualquier proyecto, facilitará las decisión posteriores. Por esto, cualquier cuadrícula será la encargada de proporcionar una estructura base para nuestro diseño y que no existan inconsistencias entre nuestras ventanas. 

¿Cómo se compone?

Para entender que es una cuadrícula de 8 puntos, debemos definir precisamente este último: el punto. Un punto o pt es una unidad de medida que depende de la resolución de cualquier pantalla. De este modo, se podría decir que la relación entre punto y pixel sería de 1:1 o también dicho como 1pt=1px. 

Sin embargo, en la actualidad contamos con una gran variedad de pantallas, por lo que, estas medidas pueden variar según su calidad. Por ejemplo, desde una pantalla de retina, existe una relación de 1:2 ; mientras que, una de super retina, tiene una relación de 1:3.

Teniendo lo anterior claro, usar un número par como el “8” para ordenar los diversos elementos en nuestra web, volverá todo más sencillo. Aunque, esta relación solo será la base, ya que usaremos sus diversos múltiplos como: 16, 24, 32, 40, etc. 

¿Por qué usarla?

Mantener un orden establecido desde un comienzo facilitará la creación de cualquier plataforma, tanto desde la web como en dispositivos móviles. Nuestros diseños lucirán mejor, ya que, tendrán una jerarquía establecida y escalable, según las necesidades que presentemos. 

Además, podemos aplicar esta regla tanto en Sketch como en Figma, por lo que, tu diseño no se verá afectado según el software que estés utilizando. De esta manera, nuestros productos digitales serán más atractivos y legibles. Realmente es una alternativa que te recomendamos probar.

Acerca del Autor

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Agregar un comentario