Diseño con criterio
Cuatro decisiones separan una pieza que funciona de una que solo está bonita: dónde se apoya, cómo se lee, qué color manda y qué se mira primero. Ninguna es cuestión de gusto.
Cuatro decisiones, en orden
Si algo no está alineado se nota, aunque nadie sepa decir por qué.
4 módulos
35 minutos en total
Tipografía
Jerarquía, medida e interlineado: lo que decide si un texto se lee o solo se ojea.
Color
Una paleta corta, un acento y contraste que cumple. El resto sobra.
Jerarquía
Decidir qué se mira primero. Si todo grita, no se oye nada.
Empieza por donde quieras
La rejilla manda
Antes de elegir un color o una tipografía hay que decidir dónde se apoya todo. La rejilla no se ve en la pieza terminada, pero es lo primero que se nota cuando falla: un margen distinto, un bloque que arranca dos píxeles más a la derecha, y la pieza parece descuidada sin que nadie sepa señalar por qué.
Una sola medida
Elige un módulo base —ocho píxeles— y que todo sea múltiplo suyo: márgenes, huecos, alturas.
Un margen, no cinco
Todos los bloques arrancan en la misma vertical. Si uno se sale, que sea una decisión y no un descuido.
Columnas impares
Tres o cinco columnas dan composiciones con centro. Cuatro parten la pieza justo por la mitad.
La escala de 8, en la práctica
No hace falta memorizar nada: basta con no inventar números. Si el hueco entre dos párrafos es 16 y el que separa dos bloques es 40, la página respira sola. En cuanto aparece un 13 o un 27, la escala deja de funcionar y hay que decidir cada hueco a mano.
16 dentro de un bloque, 40 entre bloques. Con esas dos reglas ya no hay que decidir ningún hueco.
Tipografía que se lee
Una tipografía no se elige porque sea bonita en un cartel: se elige porque a diecisiete píxeles, con líneas de sesenta caracteres, sigue siendo cómoda a los veinte minutos. Un curso se lee mucho rato, y eso cambia por completo qué es una buena decisión.
- Interlineado de 1,3: las líneas se tocan.
- Líneas de ciento veinte caracteres: el ojo pierde el renglón al volver.
- Tres pesos distintos en la misma página.
- Un párrafo entero en mayúsculas.
- Interlineado entre 1,5 y 1,68 en el cuerpo.
- Entre sesenta y setenta y cinco caracteres por línea.
- Dos pesos: uno para leer y otro para destacar.
- Mayúsculas solo en etiquetas cortas.
El salto que hace jerarquía
Un titular no manda por estar en negrita: manda por ser bastante más grande que lo que hay debajo. Si el salto se queda corto, el ojo no sabe por dónde empezar y recorre la página de arriba abajo como si fuera una lista.
La proporción entre el titular y el cuerpo. Medida en dos cursos independientes, y en los dos daba lo mismo: entre 2,7 y 3 veces. Por debajo el titular no manda; por encima, grita.
Color con intención
Una paleta no es una colección de colores que pegan: es un reparto de papeles. Uno manda, uno acompaña, uno señala y el resto son neutros. En cuanto hay dos colores peleando por ser el protagonista, la pieza deja de tener jerarquía.
#8B3DFF
#00C4CC
#CCE1FF
#FFFFFF
Señala
#00C4CC
Es un número, y se mide. Texto normal necesita 4,5:1 contra su fondo; texto grande, 3:1. El fallo típico no es elegir mal un color: es poner un color de marca sobre una banda del mismo color de marca y no volver a mirarlo.
Un caso real. En un curso medido, el título de la cabecera daba 12,36:1 y el porcentaje de progreso, al lado, 1,27:1. Estaba ahí, ocupaba su sitio, y no se veía. Nadie dio ningún aviso porque no hay ninguno que dar: el navegador pinta lo que le pides.
Lo que se mira primero
Toda pieza tiene un recorrido, aunque no lo hayas decidido tú. Si no eliges qué se mira primero, lo elige el azar: lo más grande, lo más oscuro o lo que esté arriba a la izquierda. Diseñar la jerarquía es quitarle esa decisión al azar.
Elige una sola cosa
Un titular, un dato o una imagen. Si hay dos protagonistas, no hay ninguno.
Séparala del resto
El espacio en blanco señala mejor que una flecha, y no añade ruido a la pieza.
Baja el resto un tono
Destacar algo suele ser apagar lo demás, no subirle el volumen a eso.