Editorial Craft Bible
Distribución y jerarquía del contenido
Inicio Infografía editorial Distribución y jerarquía del contenido
Infografía editorial

Distribución y jerarquía del contenido

10 reglas Müller-Brockmann, Grid Systems · Tufte, data-ink ratioLey de proximidad de la Gestalt (Wertheimer, Koffka)Refactoring UI · Bringhurst, Elements of Typographic StyleMüller-Brockmann, Grid Systems · legibilidad por distancia de lectura
67

Distribución y jerarquía del contenido

10 reglas
714

Reparte el 80% del espacio en el 20% de los datos

El 20% de datos más importante merece cerca del 80% de la superficie; el resto se encoge en bloques secundarios o se elimina. Repartir el espacio por igual entre todos los datos nivela la jerarquía por abajo y nada se lee como el punto central. Decide qué uno o dos datos cargan el argumento y deja que dominen físicamente la composición.

Correcto
Un bloque hero domina la superficie; el resto apoya.
Evitar
Todos los bloques iguales: sin punto de entrada ni ranking.
Müller-Brockmann, Grid Systems · Tufte, data-ink ratio
715

Agrupa por proximidad antes que por color

Los elementos relacionados van físicamente juntos: mantén el gap dentro de un grupo pequeño (8-12px) y el gap entre grupos claramente mayor (24-32px). La proximidad de la Gestalt se lee más rápido que el color, así que el espaciado apretado-vs-suelto forma clusters antes de que el ojo registre el matiz. Cuando todo va con un gap uniforme, el lector ve un campo indiferenciado en vez de conjuntos estructurados.

gap dentro del grupo: 8-12px · gap entre grupos: 24-32px
ratio recomendado ≥ 2.5×
Correcto
Gaps diferenciados se leen como tres grupos claros.
Evitar
Un gap uniforme: no emerge ningún grupo.
Ley de proximidad de la Gestalt (Wertheimer, Koffka)
716

Limita la jerarquía a tres niveles visuales

Da a la pieza exactamente tres escalones: hero (el dato o titular principal), secundario (subtítulos y stats de apoyo) y terciario (notas, fuente, letra pequeña). Un cuarto nivel obliga al lector a recalibrar qué significa cada rango y rompe el escaneo. Tres escalones cubren casi cualquier infografía editorial, y cada uno gana su distinción por tamaño, peso y color a la vez.

Correcto
87% Retención a 12 meses Fuente: encuesta interna, 2025 · n=1,240
Tres escalones inequívocos: hero, apoyo, nota.
Evitar
87% Retención a 12 meses Fuente 2025 · n=1,240
Cuatro niveles: el ojo re-ordena sin parar, el escaneo se traba.
Refactoring UI · Bringhurst, Elements of Typographic Style
717

Fija la densidad por la distancia de lectura, no por gusto

Calcula la densidad máxima según a qué distancia se lee la pieza. Una hoja en mano (30-40 cm) tolera más detalle y texto de apoyo; un cartel de pared (2-3 m) debe bajar a 3-5 elementos visibles con el dato hero a una altura de x de 30-40 mm o más. Saturar un cartel de pared con nueve datos diminutos lo vuelve ilegible a su propia distancia de uso.

Correcto
Cartel de pared · 2-3 m
3.2x
Pocos elementos grandes sobreviven a los 2-3 m.
Evitar
Cartel de pared · 2-3 m
Nueve datos diminutos: ilegibles a distancia de pared.
Müller-Brockmann, Grid Systems · legibilidad por distancia de lectura
718

Da a la composición un ancla dominante

Cada infografía necesita un punto de entrada claro: el gráfico más grande, el número más grande, el color más saturado. Si dos o más elementos compiten por ser el ancla, el ojo no sabe dónde empezar y rebota. Elige el único elemento que carga el argumento, hazlo inequívocamente dominante y degrada lo demás para que la lectura tenga un inicio evidente.

Correcto
1
Un ancla clara; el ojo sabe dónde aterrizar.
Evitar
?
?
Dos anclas iguales: el ojo rebota, sin punto de entrada.
Müller-Brockmann, Grid Systems · principios Gestalt
719

