Espacio en sistemas de diseño

De conceptos básicos a conceptos ampliados para aplicar espacio con intención

Hace tiempo que me he referido al color, tipo e íconos como los "3 grandes" del lenguaje visual de un sistema. Todos los componentes de la interfaz de usuario, desde los botones hacia arriba, se crean con ellos. Pero dejé algo afuera. El espacio, nuestra frontera final.

Color de rivales espaciales

El espacio está en todas partes. CSS utiliza propiedades como el relleno, el margen y el posicionamiento absoluto a la izquierda, derecha, arriba y abajo para separar objetos. En cinco bibliotecas (Bootstrap, Salesforce Lightning, Foundation, un proyecto anterior y un proyecto actual), comparé la ocurrencia de estas propiedades de espacio en relación con los grupos de propiedades de color, tamaño, tipo, diseño y más.

El espacio rivaliza con el color en la frecuencia de uso dentro de las reglas de estilo de una biblioteca

Después de eliminar los efectos (valores "cero" como: 0; y términos reservados como transparente o automático) donde CSS ya nos ofrece un sistema para tomar decisiones, las reglas de espacio aparecieron más que nada excepto el color. Nada más, ni el tipo, el tamaño ni el diseño, estaba ni siquiera cerca. Hay tanta complejidad espacial integrada en nuestras bibliotecas, ¡mucho menos nuestros productos!

El espacio nos divide

El espacio personifica la brecha "Yo diseño de esta manera, tú construyes de esa manera" entre diseño y desarrollo. Hace tiempo que lamentamos las especificaciones con líneas rojas esparcidas sobre nuestros diseños. Nunca se siente que valga la pena. Sin embargo, persisten, desinformados por el material terminado de nuestro producto: el modelo de caja de HTML.

Los costos son enormes: anotar, traducir, discutir, fregar visualmente durante el control de calidad. Todo ese trabajo ... para algo que todavía no es lo suficientemente bueno. Así, el espacio también tiene un costo emocional.

Los conceptos espaciales son primitivos

Podríamos tejer conceptos espaciales más intencionales a través del diseño, el código y la conversación. Pero nosotros no. Solo usamos camisetas y lo llamamos día. Podemos hacerlo mejor. Podemos reemplazar la rabia con líneas rojas y cara roja para insertar, aplastar, estirar y apilar nuestro camino hacia un futuro de claridad espacial.

Con eso en mente, aquí están los fundamentos, un vocabulario ampliado y otras experiencias que he tenido al aplicar el espacio al trabajo de sistemas.

Fundamentos del espacio

Rejilla ≠ Espacio. La cuadrícula es un componente que usa el espacio.

Las cuadrículas son ricas en decisiones espaciales para columnas, canales, márgenes externos y matices receptivos. Los equipos abordan las cuadrículas temprano para que los usuarios puedan crear fácilmente una página. Desafortunadamente, eso es a menudo cuando se detienen las conversaciones espaciales.

Convenciones de cuadrícula para margen (azul) y canaleta (verde lima)

Una cuadrícula no es un sistema espacial completo. Una cuadrícula es un componente que usa espacio, al igual que cualquier otro componente. Una cuadrícula se siente diferente. Es invisible, llega temprano y solo hace espacio. Pero hay más en el espacio que la cuadrícula.

Para llevar: introduce la convención espacial con una cuadrícula, pero no te detengas allí. Alinee los márgenes, las canaletas y los valores de columna de una cuadrícula con conceptos espaciales más profundos entrelazados a través de una biblioteca de componentes completa.

Establecer un número base memorable y expectativas

Los equipos configuran un número base memorable, incluso mágico, para cimentar todos los demás valores espaciales. Algunos equipos prefieren la base 10, debido a cómo contamos (debido a nuestros diez dedos, por cierto). Incluso he visto a un equipo usar una base 6, con factores útiles de 2 y 3, para dar paso a una matriz súper flexible de 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24s, 32s y más. ¡Para la locura!

Un conjunto de opciones de espaciado, basado en 6 pero que suministra cualquier múltiplo de 3s y 2s. De Verdad? Todas estas opciones?

La mayoría de los sistemas que he trabajado usan 16. Es un buen tamaño de fuente predeterminado. Es un factor de todas las resoluciones de pantalla (320, 768, 1024). Y proporciona múltiplos memorables mayores (32, 64, ...) y factores menores (8, 4, 2) que donde comienza.

Un conjunto de opciones espaciales más limitadas, basado en 16

Para llevar: conecte a tierra el rango de su sistema espacial con un número base memorable y limite las expectativas sobre cómo se usa.

Opciones de escala no lineales

