import { Meta } from '@storybook/addon-docs'; import imageX from './assets/logo-ministerio.jpg'; import image1 from './assets/estructura/escalas_espaciado.png'; import image2 from './assets/estructura/reticula.png'; import image3 from './assets/estructura/puntos_ruptura.png'; import image4 from './assets/estructura/dispositivos.png'; import image5 from './assets/estructura/parrafo.png'; import image6 from './assets/estructura/margen_exterior.png'; import image7 from './assets/estructura/canalones.png'; import image8 from './assets/estructura/gutters.png'; # Espaciado El espaciado entre elementos nos ayudará a mantener un **ritmo vertical y horizontal** consistente a lo largo del sistema, estructurar de manera adecuada las distintas páginas, así como a tomar decisiones de diseño rápidas y consistentes. La base de espaciado del sistema de diseño de la Seguridad social es la **geometría 2x**, que provee de una regla fundamental para la definición de las estructuras. El sistema de duplicación es la base del diseño de los elementos visuales (desde las tipografías a las columnas, cajas, iconos…, pero también márgenes, paddings…). ### Escalas de espaciado Las escalas de espaciado se definen a dos niveles, **micro**, la manera en que se distribuyen y ajustan los pequeños espacios, típicamente elementos dentro de cada uno de los componentes, y **macro**, para espacios mayores, definiendo la posición de los distintos componentes entre sí y dentro de las páginas. La base de la geometría 2x es la **mini-unidad** cuadrada de 8 pixeles. Los múltiplos y divisores de esta mini-unidad compondrán las dimensiones de los distintos elementos. Estas mini-unidades se adaptan al contenido manteniendo un ritmo visual consistente.
Así pués, las mini-unidades dividirán la pantalla en una retícula, y sus múltiplos y divisores se estructurarán para definir anchuras y alturas de los distintos elementos y distancias entre los mismos. ### Columnas, filas y puntos de ruptura Las columnas y filas crean las líneas de referencia esenciales para el ritmo visual. El concepto básico de la retícula 2x es dividir o multiplicar por 2. Las retículas fluidas se generan por divisiones, mientras que las fijas, lo son por multiplicación. En los puntos de ruptura (o breakpoints) los tamaños coinciden. La construcción de las **columnas** se puede hacer mediante distribución del espacio en retículas (grids) **fluidas**, que lo dividen en columnas de dos en dos marcadas por puntos de ruptura (breakpoints), y que se escalan al tamaño de la pantalla, o con retículas **fijas** mediante la colocación consecutiva de cajas de tamaño fijo donde las columnas entre puntos de ruptura no se escalan a la pantalla, sino que mantienen su tamaño fijo. Ambos enfoques fluido y fijo se pueden combinar en una retícula híbrida. Las columnas fluidas estructuran de manera ideal contenido editorial, imágenes, paneles de mandos, visualización de datos… que se adapta al tamaño de la retícula. En estos casos, escalar los componentes es más útil que aumentar los elementos visibles. De distinta manera, las estructuras con columnas fijas son más adecuadas para contenido fijo que se mantiene invariante independientemente del ancho de la pantalla como las distintas regiones de una pantalla, paneles, menús laterales, pastillas (tiles)… En este caso cuando se supera el tamaño de la columna, el elemento sobrante pasa a la fila siguiente, sin ninguna variación en el tamaño de los elementos. En cualquier caso, la definición básica de la retícula de la página se establece mediante columnas, estructuradas según nuestro sistema 2x.
Los **puntos de ruptura** (breakpoints) indican los momentos en que se debe aplicar estas definiciones de columnas, sirven para la adaptación del diseño a distintos tamaños de pantalla y permiten mantener un estándar para la integridad de la estructura de todas las pantallas. Los puntos de ruptura establecen también el marco de pruebas de los diseños y su adaptación a distintos dispositivos.
Según esto, definimos distintas **composiciones** para los diferentes tipos de dispositivos. Los dispositivos de mayor ancho como los ordenadores de escritorio usarán una composición de 16 columnas, aquellos de tamaño intermedio como las tabletas usarán la composición de 8 columnas, y aquellos de tamaño menor como los móviles usarán una composición de 4 columnas.
Respecto a las **filas**, el espaciado de estas es más sencillo dado que se entiende que el ritmo vertical se extiende más allá de los límites visibles de las pantallas, con lo que no hay que adaptarse al tamaño vertical de estas. Eso sí, con el objeto de mantener una separación vertical entre los componentes se utiliza una escala fija para el espaciado entre secciones, cajas y elementos estructurales. Se recomienda mantener una cierta proporcionalidad entre las columnas y las filas, unificando márgenes y paddings y estableciendo ciertos ratios de aspectos clásicos (1:1, 1:2 y 2:1, 2:3 y 3:2, 4:3, 16:9…). En cualquier caso, como parte de cada tema se definirán los distintos espaciados verticales que se aplicarán para separar elementos. Estos espaciados dependerán del diseño concreto, tipografías, tamaños… Con el fin de establecer una disposición homogénea del espacio en todas las páginas se emplearán definiciones estándar para los espacios a lo largo de todo el tema. Se recomienda respetar las reglas del espaciado 2x y los órdenes definidos de macro y micro-espaciado también para la distribución vertical de componentes o de elementos dentro de los mismos.
### Márgenes, paddings y gutters Los **márgenes** en el exterior de la retícula siempre son de tamaño fijo dentro de cada punto de ruptura, tanto en distribuciones fluidas como fijas. Se establece en **Grafito** el doble de la mini-unidad de 8 pixeles como el nivel de margen por defecto, esto es 16 pixeles.
El **padding** define la distancia de elementos al borde de su contenedor. Para elementos estructurales el padding es equivalente al margen, y se define al igual que este como un múltiplo de la mini-unidad. Para **Grafito** definimos así el padding estructural como 16 pixeles.
Otros valores de padding se definirán dentro de los componentes específicos (por ejemplo las distancias al borde del campo de edición en una caja de entrada de información) que de manera genérica se define como la mini-unidad, esto es 8px. Por último, los **gutters** se definen como las distancias entre distintos componentes estructurales. Para mantener la sensación de separación entre estos se define el gutter con un margen específico para cada componente, esto supone que la distancia entre cada par sea de cuatro miniunidades, esto es 32 pixeles.
Si se requiere, para estructuración de contenido íntimamente relacionado, se puede utilizar distribuciones de componentes sin separación donde no haya gutter y la distancia se basa únicamente en el padding. ### El espacio y el diseño El espacio entre elementos ayuda a crear **relaciones** y establecer **jerarquías**, por lo que debemos prestar especial atención en la elección y uso del espacio en nuestros diseños. Los objetos que están cercanos unos a otros tienden a percibirse como agrupaciones. De ahí que establezcamos relaciones entre elementos gracias al uso de espaciado. Ciertas repeticiones en el uso del espacio (patrones) pueden ayudar a establecer relaciones entre elementos y hacer que se perciban con el mismo peso e importancia dentro del sistema (jerarquías). Así pues, el espacio puede utilizarse para establecer grupos de información dentro de la página. Aplicando espacio suficiente podemos evitar el uso de separadores, por ejemplo. Como en la música, en la que es tan importante el sonido como el silencio, debemos aplicar un ritmo consistente entre los distintos elementos. **No debemos tenerle miedo al espacio en blanco**, el cual ayuda a digerir la información haciendo que la carga cognitiva de nuestro sistema sea menor.