Usa el aire como jerarquía, no como relleno

El espacio en blanco alrededor del dato hero debe ser proporcionalmente mayor que alrededor de los bloques secundarios, mínimo 1.5× el margen de un bloque secundario. El aire comunica importancia tanto como el tamaño: una cifra aislada con espacio para respirar se lee como el titular incluso al mismo cuerpo. Rellenar todo con el mismo padding aplana la jerarquía que el espacio debía construir.

Correcto
42%
18%
11%
El aire generoso del hero señala su rango por sí solo.
Evitar
42%
18%
11%
Mismo padding en todo: el hero pierde su peso.
Müller-Brockmann, Grid Systems · Refactoring UI
720

Maqueta las piezas densas sobre retícula modular

En cuanto una pieza tiene 8+ datos (fichas técnicas, reportes de una página), colócalos sobre una retícula de columnas de 4, 6 u 8 con módulos consistentes; nunca posiciones bloques a ojo pasando de 5 elementos. La falta de alineación es lo primero que nota el lector, antes que el contenido, así que una retícula desalineada se lee descuidada aunque cada dato sea correcto. Los bordes y líneas base compartidos hacen que la información densa se sienta como un sistema.

Correcto
Columnas y líneas base compartidas: se lee como sistema.
Evitar
Puestos a ojo: los bordes no cuadran, se lee descuidado.
Müller-Brockmann, Grid Systems in Graphic Design (1981)
721

Prioriza los datos antes de abrir el editor

Haz un ranking escrito de cada dato antes de maquetar nada: 1 = imprescindible, 2 = útil, 3 = descartable. Priorizar durante la maquetación, tratando de hacerle espacio a todo, es como se inflan las piezas. Si la composición no cabe entera, lo que se va es el ranking 3, y esa decisión ya estaba tomada en papel, no improvisada bajo deadline.

Correcto
1Dato imprescindible 2Dato útil 3Descartable, fuera
Rankeado en papel primero; el 3 se corta antes de maquetar.
Evitar
1Imprescindible 1Imprescindible 1Imprescindible
Todo «imprescindible»: no se corta nada, la pieza se infla.
Tufte, data-ink ratio · disciplina editorial de priorización
722

Si quitar un bloque no cambia la historia, córtalo

Prueba cada bloque quitándolo: si el argumento central sobrevive sin él, ese bloque nunca perteneció a esta pieza. Muévelo a una pieza secundaria o elimínalo del todo. Es disciplina editorial, no solo de diseño, y es la vía más rápida de subir una composición de saturada a segura. El lector recuerda una pieza enfocada; una completa se olvida.

Correcto
Argumento central
descartable, fuera
El bloque descartable se va; la historia queda intacta.
Evitar
Todo bloque guardado «por si acaso»: saturado, sin foco.
Tufte, chartjunk · disciplina de edición
723

Limita los bloques de texto de apoyo a 40-50 palabras

Los párrafos explicativos en una infografía son notas al pie visuales, no artículos. Limita cada bloque de apoyo a 40-50 palabras; si un bloque necesita más de 50 para explicarse, la infografía no está comunicando y el texto la está sustituyendo. El texto largo junto al dato compite con el gráfico por la atención y ambos pierden. Reescribe el visual en vez de rellenar el pie.

Correcto

El envío gratis triplicó la conversión en el segundo trimestre. El efecto se concentró en carritos sobre 500 pesos.

18 palabras
Una nota al pie ajustada: apoya el dato, no lo sustituye.
Evitar

El envío gratis triplicó la conversión durante el segundo trimestre del año, un efecto que se concentró sobre todo en los carritos con valor superior a los quinientos pesos, aunque también se observó un incremento moderado pero consistente en los tickets de menor valor a lo largo de todas las categorías del catálogo, según el análisis interno del equipo de datos.

61 palabras
Un párrafo sustituyendo al gráfico: el visual falló.
Tufte, chartjunk · Cairo, The Functional Art