Con una base establecida, los equipos aún pueden pasar a pasos aleatorios (12, 14, 18, 22, 24, 28, 30, 32, ...). Para evitar eso, otros usan una escala lineal (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, ...) donde cada paso es un incremento fijo. Para mí, cualquiera de los resultados se usa de manera impredecible, ofreciendo demasiadas opciones demasiado juntas. ¿Cuándo uso 24 o 28? No se.

Progresión lineal de 4 a 32. ¿Realmente necesita todas estas opciones?

Una alternativa es no lineal. Las opciones incluyen la proporción áurea, la escala modular o la progresión geométrica similar que podría duplicar cada paso. Comenzando desde la base, iremos en ambas direcciones hasta paradas más pequeñas (16, 8, 4, 2) y más grandes (16, 32, 64 y ... eso es todo) en la escala.

Progresión geométrica, duplicando cada paso. % s representa el uso proporcional en nuestra biblioteca.

Para llevar: Considere una progresión geométrica o algo similar no lineal. Puede experimentar tensiones ocasionales para agregar un 24 entre 16 y 32. Sin embargo, en mi experiencia, esos momentos son raros y rara vez justifican romper el sistema simple.

Nombra cada paso para una reutilización memorable y precisa

Me encanta el cambio de espacio compacto, acogedor y cómodo de Gmail. Entonces, cuando construimos nuestro sistema espacial, sugerí que usáramos esas etiquetas en nuestro trabajo. Inmediatamente, un compañero de equipo me retó: "¿Cómo llamamos otros pasos?" Mis opciones espartanas, pequeñas y lujosas no pasaron desapercibidas.

¿Una etiqueta descriptiva para cada parada? Ten cuidado.

Entonces hicimos lo que siempre hacemos: usar una escala de tamaño de camiseta. Medio corresponde al valor predeterminado y S, XS, L, XL y, si es necesario, XXS y XXL son otras opciones. Es lo que hacen la mayoría de las bibliotecas (Bootstrap, Lightning, etc.).

Para llevar: Nombre las opciones de espacio simplemente, usando una escala como el tamaño de las camisetas para crear un lenguaje que las personas puedan recordar y aplicar con precisión. Si prueba etiquetas más descriptivas, prepárese para que los compañeros de equipo respondan "Pequeño, mediano, grande, por favor".

He revisado muchas bibliotecas y hablé con muchos diseñadores. Convenciones simples de números base y una escala con nombre son donde generalmente terminan las conversaciones. Aunque estas pocas opciones son simples, usar el espacio todavía se siente tan ... aleatorio. Necesitaba más

Extender un vocabulario para el espacio

Al revisar nuestro trabajo emergente, no hay muchas intenciones distintas para aplicar el espacio. Por ejemplo, inspeccionemos mi componente favorito: la tarjeta.

Como desarrollador front-end, imagino todas las cajas de elementos que encajan entre sí.

La tarjeta proporciona una ilustración útil de muchos conceptos espaciales que utilizamos: insertar contenido desde un borde, variar la forma de un inserto, espaciar elementos en línea y apilar elementos dentro y entre un componente.

Estos conceptos: recuadro, inserción, estiramiento, apilado, en línea y cuadrícula, cubren la gran mayoría de las reglas CSS de espacio de nuestra biblioteca: relleno, margen, izquierda, derecha, arriba y abajo. Estos conceptos también mejoran la forma en que cada átomo es autónomo, lo que mejora la compostibilidad.

Concepto 1: recuadro (cuadrado)

Un recuadro ofrece contenido de sangría en los cuatro lados, como el mate de la foto enmarcada en una pared. Su uso está muy extendido, en muchos componentes de diferentes tamaños, ya sea nuestro módulo 3-Up y mensajes de bloque de sensación media, píldoras extra compactas o pies de página y cabeceras espaciosas.

El valor predeterminado también es un punto de partida útil para el primer diseño móvil, que se expande a grande en un ancho de ventana relevante como 768px.

Concepto 2: inserción de Squish

Una inserción aplastada reduce el espacio superior e inferior, en nuestro caso en un 50%. Si bien es menos común que su contraparte cuadrada, se produce un aplastamiento con frecuencia en elementos (como un botón) y contenedores tipo celda como una tabla de datos o un elemento de lista.

Inserción aplastada en botones, celdas de tabla de datos y elementos de grupo de lista

Concepto 3: inserción elástica

En contraste con un botón o la tableta, nos encontramos estirando verticalmente las inserciones de cuadros de texto, áreas de texto y otros elementos de formulario.

Concepto 4: Pila

Con el debido respeto a la IU desplazada horizontalmente, la abrumadora mayoría se desplaza verticalmente. Y eso significa una cosa: apilamos cosas. Apilamos el mensaje en el encabezado de la tabla de datos. Apilamos módulos en rieles. Apilamos copias, píldoras y barras de herramientas, todo en una tarjeta, cada uno en una cuadrícula. ¡Diablos, el desplazamiento infinito significa una pila infinita! Apilamos, apilamos, apilamos.

