Grid
Estas indicaciones explican el uso del grid en Repsol.
El grid o cuadrícula es una estructura de líneas verticales y horizontales que divide el espacio para organizar el contenido en base a un sistema de columnas.
El uso del grid nos permite estructurar y posicionar corrctamente todos los componentes del sistema.
Base del grid
La cuadrícula se construye en base a 8 px, por lo que las distancias, dimensiones y márgenes de los elementos siempre serán múltiplos de 8.
El uso de este sistema ayuda a los diseñadores a diseñar la interfaz de manera ágil y mantener la coherencia visual entre los diferentes elementos que componen la pantalla, debido a que la mayoría de los tamaños de pantalla son divisibiles por 8.
Columnas
El sistema de columnas establecido en Repsol es la guía principal para organizar elementos en la pantalla.
El número de columnas está determinado por el rango de breakpoints (diferentes tamaños de pantalla), esto permite que los diseños se adapten mejor a los diferentes dispositivos.
Por ejemplo, en dispositivos móviles de 480 px se utilizará un grid de 4 columnas.
En un breakpoint de 1024 px el grid es de 8 columnas
Gutter
El gutter entre columnas tiene un ancho fijo, pero podrá variar para adaptarse mejor a cada resolución de pantalla.
Se ha establecido un gutter estándar de 16 px que podrá aumentar, siempre en múltiplos de 8 px y hasta 40 px, si queremos crear más espacios en blanco entre columnas en dispositivos con mayor rango.
En este grid para dispositivos móviles se utiliza un gutter de 16 px.
En cambio, en un grid destinado a desktop de 1024 px, puede aumentar. En este caso refleja un espaciado de 24 px.
Márgenes
El margen es el espacio que existe entre los bordes de la pantalla y el contenido.
Se trata de un valor fijo que puede variar en función de los breakpoint utilizando el espaciado en base a múltiplos de 8 px.
Los márgenes se pueden personalizar para ajustar el diseño a las necesidades propias del producto. Lo más recomendable es no fijar un margen más grande de 64 px.
Breakpoints
Los puntos de interrupción o breakpoint que se han establecido para ajustarse al grid son:
Disposición de columnas en el layout
La disposición de las columnas para cada breakpoint, definida con los valores estandar que muestra la tabla sería la siguiente:
El layout para un dispositivo móvil ocupará siempre el ancho de 4 columnas. Según vaya aumentando el tamaño del dispositivo habrá más opción de personalización del layout siguiendo la siguiente estructura de columnas.
Por ejemplo, si el diseño va a incluir una sidebar lateral, el layout podría adaptarse de la siguiente manera:
Para dispositivos con un tamaño menor o igual a 768 px, la sidebar ocupará el ancho de pantalla para optimizar el espacio de los contenidos.
En dispositivos con un rango de pantalla mayor la estructura será 4+12 columnas.
¿Cómo construir tu Grid en Sketch?
Para configurar una cuadrícula regular en base a 8 px, hay que seleccionar las opciones View > Grid Settings
Dentro del panel de configuración intrucimos el valor 8 px dentro del campo Grid Block size y 0 en el campo Thick lines every.
De esta manera ya tendríamos configurada la cuadrícula base de 8 px.
Para configurar el Layout Grid de columnas y filas seleccionamos View > Layout settings
En función de los diferentes breakpoints, añadiremos los valores correspondientes marcados en la tabla para un layout estandar.
Ejemplo de layout en dispositivo de 1440 px:
Si queremos añadir filas, para realizar una composición vertical también tendremos que usar múltiplos de 8 en función del espaciado que queramos dejar entre los diferentes elementos.
