Las escalas son sumamente importantes en The System y nos permiten crear una base, a priori inapreciable visualmente, que otorga solidez y coherencia a todo nuestro proyecto. Este idea se ve ilustrada por la frase de Joe Sparano: “Good design is obvious. Great design is transparent”.

Las escalas son una decisión de diseño, ¿o no?

Como indica la frase de Sparano, las escalas son una decisión de diseño. Aun así, son demasiadas las veces que nos encontramos con diseños donde éstas no existen o están definidas de manera vaga. Por este motivo The System incluye escalas tipográficas y de espaciado predefinidas. Tener estas escalas predefinidas tiene los siguientes beneficios:

• Tener un set de clases listas para aplicar las escalas sin tener que escrutinar las infinitas páginas de un Figma para ver si podemos extraer un patrón de cómo se definen los espacios y tamaños tipográficos.
• Abordar una conversación con la persona encargada del diseño para confirmar las escalas ya definidas o modificar las ya existentes.
• No todo el mundo creando diseños para la web tiene la experiencia necesaria para preparar sus diseños al nivel que estamos hablando. Con las escalas predefinidas como referencia, la persona diseñando puede saber exactamente la información que necesitamos para construirlas.

Escalas predefinidas en The System

Antes de seguir adelante, tenemos que recordar que The System está enfocado para crear sitios web de marketing. ¿Y qué tiene que ver esto con las escalas? Resulta que los en los sitios de marketing la necesidad de guiar la navegación del visitante es mayor que en el resto. Esto significa mayor contraste en las escalas para que nos ayude a focalizar la atención del visitante allá donde nos interesa.

Por otro lado, no podemos olvidarnos de la naturaleza responsive de la web. Donde la cantidad de elementos e información que se muestran simultáneamente se reduce en función del tamaño del dispositivo desde el que accedemos a la web. Por este motivo, el contraste dentro de las escalas se reduce hacia los breakpoints más pequeños.

Todas las escalas en The System tiene un valor base de 1rem.

<aside> 💡 La característica clave de toda escala son el valor base y el coeficiente.

</aside>

Modificación y ampliación de las escalas

Por supuesto que éstas no son escalas cerradas. Están abiertas a ser modificadas y ampliadas si fuera necesario. Lo importante es que las modificaciones y ampliaciones pertenezcan un mismo patrón y respeten la naturaleza responsive de las escalas.

Escala tipográficas

Escala fundamental de titulares

Escala fundamental de titulares en el Rich Text

Escala fundamental de cuerpo de texto

Escalas de espaciado

La escala de espaciado es única y sustanta los módulos vertical, horizontal y padding.

Escala fundamental de espaciado