El módulo de fundamentos se aprueba nombrando: equilibrio, ritmo, proporción, contraste, las leyes de la Gestalt. Ninguna de esas palabras lleva un número detrás, y una composición se arregla cambiando números. Solo hay dos que tocar: cuánto se separan dos cosas y en cuántas propiedades se diferencian.
Nuria Alcaraz Vidal está rehaciendo el cuadro de farmacias de guardia de la provincia de Cuenca. Es un A3 pegado por dentro del cristal, se lee desde la acera, de noche y con prisa, y se fotocopia en blanco y negro cada mes. El que sustituye separa todo con el mismo hueco, 12 px: el nombre de la farmacia de su horario, una entrada de la siguiente y una semana de la otra. Treinta y un días sin agrupar, y quien busca el de esta noche los lee todos.
Seis bloques que hacen dos preguntas a distinta escala
Todo lo que cuelga de este tema es una de esas dos preguntas hecha a distinto tamaño. Cuánto separa: la composición, las retículas y maquetación y la mitad de la tipografía que es espaciado. Cuánto diferencia: la jerarquía visual, el color y la otra mitad de la tipografía, que es elegir una letra. El sexto, aprender a ver, no es una tercera pregunta: es cómo se contesta cualquiera de las dos con puntería.
La división se gana el sueldo en el momento en que algo está mal y no sabes decir por qué, porque deja dos movimientos y ninguno más. Cambiar una distancia o cambiar una diferencia. Lo demás que se te ocurra es una de esas dos con otro nombre.
El hueco de dentro tiene que perder contra el de fuera
Agrupar es aritmética, y la aritmética cabe en una línea: el espacio de dentro de un grupo tiene que ser visiblemente menor que el de alrededor. Visiblemente quiere decir la mitad o menos, no un poco menos. Dicho como se usa: un hueco interior que sea la mitad del que lo rodea, como mínimo.
El cuadro de Nuria anida cuatro niveles y cada uno dobla al de dentro. El horario de apertura va a 4 px del nombre de la farmacia, que es lo que hace que las dos líneas se lean como un dato y no como dos. La dirección se separa 8 px de ese par, y los tres juntos son una entrada. Entre una entrada y la siguiente hay 24 px, y donde se acaba una semana y empieza otra, 48 px. Cinco semanas, y se ven antes de leer nada.
El salto que más trabaja es el de 8 px a 24 px. Por debajo el ojo entiende que esto va junto; por encima, que no. Con esa proporción mal puesta no hay paleta que lo arregle, porque el color no sabe decir que dos cosas son un solo objeto.
Una diferencia funciona cuando son dos propiedades a la vez
El segundo movimiento es diferenciar, y quien empieza lo gasta de uno en uno. Para levantar un titular sobre su párrafo sube el cuerpo, de 17 px a 34 px, y se queda con un titular legible desde el final del pasillo y una columna a la que le falta un tercio. Cambia dos propiedades a la vez en vez de una mucho y sale casi gratis: de 17 px a 22 px, y de redonda a seminegrita. El titular no se confunde con nada y la columna sigue siendo una columna.
Si la diferencia es real se comprueba en cuatro segundos y no cuesta nada. Pon el fichero en gris y mira si la jerarquía aguanta. Aquí no es un simulacro: el cuadro se fotocopia cada mes, así que se monta en gris y se colorea después, en ese orden y no en el contrario.
Alinear es el mismo movimiento hecho por resta. Cuenta los bordes izquierdos distintos. El cuadro viejo tenía nueve, uno por cada cosa que alguien arrastró a ojo en algún momento de los últimos cuatro años, y nueve puntos de partida se leen como nueve papeles distintos fotografiados juntos. El nuevo tiene dos, una columna de fechas y otra de farmacias, y en la hoja no empieza nada en un tercer sitio.
La razón la decide la distancia de lectura
Los cuerpos de letra salen de un número multiplicado, y cuál es ese número lo decide a qué distancia está quien lee, no el gusto de quien dibuja. La pareja que funciona es una razón de 1,2 para una página y de 1,5 para un cartel, y una hoja que se lee de pie desde la acera es un cartel. Sobre una base de 16, el 1,2 da 16, 19, 23 y 28; el 1,5 da 16, 24, 36 y 54.
Montado sobre el primero, el nombre del día acaba un poco mayor que las fechas, y a dos metros de distancia un poco mayor no es mayor.
La interlínea corre en sentido contrario al cuerpo. La interlínea se aprieta según crece el cuerpo: el texto de 16 va sobre 24, la mitad más, y el nombre del día de 54 va sobre 58, porque una línea de una palabra no necesita aire debajo y el automático le pondría 65.
Queda una cuenta pura que casi todo el mundo se salta: el centro óptico está por encima del centro medido. Centra el nombre del día en su banda con los números y se leerá como si resbalara hacia abajo. Súbelo una cuarentava parte de la banda y se lee centrado. El ojo se equivoca siempre hacia el mismo lado, que es la única razón por la que puede escribirse una regla para él.
Sabes nombrarlo porque el módulo evaluaba nombrarlo
Aquí es donde la gente de los fundamentos deja de avanzar sin enterarse de que ha dejado de avanzar. El vocabulario llega pronto y es fácil, y en España llega antes que en casi ningún otro sitio, porque es lo que evalúa el primer curso de un grado medio de Gráfica Publicitaria o de Diseño de Interiores. Equilibrio, ritmo, proporción, contraste: los cuatro funcionan como adjetivos, y alguien con dos semanas encima los aplica a un trabajo terminado y suena exactamente bien.
Lo que casi nadie hace a continuación es medir. La señal es exacta y se comprueba esta misma tarde: sabes decir que una composición está descompensada y no sabes decir qué número de ella está mal. El título no lo arregla, porque el examen preguntaba el nombre de la ley y no el valor del hueco.
La cura es la única cosa de este tema que es una costumbre y no un valor. Rehazlo al tamaño real y anota en números dónde va distinto. Coge una hoja que te parezca buena, vuelve a hacerla al tamaño al que se imprime de verdad, pon las dos al lado y escribe las diferencias como cifras: el hueco de debajo de su titular es 12 y el tuyo 20, su columna mide 62 caracteres y la tuya 94. Con tres de esas, el vocabulario deja de ser adjetivos.
El orden
El color va el último porque es el que menos rescata
Cada parada repara menos de la página anterior que la de antes, así que el fallo más barato de arrastrar es el que está más adelante.
- lo primero, y lo más baratoDistanciaAgrupar, alinear, y los huecos que hacen que un grupo sea un grupo01
- 02lo segundoDiferenciaDos propiedades a la vez, comprobadas en gris
- desde aquí, ya siempreLa costumbre de medirRehacer algo bueno a tamaño real y anotar dónde va distinto lo tuyo03
- 04lo terceroLetraDonde vive casi todo lo que parece un fallo de maquetación
- lo últimoColorAñadido a una hoja que ya funciona sin él05
Sin fechas y sin duraciones, porque nada de esto es un calendario. Lo único que afirma es el orden: una parada tomada pronto no es pronto, es una parada tomada contra nada.
Distancia, luego diferencia y el color al final
Ese es el orden, y sostiene porque cada paso rescata menos que el anterior. El color va el último porque es el que menos repara: llega a una hoja que ya funciona sin él, y a la que no funciona sin él tampoco va a arreglarla.
Al revés falla en tres sitios previsibles. La jerarquía antes que el espaciado produce la hoja donde todo crece: el cuerpo es la única herramienta de la caja, así que todo lo importante es grande y no queda silencio contra el que sonar.
La retícula antes que el espaciado produce una retícula sobre la que nada se apoya cómodo, porque un ancho de columna elegido antes de saber tus huecos es un número elegido contra nada. Y el color primero es el más común y el más caro: la paleta se elige la primera semana y se pasa el resto del encargo respondiendo por distancias, que es un trabajo que el color no hace a ninguna saturación.
Qué abrir, y ninguno es el programa que vas a perder
Quien sale de un ciclo formativo ha trabajado dos años con la licencia de Adobe del centro y la pierde el día que termina. Merece decirse aquí porque nada de esta página la necesita, y porque la primera compra que hace mucha gente al acabar es la que menos falta le hacía.
Figma es el estándar de pantalla desde 2019 aproximadamente, cuando le quitó el sitio a Sketch por funcionar dentro del navegador, y su capa gratuita cubre todo lo que hay en esta página. Lo que importa de él aquí no es dibujar: selecciona un objeto, mantén pulsada la tecla Alt, u Opción en un Mac, y pasa el ratón por encima de otro. La distancia entre los dos aparece en píxeles. Diez minutos de eso sobre trabajo que admires instalan la costumbre de medir mejor que un semestre de teoría.
El contraste es aritmética y hay una calculadora gratuita para él. El comprobador de contraste de WebAIM coge dos colores y devuelve la razón entre ellos, y sustituyó a preguntarle a quien tienes al lado si lo lee. La letra es la tercera: Google Fonts es gratis desde 2010 y sustituyó a la licencia por encargo como la manera en que alguien que empieza consigue una letra que valga.
Lo que nada de esto decide es qué diferencia gastar. Las dos preguntas dicen que un titular tiene que diferenciarse de su párrafo; no dicen si la diferencia va en cuerpo, en peso, en color o en aire, y ahí es donde los seis bloques dejan de estar de acuerdo entre ellos.
A partir de ahí se parte según lo que el trabajo tenga que aguantar: impreso una vez y pegado a un cristal, que es el diseño gráfico, o vuelto a dibujar cada vez que alguien lo abre a un ancho que no elegiste tú, que es el diseño de interfaces. Ninguno de los dos pregunta si la cosa debería existir. Esa es la pregunta que queda abierta al salir de aquí: ¿para quién es el cuadro, y quién ha dicho que lo sea? La contesta UX, y conviene pasar por ahí antes que por los otros dos.