Introducción al sistema de cuadrícula de 8 puntos

Como diseñador, probablemente hayas escuchado el término cuadrícula, ya sea que estés diseñando un sitio web, una revista o una aplicación móvil. Disponemos de grillas para todo tipo de disposiciones de contenidos. Usamos cuadrículas de columnas para alinear el contenido horizontalmente. Cuadrículas de referencia para alinear verticalmente cuerpos de texto. Cuadrículas suaves y duras para describir cuán estrictamente nos adherimos a ellas. Me interesé en el sistema de cuadrícula de 8 puntos después de escuchar a Bryn Jackson hablar con avidez sobre él. Decidí averiguar qué beneficios, si los hubiera, podría aportar un sistema de 8 puntos a mis diseños.

¿Cuál es el problema? He llegado hasta aquí sin utilizar el sistema de 8 puntos.

He utilizado sistemas de diseño como Bootstrap o Foundation para impulsar proyectos web, incluso intenté construir algunos sistemas similares yo mismo. No fue hasta hace poco que me di cuenta de que componentes como los botones se pueden distribuir bellamente individualmente pero degradan el diseño general cuando se colocan en una sopa más grande de elementos y contenido. Esto se debe a que es difícil crear de manera consistente lograr una composición estéticamente agradable para toda la página. Puedo usar mi ojo de diseño para mover algunos elementos aquí o allá, pero no puedo confiar en que un equipo de diseñadores y desarrolladores compartan mi misma visión. Sin un sistema para definir las relaciones de espaciado de mis elementos, es difícil crear coherencia.

En esta comparación, puede ver un sistema de cuadrícula de 8 puntos que alinea verticalmente los elementos de un formulario versus un sistema de diseño popular que utiliza números arbitrarios para espaciar y dimensionar los elementos.

¿Por qué mi interfaz debe ser coherente?

No es así. Sin embargo, si desea tener una apariencia profesional y confiable, debería hacerlo. Si alguna vez ha comprado en línea, habrá experimentado dudas al hacer clic en comprar y el formulario de ingreso de la tarjeta de crédito se verá diferente al resto del sitio. Un poco de coherencia ayuda mucho.

¿Por qué no es suficiente adoptar Bootstrap o un sistema similar?

Bootstrap es una biblioteca de componentes que permite a los diseñadores/desarrolladores centrarse en el contenido y la experiencia del usuario. Ha elevado la calidad de innumerables sitios web en la web. Pero no tener una unidad de medida consistente puede generar inconsistencias en el diseño entre páginas, particularmente en proyectos con dos o más diseñadores.

Al crear la estética de nuestra propia marca en Pivotal, a menudo necesitamos crear componentes y diseños únicos. Mientras trabajábamos recientemente para unir nuestro sistema de interfaz de usuario, nos encontramos con el hecho de que la marca en la esquina superior de todos nuestros productos es ligeramente diferente. Creado por equipos separados en todo el mundo, el concepto general es el mismo pero la ejecución es ligeramente diferente. ¿Cuál está mal?

La verdad es que ninguno de ellos. Tienen diferentes alturas y acolchados, pero sin un sistema que explique claramente el pensamiento detrás de una regla de estilo, ¿por qué debería seguirla?

Bueno, ¿cuál es tu solución, sabio?

El sistema de cuadrícula de 8 puntos. Utilice incrementos de 8 para dimensionar y espaciar los elementos de una página. Para mí, esto significa que cualquier alto o ancho, margen o relleno definido será un incremento de 8.

¿Por qué 8 puntos?

La variedad de tamaños de pantalla y densidades de píxeles ha seguido aumentando, lo que complica más el trabajo de generación de activos para los diseñadores. Utilizar un número par como 8 para dimensionar y espaciar elementos hace que el escalado para una amplia variedad de dispositivos sea fácil y consistente.

Por ejemplo, los dispositivos que tienen una resolución de 1,5x tendrán dificultades para representar limpiamente un número impar. Escalar 5px por 1,5x dará como resultado un desplazamiento de medio píxel.

Ok, entiendo lo de los números pares, pero en serio, ¿por qué no 6 o 10?

La mayoría de los tamaños de pantalla populares son divisibles por 8, lo que facilita su ajuste. Escalar en incrementos de 8 ofrece una buena cantidad de opciones sin sobrecargarlo con variables como un sistema de 6 puntos, o limitarlo como un sistema de 10 puntos. En última instancia, debes decidir qué tamaño es el adecuado para tu audiencia. El “sistema” sólo es bueno si es fácil de seguir y repetir.

¿Cuál es el valor del sistema de 8 puntos?

Para diseñadores: eficiencia, menos decisiones que tomar mientras se mantiene un ritmo de calidad entre sus elementos.

Para equipos: un sistema sencillo de comunicación entre diseñadores y desarrolladores (sin preocuparse por los píxeles). Un desarrollador puede observar fácilmente un incremento de 8 puntos en lugar de tener que medir cada vez.

Para los usuarios : Estética coherente con la marca en la que confían. Sin desplazamientos borrosos de medio píxel en su dispositivo preferido.

¿Por dónde empiezo?

Aquí hay algunos artículos sobre la implementación de una cuadrícula de 8 puntos para diseñadores y desarrolladores.

La publicación 8-Point Grid de Bryn Jackson es la guía más completa, desde las definiciones hasta la implementación.

La publicación de Anthony Collurafici sobre su flujo de trabajo Sketch es una excelente guía para comenzar. También es el creador de www.nudg.it , que acelera enormemente mi flujo de trabajo.

Google Material Design: el artículo sobre métricas y líneas clave es otro gran recurso para ejemplos y explicaciones.

El sistema Harmony Design de Intuit tiene una excelente explicación sobre las cuadrículas de línea de base responsivas y por qué cuentan los píxeles.

Articulo original: https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632