Grid
Proporción de la estructura para la disposición de los elementos
8 px Grid System
Una de las claves para diseñar de manera óptima y exacta es utilizar un número par en las dimensiones, tamaños y espaciados de nuestros diseños y de esta manera mantener la consistencia y la equivalencia entre los diferentes tamaños de forma fácil.
Utilizar un número par en todas nuestras medidas es algo muy práctico, ya que es fácil de multiplicar y dividir sin llegar a tener nunca un número con decimales, que generarían “medios-píxeles” o medidas fraccionadas que a la larga nos llevan a la inconsistencia y una mala práctica en el diseño de las interfaces gráficas.
¿Por qué un grid system de 8 píxeles?
Hay dos motivos principales por el cual se recomienda utilizar como base el número 8 y no el 6 o el 10, que al ser pares también podrían ser válidos.
1. El sistema de 8 px en sitios web a lo largo de los años ha demostrado ser la medida ideal para obtener suficiente variedad de espaciados (8, 16, 24, 32, 40…). Con el 10 todo se vería muy monótono y con el 6 se obtiene demasiadas variaciones y tamaños que quizás no se utilizarían nunca.
2. Apple y Android recomiendan utilizar el grid de 8 px para el diseño y desarrollo de interfaces en sus dispositivos.
En otros ámbitos o publicaciones también puedes hallar este sistema como 8 pt Grid System. Es importante recalcar que en el mundo de los Design Systems y UX/UI un pixel se refiere a una unidad, por lo tanto, 1 pt = 1 px cuando nos referimos a este sistema de diseño.
¿Cómo se utiliza?
Para garantizar una correcta posición, dimensión y espaciado de los elementos que conforman este Design System utilizaremos una retícula de 8 px como referencia en nuestros espacios de trabajo, ya sea en Desktop, Tablet o Mobile que se activa mediante un Grid en Figma configurado a 8 px.
Esta retícula encaja perfectamente con las columnas y el ancho del frame especificadas en la sección Layouts con el objetivo de tener diseños consistentes entre todos los colaboradores que participan en el diseño y desarrollo del e-commerce de Elektra.
Configuración en Figma:
Figma Grid Style:
Esta retícula la puedes activar individualmente desde la librería de estilos de Harmonía en Figma, así como en conjunto con los layouts que incluyen las columnas configuradas en cada uno de los breakpoints definidos.
Una manera práctica de aprovechar mejor el layout grid y manejar las posiciones en píxeles perfectos es activar la vista outline de nuestros elementos, ya sean vectores o cajas de texto, mediante el siguiente shortcut:
Nudge Amount en 8 px
El Nudge Amount es una propiedad muy práctica en Figma que nos permite definir que tantos píxeles se van a mover nuestros elementos al desplazarlos por nuestro espacio de trabajo.
Es indispensable que este lo configures en un rango de 8 px para aprovechar de manera eficiente el 8 px grid system y cada movimiento que hagamos con nuestros elementos siempre estén ubicados en espacios que nos den algún múltiplo del 8.
La ruta para acceder a esta propiedad en Figma es la siguiente:
Menu > Preferences > Nudge Amount
Una vez configurado el Nudge Amount cada vez que desplacemos los elementos utilizando el cursor lo harán de 8 en 8 px, en cambio, si utilizamos las flechas del teclado, los elementos se moverán únicamente un pixel en cada toque.
Unidades válidas
Al diseñar bajo este sistema es normal que en un inicio no estemos familiarizados con las unidades que corresponden a los múltiplos del 8 por lo que se recomienda tenerlas a la vista para mayor eficiencia y gradualmente ir aprendiendo cuáles son las medidas esenciales que nos permitirán ser más ágiles y precisos al diseñar bajo este sistema:
En caso de manejar medidas grandes, la forma más rápida de ajustarse al 8 px grid system
es dividir ese número entre 8 y cerciorarse que es un número cerrado.
En caso de tener décimas volver a multiplicar por el número par más próximo del resultado previo,
esto nos dará el número múltiplo de 8 y ajustamos.
También puedes consultar
Home
Layout
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
