Iconografía y pictogramas
Iconografía y pictogramas
10 reglasUn sistema, un grosor de trazo, un estilo
Todos los iconos de una pieza comparten grosor de línea (o relleno sólido, nunca ambos mezclados), radio de esquina y ángulo de corte. Elige un solo lenguaje de construcción, por ejemplo trazo de 1.75px sobre malla de 24px, y sostenlo en todo el set. Un icono que rompe la familia se lee como error, no como variedad.
Principio ISOTYPE: repite el icono, nunca lo escales
Para mostrar una magnitud con pictogramas, repite un icono a tamaño constante en cuadrícula (por ejemplo cada figura = 1 millón), nunca agrandes o encojas un solo icono para decir "más". El ojo no mide con precisión el área de una forma compleja, así que escalar distorsiona la cifra. Es la regla central del método Neurath y Arntz (Viena, 1925 a 1934, unos 4000 pictogramas).
Prueba la legibilidad al tamaño mínimo real
Prueba cada icono al tamaño real más pequeño en que aparecerá: 16-20px en una ficha técnica, 8-10mm en un cartel de pared visto de cerca. Si un detalle se pierde o se vuelve mancha, simplifica la forma, no adelgaces el trazo. Los iconos se dibujan para el tamaño peor, no para el que ves en el editor.
Dos o tres colores por icono, atados a la paleta
Mantén cada icono en dos o tres colores tomados de la paleta de la pieza. Los iconos multicolor decorativos compiten con la codificación de color de los propios datos (ver reglas de color); reserva el acento pleno solo para el icono que es un dato, como una categoría codificada por color. Un set arcoíris le roba la señal a los números.
Evita el cliché de banco de iconos
Un foco para "idea", un engranaje para "proceso", un apretón de manos para "acuerdo": son ruido reconocible, vacío de significado específico. Diseña o adapta un pictograma que represente el objeto o la acción real de tu contenido, no el símbolo genérico de stock. Si el icono podría ir igual en cualquier otra diapositiva, no está cargando información.
Reconocible en silueta (la prueba de la sombra)
Un buen pictograma se identifica solo por su silueta rellena, sin detalle interno, como una sombra chinesca. Si necesitas líneas internas para que se entienda, la forma no está suficientemente sintetizada: retrabaja el contorno hasta que la silueta cargue el significado. Es el principio Arntz de abstracción máxima hacia una forma "objetiva".
Una idea, un icono, consistente en toda la serie
Si "cliente" es una silueta de persona en la sección 1, debe ser la misma silueta en la sección 3, y en toda pieza relacionada de la campaña. Reutilizar el icono exacto de un concepto construye el "vocabulario" ISOTYPE de la pieza; cambiar de avatar a mitad del documento obliga al lector a reaprender qué significa cada símbolo y erosiona la memoria visual acumulada.
Alinea ópticamente, no matemáticamente, con el texto
Los pictogramas rara vez tienen el mismo peso visual que el texto contiguo, así que forzar una altura idéntica en píxeles hace que el icono se vea diminuto o pesado junto a su etiqueta. Ajusta tamaño y posición vertical a ojo hasta que el icono "se sienta" del mismo peso que la palabra, normalmente un poco mayor que la altura de mayúscula y centrado en la masa de la minúscula. El balance óptico gana a igualar la caja.
Dibuja cada icono en la misma malla de construcción
Diseña todo el set sobre una sola malla base, por ejemplo 24×24 o 32×32px, con el mismo padding interno (un margen keyline de 2px es común). Una malla compartida garantiza que un círculo, un cuadrado y una forma alta se lean del mismo tamaño óptico al ponerlos en fila o en cuadrícula de repetición. Sin ella, un icono a sangre se ve mayor que uno con aire alrededor.
Usa el pictograma como unidad de medida
Cuando el dato lo permite, cuenta en pictogramas parciales (por ejemplo 3.5 de 5 iconos de "persona" rellenos) en vez de una barra abstracta: una cantidad humana y tangible se recuerda mejor que una barra numérica. Hazlo solo si la fracción queda visualmente clara, no cortes un pictograma complejo a la mitad si la silueta se vuelve ambigua. Deja las unidades vacías como contorno para que la escala total sea legible.
- R-736 Un sistema, un grosor de trazo, un estilo
- R-737 Principio ISOTYPE: repite el icono, nunca lo escales
- R-738 Prueba la legibilidad al tamaño mínimo real
- R-739 Dos o tres colores por icono, atados a la paleta
- R-740 Evita el cliché de banco de iconos
- R-741 Reconocible en silueta (la prueba de la sombra)
- R-742 Una idea, un icono, consistente en toda la serie
- R-743 Alinea ópticamente, no matemáticamente, con el texto
- R-744 Dibuja cada icono en la misma malla de construcción
- R-745 Usa el pictograma como unidad de medida