Editorial Craft Bible
Iconografía y pictogramas
Inicio Infografía editorial Iconografía y pictogramas
Infografía editorial

Iconografía y pictogramas

10 reglas Noun Project icon guidelines · Google Material iconographyIsotype (picture language), Wikipedia · Gerd Arntz Web Archive, gerdarntz.orgGoogle Material iconography · Noun Project grid guidelinesNoun Project icon guidelines · ColorBrewer (encoding vs decoration)
69

Iconografía y pictogramas

10 reglas
736

Un 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.

Correcto
Mismo trazo, mismo radio: una sola voz visual.
Evitar
Fino, relleno, grueso, muy redondeado: se lee como cuatro sets.
Noun Project icon guidelines · Google Material iconography
737

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).

Correcto
3 millones · 1 figura = 1M
Mismo tamaño repetido: la cifra es contable.
Evitar
"3× más" · el área crece 9×
Triplicar la altura multiplica el área ~9×: miente.
Isotype (picture language), Wikipedia · Gerd Arntz Web Archive, gerdarntz.org
738

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.

Correcto
Forma sintetizada sobrevive hasta 17px.
Evitar
Detalle interno fino colapsa en mancha a 17px.
Google Material iconography · Noun Project grid guidelines
739

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.

Correcto
Línea neutra + un acento: la codificación queda en el dato.
Evitar
Cinco matices sin relación pelean con el color del gráfico.
Noun Project icon guidelines · ColorBrewer (encoding vs decoration)
740

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.

Correcto
"Envío gratis" → camión de reparto
El pictograma nombra la idea específica.
Evitar
Foco, engranaje, apretón: reconocible pero vacío.
Noun Project editorial iconography · Nigel Holmes, explanatory pictograms
741

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".

Correcto
Montaña y hoja se leen solo por la silueta.
Evitar
Rellenos, quedan como caja y mancha ambiguas.
Gerd Arntz Web Archive · Gestalt figure-ground · Eye Magazine, Talking Pictures
742

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.

Correcto
Sección 1
Sección 2
Sección 3
Mismo icono de cliente en todo: una palabra estable.
Evitar
Sección 1
Sección 2
Sección 3
Tres avatares para un concepto: la palabra cambia.
Isotype (picture language), Wikipedia · Susan Kare, system iconography
743

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.

Correcto
Ubicación
Icono ajustado a ojo pesa igual que la palabra.
Evitar
Ubicación
Forzado a la altura de mayúscula, se encoge y hunde.
Optical alignment principles · Refactoring UI (icon and text balance)
744

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.

Correcto
Malla y padding compartidos: mismo tamaño óptico.
Evitar
Distinto padding y escala: los tamaños saltan.
Google Material iconography (keyline grid) · Noun Project grid guidelines
745

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.

Correcto
3.5 de cada 5 usuarios
Figuras llenas, media y vacías: la proporción es tangible.
Evitar
70% · barra abstracta, olvidable
Una barra de porcentaje pierde la escala humana.
Isotype method (Neurath & Arntz) · McCandless, Information is Beautiful