Generando Espaciado de Sistema de Diseño

Cómo creamos un sistema de espaciado que alineó a nuestros equipos y se relacionó con nuestros diseños de manera significativa.

Hemos analizado cómo abordamos los colores y la tipografía en nuestros sistemas de diseño en The Scenery, por lo que ahora dirigimos nuestra atención al sistema que pasa desapercibido (porque realmente no está allí): el espaciado.

Antes de comenzar, es mejor definir qué debe hacer un sistema de espaciado. En su nivel más básico, un sistema de separación debe definir la distancia entre elementos y componentes. Y siempre debe ser un sistema completo en sí mismo: tratar de acoplar el espacio para escribirlo o anidarlo dentro de los componentes es una receta para desastres y sobrescribe el desarrollador.

En cuanto a los objetivos, su sistema de espaciado debe ser ...
1. Fácilmente definido y aplicado a diseños
2. Entendido por diseñadores y desarrolladores por igual
3. Capaz de cambiar sin romperse

Para definir un sistema de espaciado que logre esto, comenzamos con una pregunta central, "¿En qué debería basarse realmente el espaciado?"

Todas tus cosas nos pertenecen

Hay una infinidad de formas de definir las unidades centrales de medida de su sistema de espaciado, pero ¿cuál es realmente la mejor? Para averiguarlo, exploremos algunas de las opciones populares que hemos usado en el pasado (en el orden en que pensamos que eran las rodillas de las abejas).

Base-10

Old Faithful. Base-10 es frecuente por dos razones principales. Uno, es la cantidad de dedos de manos y pies que tiene la mayoría de las personas. Dos, es fácil de usar. Aparte de eso, hay pocas razones para usar el espaciado de base 10 que no sea nuestra sensación de nostalgia (y el hecho de que en Sketch el gran empuje predeterminado es 10px).

Veredicto: arbitrario en el mejor de los casos, ¡pero las matemáticas son fáciles!

Ems

Ahora estamos hablando. Ems son grandes espaciadores porque son una abstracción basada en el tamaño de fuente. También son terribles porque son una abstracción basada en el tamaño de fuente. Tanto los diseñadores como los desarrolladores adoran los ems debido a su facilidad de uso y flexibilidad, pero fallan en un área central: son variables.

En uno de nuestros sistemas más grandes hasta la fecha, comenzamos nuestro sistema de espaciado con la advertencia de que el espacio podría definirse absolutamente con píxeles o con ems, según el contexto.

Esto es lo que sucedió: los diseñadores no podían entender cómo se usaban los ems, hacer los cálculos matemáticos en sus cabezas para traducir ems a px y luego usar esos valores de manera consistente en sus planos de diseño. Fue una pesadilla, por lo que sacamos los espaciadores basados ​​en em y nos mudamos a los absolutos que podrían simbolizarse en Sketch, compartirse e implementarse sin fallas.

Lo que aprendimos es que un sistema de espaciado variable es bueno en teoría, pero un dolor absoluto cuando se aplica a escala en un gran equipo (y producto).

Veredicto: Gran idea, pero los diseñadores darán un golpe.

Base-8

¿Cansado de la base 10? ¡Prueba 8! Es como 10, pero más divisible. Base-8 es en realidad mucho más útil que base-10 en lo que respecta a los sistemas. Proporciona excelentes opciones para la ampliación que son en gran medida divisibles por 2, 3 y 4, y se ajusta a los tamaños de fuente base. También es una escala muy utilizada cuando se trata de elementos básicos de la interfaz de usuario, como la iconografía.

Si va a elegir un sistema espaciador simple basado en valores matemáticos, este es el mejor hasta ahora. Se está convirtiendo rápidamente en un estándar de la industria, gracias principalmente a su uso en diseño de materiales. Pero algo al respecto todavía nos parecía realmente arbitrario, así que seguimos pensando.

Veredicto: Mejor que cualquier otra cosa hasta ahora.

Simplemente no es nuestro tipo

No son los que hay que resolver, tenemos problemas de autoridad en general, decidimos dar un paso atrás y pensar qué concepto debería definir el espacio alrededor de los componentes de nuestro sistema. Luego nos dimos cuenta de que podíamos basarlo en las cosas que conforman el 98% de nuestro sistema: el tipo de nuestro sistema.

Entra, la ex unidad.

