Este principio implica priorizar lo que resulta relevante y funciona como un filtro que ordena la información. Es la organización intencional de los elementos gráficos para indicarle al estudiante qué debe observar primero, qué después y qué es secundario, con la finalidad de que su cerebro procese la información con menor esfuerzo. Es posible jerarquizar por tamaño, posición, contraste, color, luminosidad, agrupación y mediante los espacios en blanco del diseño. A continuación, se presentan las principales jerarquías visuales:

Jerarquía arriba / abajo:

Se atribuye una mayor importancia y autoridad a los elementos situados en la parte superior, desplazando la atención hacia abajo de forma decreciente. 

En un contenido didáctico, en el tercio superior denominado zona de impacto se ubican los elementos más importantes, como el título o las ideas fuerza con la finalidad de situar el tema y captar la atención del estudiante. En el centro el contenido principal y los gráficos de desarrollo. Y en la zona inferior las conclusiones, para fijar el conocimiento, y las llamadas a la acción.

Jerarquía grande / pequeño:

Es un principio compositivo que organiza la información según su tamaño para guiar la atención del espectador. Lo importante es más grande y lo secundario más pequeño. 

En contenidos didácticos, mediante el tamaño se activa un proceso de jerarquización y se establecen niveles de importancia que facilitan la comprensión. En entornos digitales es muy relevante porque el estudiante no lee linealmente, sino que explora visualmente.

 Jerarquía centrado / periférico:

Se organiza la información de manera que el elemento principal esté situado en el centro y los elementos secundarios en la periferia. El centro concentra la atención y la periferia contextualiza, amplia y complementa. 

En entornos digitales se utiliza para destacar lo importante y organizar los conceptos, ya que la lectura converge hacia el centro tras el escaneo inicial.

Jerarquía de lo separado frente a lo grupal:

Primero se identifican los elementos separados y posteriormente el conjunto. Lo apartado se percibe como más importante y lo agrupado como secundario. 

En el diseño de contenidos educativos esta jerarquía se usa para destacar las ideas principales. También para agrupar información relacionada, de manera que conceptos que forman parte de un mismo tema aparezcan juntos.

Jerarquía de lo brillante:

Organiza la información destacando los elementos que poseen mayor luminosidad, intensidad o brillo, frente a otros más apagados. Lo brillante capta la atención y lo menos luminoso pasa a un segundo plano. 

En contenidos digitales, esta jerarquía se utiliza destacando con un brillo alto los elementos principales, con un brillo medio (más saturado) el cuerpo del contenido y con un brillo apagado la información de soporte.

Jerarquía de color:

Como se ha puesto de manifiesto en el apartado sobre las  armonías cromáticas, mediante la jerarquía de color es posible captar la atención del estudiante de forma casi automática. Esta jerarquía se basa en los principios de la Psicología de la Gestalt, en concreto, en la idea de que lo diferente destaca sobre lo homogéneo. 

En un material educativo cada color debe desempeñar un rol concreto. Por ejemplo, se puede utilizar un color dominante para el título, uno secundario para las explicaciones y un tercero (más contrastado) para destacar elementos clave y advertencias. Esta jerarquía permite al estudiante “leer” el contenido sin procesarlo en profundidad.

Para OpenAI 2026: “La coherencia visual es el principio que garantiza que todos los elementos de un material (tipografía, color, iconografía, composición, estilo de imágenes, etc.) mantienen una relación lógica, consistente y reconocible entre sí a lo largo del tiempo o del recurso didáctico.” Como otros muchos aspectos de este capítulo, la coherencia no es una cuestión meramente estética, sino cognitiva y pedagógica. Esto se debe a que minimiza la carga cognitiva, facilita el reconocimiento de patrones para localizar información rápidamente y consolida la jerarquía de los contenidos. Esto permite que el estudiante se concentre en el contenido y no en descifrar cómo está organizada la información. 

La coherencia visual en el diseño educativo se consigue mediante: 

• Tipografía: Uso consistente de familias, tamaños y estilos. Por ejemplo, siempre el mismo tamaño para títulos de nivel 1.
• Color: Aplicación sistemática de una paleta. Por ejemplo, un color para conceptos clave, otro para conclusiones.
• Composición: Repetición de estructuras: disposición de bloques, márgenes y columnas.
• Iconografía y gráficos: Mantener un mismo estilo visual: lineal, plano, realista, etc.
• Lenguaje visual: Evitar mezclar estilos contradictorios. Por ejemplo, ilustraciones infantiles con gráficos corporativos.

Estos elementos garantizan la consistencia del material didáctico. Al mantener un mismo color para las definiciones, iconos fijos para las actividades y una estructura de pantalla uniforme, se crea un entorno de aprendizaje intuitivo que guía al estudiante sin distracciones. Los psicólogos de la Gestalt denominaron a este principio la ley de la semejanza que describe por qué los estudiantes perciben como relacionados elementos que se parecen entre sí e interpretan su estructura sin un esfuerzo consciente. En otras palabras, la coherencia visual es la estrategia de diseño y la ley de la semejanza es el mecanismo perceptivo que la hace funcionar.

Otro concepto importante es la ley de las expectativas satisfechas. No solo es necesario que los elementos se parezcan, sino que se comporten como el estudiante espera que lo hagan. Cuando una acción produce consecuencias positivas, se refuerza y tiende a repetirse. Esta ley provoca coherencia formal —los mismos elementos, o categorías de elementos, ocupan posiciones previsibles dentro de la estructura del diseño— y coherencia funcional —los mismos elementos, o tipos de elementos, ejecuten siempre las mismas operaciones o categorías de operaciones—. Las expectativas rotas provocan que el estudiante se detenga, dude y reinterprete, provocando una mayor carga cognitiva.

La imagen que se presenta a continuación combina todo lo tratado en este capítulo respecto a la tipografía, color y composición. Tiene 2 partes: Cabecera con título, subtítulo e imagen; y cuerpo con una retícula basada en 2 columnas y una imagen de fondo que actúa como cierre de la composición. 

Se utilizan 2 tipografías que se jerarquizan con base en el tamaño y el peso. Utiliza una paleta de color acromática basada en una escala de grises con la finalidad de contrastar con el color de la fotografía sin interferir.