Diseño UI

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

Diseño|2 min de lectura|
Comparte
Diseñar de forma más óptima y escalable es posible utilizando una cuadrícula para mantener el orden visual de los contenidos.
¿Qué es una cuadrícula de 8 puntos?

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.

Comparte

Artículos relacionados

Sabíamos optimizar WordPress como nadie. Por eso lo dejamos

14 años y 2.550 posts después.

Sabíamos optimizar WordPress como nadie. Por eso lo dejamos

Desarrollo|8 min lec|
Cerramos un ciclo: migramos www.ida.cl y blog.ida.cl, con más de 2.500 artículos publicados desde 2011, desde WordPress hacia un ecosistema moderno de Nuxt 4, Tailwind, Directus y PostgreSQL. Estas son las razones técnicas y arquitectónicas detrás de la decisión.
Arquitecturas de información en tiempos de Inteligencia Artificial

Diseño de Experiencia

Arquitecturas de información en tiempos de Inteligencia Artificial

Arquitectura De Informacion|8 min lec|
Cuando hablamos de diseño digital, solemos pensar en interfaces, flujos, usabilidad o experiencia de usuario. Sin embargo, mucho antes de que una persona interactúe con una pantalla, ya ha sido orientada —y en muchos casos condicionada— por una capa menos visible, pero profundamente estructurante: la arquitectura semántica. Lenguaje, categorías, etiquetas, naming y taxonomías no son […]
IDA

© 2026 IDA. Todos los derechos reservados.

ida.cl

Usamos cookies de analítica

Si aceptas, cargaremos Google Analytics y Meta Pixel para medir visitas y conversiones. Puedes rechazarlo y seguir usando el sitio.