La unidad ex es una unidad CSS apenas utilizada vinculada a lo que queremos que se relacione con el espaciado: la tipografía. Y no solo el tipo, la altura x del tipo, que varía enormemente de tipografía a tipografía, incluso cuando el tamaño de fuente base sigue siendo el mismo. Usando esta unidad, podemos especificar componentes de espaciado que se relacionan directamente con las fuentes en nuestra interfaz de usuario, creando un diseño armonioso que utiliza la teoría del diseño clásico, no un número arbitrario.

Aún más beneficioso es el hecho de que la unidad es muy flexible. Ahora, cuando vaya a cambiar la copia del cuerpo central de su sistema de Brandon a Avenir, no tendrá que volver a trabajar todo su sistema de espaciado porque todo se siente gigantesco. La unidad está diseñada para mitigar el dolor del cambio en su sistema, y ​​eso es algo que podemos respaldar en cualquier parte de nuestro sistema.

Veredicto: relacionado con nuestro tipo de núcleo mientras que es súper flexible para trabajar. Ganador.

Ahora que hemos encontrado una base que logra nuestros objetivos, debemos abordar el siguiente aspecto del espaciado: los tamaños en sí mismos.

Generando tamaños de espaciado

Los tamaños de espaciado son como cualquier otro componente del sistema de diseño: demasiadas variaciones y se utilizarán de manera inconsistente, muy pocos y su sistema se volverá frágil, rompiéndose bajo el estrés de la escala. El objetivo para nosotros al definir los tamaños de espaciado es definirlos de una manera que logre un equilibrio entre esos dos extremos.

Para hacer esto, creamos una filosofía: cada tamaño de espaciador debe ser significativamente diferente de los que lo delimitan.

¿Qué es un espacio significativo? Esto probablemente suena como una pregunta ontológica. También podríamos preguntarnos cuál es el significado de la vida, así como nuestros diversos tamaños de espaciadores. Pero sorprendentemente, encontramos nuestra solución para definir qué diferencia significativa es realmente en un lugar que siempre hemos ridiculizado como pretencioso y gratificante. Usamos una secuencia de Fibonacci.

Todos han visto publicaciones de Dribbble donde un diseñador ha alineado magníficamente sus formas vectoriales a la regla de oro en nombre de la teoría y la virtud del diseño clásico. Esto no es eso.

La secuencia de Fibonacci hace una cosa muy bien: diferencia los pasos para que estén al menos tan lejos como el paso que los precede. En resumen, impone cambios significativos entre los pasos. Si fuera a utilizar esta secuencia para cualquier cosa que se alinee con su principio central, sería aplicarla al espaciado.

Cuando tomamos nuestras unidades ex y aplicamos una secuencia de Fibonacci obtenemos algo hermoso en su simplicidad, pero poderoso en su relación con el resto de nuestro sistema de diseño.

Ver el ejemplo de codepen

Este sistema es fantástico por las mismas tres razones que declaramos al principio:

1. Se define fácilmente y se aplica a los diseños (gracias, símbolos de Fibonacci y Sketch)
2. Puede ser entendido por diseñadores y desarrolladores por igual (gracias, tamaños absolutos)
3. Puede cambiar sin romperse (gracias, ex unidad)

Nombrando sus tamaños

Como el valor de píxel exacto del espaciador puede cambiar, utilizamos abstracciones para nuestros nombres de espaciado. Estos pueden ser una escala numérica (sp-1, sp-2, sp-3, etc.) o tamaños de camisetas (xs, s, m, l, xl, etc.). Esto permite que nuestro sistema de separación se flexione en el tamaño específico de cada paso, mientras se mantiene la integridad de la base de código.

Optamos por los tamaños de camiseta en nuestros sistemas. Ayudan a relacionar el tamaño general del espacio y al mismo tiempo brindan a los desarrolladores y diseñadores una ruta clara y definida a través de los tamaños del sistema. Y como la secuencia no está abierta a medias tintas, no tenemos que preocuparnos de que alguien intente insertar el temido tamaño "smedium" en el sistema en algún momento.

Con este proceso central que alimenta el espacio de su sistema, estará preparado para el futuro con un núcleo que cambia con gracia, se relaciona perfectamente con sus diseños y no se basa solo en sus propias manos.

El éter llegará pronto. Mientras tanto, echa un vistazo a la página teaser y regístrate para recibir notificaciones cuando se lance.

- Somos el paisaje