DEV Community

Cover image for Te mintieron, en diseño si hay matemática: múltiplos en la UI
Axel Valdez
Axel Valdez

Posted on

Te mintieron, en diseño si hay matemática: múltiplos en la UI

Si creías que en diseño no vemos matemática te mintieron, en todo proyecto siempre se van a utilizar múltiplos y a este post lo llamo regla de múltiplos de 8. Sirve para poder mantener un design system totalmente ordenado, equilibrado y automatizado para evitar inconsistencias

El problema

Uno de los grandes errores que tenemos como profesionales es que siempre trabajamos a ojo y el resultado es la inconsistencia en nuestro sistema de diseno:

  • Los espacios son diferentes.
  • Los tamaños tipográficos son irregulares en diferentes paginas o, por ejemplo, a veces no se diferencian un subtitulo de un párrafo.
  • Los nuestros assets tienden a tener un tamaño totalmente diferente al resto.
  • Entre otras cosas más.

Vamos con un ejemplo

Alt Text

En el primer texto el subtitulo tiene una fuente de 24px con un interlineado de 32px asi mismo el texto tiene una fuente de 16px con un interlineado de 24 (por ahora usamos estos números de los múltiplos de ocho 8-16-24-32). El segundo ejemplo es sin esta regla dónde utilizamos un subtitulo de 20px con un interlineado de 28px y un texto de 18 con un interlineado de 20. Pueden diferenciar? notan que uno tiene más aire? Así mismo pueden encontrar ejemplos con los paddings/margins.

La solución no es tan difícil

Así como lo dije, lo ideal es utilizar múltiplos a la hora de diseñar. Por ejemplo, en la siguiente imagen utilice múltiplos de 8 para poder crear ese shadow smooth que tanto buscamos. Mismo este layout creado en figma utilice esas mismas reglas para generar ese espacio para que me de un poco de aire.

Alt Text

La regla con las tipografias es asi:

Si mi paragraph [p] es de 16px, mi proximo nivel de lectura (un subtitulo [h2] por ejemplo) tiene que tener un cuerpo de 24px. Si mi subtitulo es de 24px, mi titulo [h1] tiene que ser de 32px.

Con el interlineado pasa lo mismo:

Si mi paragraph [p] es de 16px, mi interlineado tiene que ser el proximo multiplo: 24px. Por eso mismo quedaria 16px / 24px

Esto es un ejercicio que me enseñaron los chicos de FoF Buenos Aires. Es una regla simple, salvadora y hace que nuestros diseños se vean con un poco mas de espacio, hablen el mismo idioma y no tan amontonado. Ademas les puede salvar de que sus pm's les diga "hacelo mas grande/chico" 😜

Saludos !

Discussion (0)