Concepto 5: en línea

También organizamos los objetos en línea, envolviéndolos a medida que fluyen como texto desde la izquierda o la derecha. Tales objetos (píldoras, etiquetas, migas de pan y más) pueden estar solos o apilarse y mezclarse con otros objetos.

Concepto 6: Cuadrícula

Ah, ¿guardar la grilla para el final? A medida que el espacio se estabiliza, nos encontramos revisitando los márgenes y las canaletas de la cuadrícula, alineando estos espacios con nuestro punto de partida mágico y otros usos.

Por lo tanto, según se aplica a un componente de la Tarjeta, el relleno y el margen con estilo pueden parecerse a:

Aplicación teórica de inserciones, pilas y líneas (o separadores genéricos, ¡ack!) En una tarjeta

Lo que aprendimos

Usar conceptos espaciales requiere que nos adaptemos a algo nuevo. En mi equipo, tomó un día para que el ligero escepticismo dé paso a adoptar el nuevo modelo.

Enseñar un sistema de espacio visualmente

La mayoría de los colaboradores no pueden ver el espacio, una razón principal por la que se aplica de manera tan arbitraria. Pero ahora tenemos un sistema: un número limitado de conceptos, cada uno con una gama limitada de opciones.

Una referencia visual, similar a una hoja de trucos, de conceptos espaciales.

Para llevar: enseñe sus conceptos espaciales usando un diagrama de documentos ajustado o una hoja de trucos. Tales referencias aceleran cómo captamos, aplicamos y sostenemos los conceptos a través del diseño y el código.

Ofrecer ayudantes simples y controlar el uso

No seas tonto. Estos seis modelos no resuelven todo. Todavía ajustamos un margen inferior aquí y salimos de vez en cuando. Por lo tanto, existe una justificación para seguir opciones de espacio más intencionales con alternativas más genéricas (como $ space-m).

Para llevar: brinde opciones genéricas, úselas con moderación y espere que los equipos de productos las usen. Cuando surjan en una crítica o solicitud de extracción, eduque a los compañeros de equipo sobre conceptos más específicos como insertar o apilar.

Evite nombres de variables con relleno o margen

Cuando presenta algo más complicado, otros abogan justificadamente por algo familiar, como "¿Por qué no podemos usar el relleno y el margen en nuestros nombres de variables?" En este caso, los conceptos de espacio 2+ usando el relleno, y esos conceptos se pueden aplicar a la izquierda y propiedades correctas también. margen se utiliza para apilar, cuadrícula y espacio en línea. Además, ¿qué hay de las plataformas que no son web que no usan HTML?

Para llevar: separe los conceptos de los nombres de propiedades. Son muchos a uno y limitan la reutilización a una sola plataforma.

Resolver colisiones como altura de línea sistemáticamente

Las reglas simples de relleno de relleno y margen de pila chocaron con un adversario espacial conocido desde hace mucho tiempo: altura de línea. Esta interacción incrementa el espacio de forma impredecible, agregando un píxel por encima y por debajo de nuestro valor predeterminado más simple de 16px.

Sin embargo, seguimos la chispa de una idea (@ kevinmpowell "¡Vamos al margen negativo usando pseudo elementos! ¿Pero cuánto?") Con algo de matemática (¡puedo usar mi título universitario!). El resultado fue una fórmula mixin que combina el tamaño de letra y la altura de la línea para colapsar el espacio sobre y debajo de los objetos que colisionan.

Para llevar: no renuncies a la claridad sistemática debido a excepciones. Intenta resolverlos. Si puede superar tales matices, incluso con un poco de truco de CSS, puede persistir en un concepto más simple al que todos puedan apegarse.

Usar conceptos espaciales para marcar la densidad

Con conceptos como inserción, apilamiento y cuadrícula, puede ajustar los diales de densidad con aplomo. Busque en un repositorio, encuentre inserciones y pilas de interés y extienda o anule esas reglas para ajustar la densidad de visualización.

A la izquierda, espaciado predeterminado. A la derecha, ajuste al aumentar solo el recuadro en un 50%.

Para llevar: puede ajustar la densidad espacial incluso con un conjunto de opciones primitivas apenas más allá. Sin ellos, el control de densidad es un sueño. Con ellos, puede construir gradualmente hacia un motor potente para encontrar, ajustar y ajustar el espacio con gran intención y menos riesgo.

¿Está a punto de embarcarse en un sistema de diseño o necesita profundizar para hablar sobre productos y jugadores? EightShapes realiza talleres de planificación de sistemas y entrena a clientes en sistemas de diseño. ¡Hablemos!