Durante los últimos trimestres, los equipos de diseño e ingeniería de Webflow han adoptado gradualmente una cuadrícula de diseño más rígida basada en incrementos de 4. Esto ha hecho que nuestra colaboración entre equipos sea más rápida, simple y menos propensa a errores.
A primera vista, la cuadrícula de 4 puntos parece un concepto sencillo de implementar: ¡simplemente usemos valores divisibles por 4 en todas partes!
En la práctica, adaptar los componentes existentes es un esfuerzo complejo y conjunto que requiere planificación y que no tiene nada de sencillo, especialmente cuando también estás lanzando nuevas funciones.
¿Por qué 4 puntos? Escalas de espaciado en el contexto de una herramienta de diseño
Como diseñador que trabaja en sitios web o productos, probablemente conozcas la popular cuadrícula de 8 puntos, así que quizás te preguntes: ¿por qué 4?
Las herramientas de diseño de escritorio tienen interfaces bastante densas optimizadas para la productividad y la velocidad de uso, y esto es igual de cierto para Webflow. Con una interfaz tan densa, una escala de 8 puntos simplemente no proporciona suficiente granularidad: incluso el 4 es un valor que usamos con bastante frecuencia en el inspector.
Usamos todos los valores en la progresión de 4 a 36, por lo que nuestra cuadrícula está definitivamente en el extremo más granular de la escala, especialmente en comparación con la cuadrícula de 8 puntos que podrías ver en muchos sitios web de marketing modernos, por ejemplo. Crear interfaces más densas requiere el alto nivel de fidelidad que proporciona una cuadrícula más granular.
Elegir entre la perfección de píxeles y un trabajo fluido entre equipos
Diferentes equipos implementan cuadrículas de diseño de distintas maneras. Esto suele reducirse a dos tipos de equipos, definidos por lo que más valoran: la perfección de píxeles o la colaboración fluida entre equipos.
El primer tipo busca que sus proyectos de Sketch/Figma y la implementación front-end resultante sean duplicados perfectos a nivel de píxel. Aunque en Webflow valoramos la precisión visual, solemos elegir nuestras batallas, priorizando la colaboración eficiente sobre la precisión absoluta.
Los bordes y la altura de línea son dos buenos ejemplos de elementos de diseño que funcionan de manera diferente según el medio. ¿Calculamos un borde de 1px como parte del relleno de 8px o no? ¿La altura calculada sería un múltiplo de 4? Lo que realmente nos importa es que tanto diseñadores como desarrolladores usen múltiplos de 4 en sus respectivas herramientas y que todo se vea bien, sin tener que superponer capturas de pantalla de producción sobre los proyectos del equipo de diseño.
Volviendo a la razón original por la que decidimos usar una cuadrícula de diseño, nuestro objetivo principal siempre ha sido establecer un proceso más flexible y menos propenso a errores para diseñar y construir interfaces. Si tuviéramos que tener en cuenta cálculos de 1px dondequiera que usemos bordes para mantener la consistencia óptica entre medios, la cuadrícula de 4 puntos ya no sería una cuadrícula de 4 puntos real. Tendríamos que usar valores como 7, 15 o 23, lo cual es lo opuesto a intuitivo.
Buena experiencia de diseño + Buena experiencia de desarrollo = Buena experiencia de usuario
El objetivo de todos nosotros en Webflow es ofrecer herramientas estelares sin sacrificar el acabado, la consistencia o la velocidad. Cada intento de mejorar nuestra experiencia interna debe traducirse directamente en mejoras para ti.
En el caso de la cuadrícula de 4 puntos, proporciona una mejor experiencia para nuestros diseñadores y desarrolladores, pero también acelera drásticamente las cosas en la intersección de esas disciplinas, acercándolas mediante una cuadrícula y una escala compartidas. Esto nos permite lanzar nuevas funciones más rápido, sin comprometer la consistencia. En cambio, estamos reduciendo la complejidad de nuestro sistema de diseño desde la raíz, lo que lleva a interfaces más consistentes entregadas sin esfuerzo adicional.
Buscando un ritmo vertical consistente en todo el modelo de caja
El uso de una cuadrícula de diseño es, en última instancia, más útil cuando los valores que proporciona se utilizan en todo el modelo de caja. Cada valor debe ser divisible por 4, incluidos los márgenes, los rellenos y las alturas de línea. Las excepciones son el tamaño de fuente y el tamaño real de los glifos dentro de los iconos, pero esos componentes siguen estando contenidos dentro de contenedores que se ajustan a la cuadrícula.
Como era de esperar, cuando toda la interfaz se calcula utilizando un único valor central, las cosas comienzan a alinearse casi por arte de magia. Los márgenes para una desalineación vertical están muy limitados debido al estrecho conjunto de variables que utilizamos. Otra razón para usar cuadrículas de 4 y 8 puntos es que la mayoría de las resoluciones de pantallas y monitores modernos son divisibles por 4 u 8, tanto horizontal como verticalmente.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Inspeccionando la interfaz de usuario a simple vista
Las escalas de diseño hacen que las decisiones de interfaz sean más fáciles de entender visualmente, sin depender de herramientas como el inspector del navegador o un proyecto de Figma. Esto es aún más sencillo con una cuadrícula menos detallada, pero con el tiempo, tanto ingenieros como diseñadores desarrollan un mejor instinto. Crear componentes nuevos es mucho más rápido cuando todos usan valores compartidos desde el proveedor de temas.
Comunicar cambios en el diseño también es mucho más ágil. Si un margen parece muy ajustado, no hace falta conocer los valores exactos para dar feedback: basta con sugerir el siguiente valor de nuestra escala de espaciado.
El encanto del valor base
.png)
En el corazón de toda cuadrícula de diseño está la unidad base, que sirve para calcular todo lo demás. Contar con un sistema de diseño basado totalmente en esta unidad permite escalar toda la interfaz de forma fluida mediante temas.
En ciertas partes del Editor, por ejemplo, reutilizamos componentes del Diseñador. Pero el tema del Editor reemplaza las variables principales por 6px, así que toda la interfaz se vuelve más grande y espaciosa, manteniendo las mismas proporciones y relación entre componentes.
Esta arquitectura tiene muchas ventajas, como la posibilidad de crear interfaces con tamaños de fuente variables. Son muy útiles para la accesibilidad, algo que muchas aplicaciones nativas ya soportan aprovechando los marcos de accesibilidad del sistema operativo.
Romper la cuadrícula: cuándo hacerlo
Como cualquier principio de diseño, debemos seguir la cuadrícula al pie de la letra, hasta que deje de ayudar y empiece a estorbar. El número de excepciones en nuestras interfaces actuales es mínimo. Centrar elementos verticalmente, por ejemplo, puede dejar huecos de 6px. También usamos rellenos personalizados en los botones tipo "píldora" para que tengan una forma más natural.
Un ejemplo más detallado: alinear verticalmente una muestra de 12px x 12px y una casilla de verificación en un elemento de lista de 24px deja un espacio de 6px arriba y abajo. Tiene todo el sentido y no afecta a nadie. Hacer excepciones así está más que bien.
Siguiendo adelante
En lugar de reconstruir toda la interfaz para adaptarla a la nueva cuadrícula de 4pt, vamos actualizando y retirando componentes antiguos poco a poco. Es un proceso más realista, fácil de gestionar y de dividir en proyectos pequeños. El panel de estilos es nuestra prueba piloto, pero esta tendencia seguirá en Webflow Ecommerce y otras novedades que estamos preparando.
