Fever nos llamó para que sistematizásemos su app, diéramos lógica y consistencia a un producto muy bien planteado pero que, como pasa a menudo, había crecido más rápido que su interfaz y tocaba volver a poner orden de diseño.
Durante varios meses trabajamos a dos bandas: con el equipo de diseño para que pudieran interiorizar y hacer propio lo que diseñásemos y al mismo tiempo con el equipo directivo, entendiendo bien las necesidades presentes y futuras, haciéndoles ver cuándo y por qué algunas decisiones de diseño lo eran de producto y cómo debían ser protegidas, escaladas, etc.
Además, y esto nos alegra mucho, Fever acaba de anunciar que ya está en break-even. Muy buena noticia para uno de nuestros clientes.
Pero entremos en materia…
¿Qué es la Regla del 12?
La regla del 12 es una norma que establece que todos los valores numéricos de la interfaz deben ser de 12 o múltiplos de esta cantidad: 24, 36, 48, 60...
¿A qué valores afecta?
En el caso de Fever, y en el de muchos otros proyectos, afecta a tamaños de elementos (botones, campos de texto, fotos, iconos, etc.), a sus agrupaciones (por ejemplo, un grupo de iconos que se muestra como una barra) y también a espacios blancos, matrices… La regla también aplica a los valores cromáticos: colores y sus niveles de opacidad.
¿Hay excepciones?
Siempre puede haber excepciones, pero deberíamos tratar de evitarlas o al menos no empezar por ellas. En el caso de Fever las tipografías, los interletrados e interlineados no se ciñen a esta norma, pues los saltos de tamaño de 12 son exagerados para el uso tipográfico que queríamos.
¿Por qué doce y no diez u ocho?
Las escalas de 12 (6, 12, 24…) son divisibles en pares e impares. No pasa lo mismo con los sistemas basados en 8 o los basados en 10. Que sean divisibles en pares e impares te permite mantener consistencias tanto cuando tienes grupos de tres como de cuatro columnas, o juegos de dos botones o tres, etc. ¿Entendéis la ventaja de la escala de 12?
¿Para qué sirve ajustarse a un número?
Trabajar ajustando tu sistema de diseño a una regla numérica tiene dos grandes ventajas: la armonía visual y la previsibilidad.
Para explicar bien esto es mejor que hablemos de principios de diseño de sistemas. Es un tema del que hemos hablado en varios eventos privados, hemos estudiado en casos ejemplos históricos no digitales McLean, Gira, Vitsoe, Braun, Billy… Y hemos aplicado en multitud de proyectos. De ese trabajo de años hemos sacado una lista de ’10 principios para diseño de sistemas’ que publicaremos en otra ocasión, pero de donde podemos extraer tres que nos ayuden a ilustrar esta idea del 12 como número guía.
