Comment les modèles d'IA apprennent la mise en page, la composition et la hiérarchie visuelle

Les systèmes d'IA peuvent reconnaître du texte, des images, des logos, des formes et d'autres éléments visuels avec une sophistication croissante. La compréhension du design graphique exige une seconde couche de raisonnement : le système doit aussi tenir compte de l'endroit où apparaissent les éléments, de la façon dont ils se rapportent les uns aux autres, de quels éléments sont visuellement dominants, des fonctions qu'ils remplissent et de la manière dont la composition change lorsque le support change.

Une affiche avec un titre au‑dessus d'une image de produit est structurellement différente d'une autre présentant les mêmes éléments côte à côte. Un grand CTA entouré d'espaces vides peut attirer plus l'attention qu'un petit lien secondaire, tandis qu'une petite étiquette peut néanmoins remplir un rôle fonctionnel important. Ces distinctions font partie de la compréhension de la mise en page.

Les modèles d'IA apprennent des aspects de la mise en page par le biais de représentations visuelles, d'annotations, d'objectifs d'entraînement, de signaux multimodaux et de grandes collections d'exemples. Ce qu'un modèle peut apprendre dépend fortement des propriétés que les données exposent. Une image aplatie contient des preuves visuelles, mais des données de conception structurées peuvent rendre explicite la géométrie, les relations, la hiérarchie et la structure des jeux de gabarits réutilisables.

Pour l'IA en design graphique, la question pratique n'est donc pas simplement de savoir combien de designs existent dans un jeu de données. Il s'agit de savoir quelles informations sur ces designs le modèle doit acquérir, et si le jeu de données d'IA fournit ces informations sous une forme que le processus d'entraînement peut utiliser.

Ces termes décrivent des propriétés liées mais distinctes d'une conception.

Les concepts se recoupent, mais ils ne sont pas interchangeables. Un modèle peut estimer les positions des éléments sans comprendre la hiérarchie. Il peut reproduire une composition familière sans déduire correctement la fonction de chaque composant. Un jeu de données solide sur la mise en page rend ces distinctions explicites lorsque la tâche visée l'exige.

La saillance visuelle est un signal relatif à l'attention. La hiérarchie visuelle est un concept de conception plus vaste qui peut inclure la proéminence, le sens et la fonction. Les deux ne devraient pas être réduits à une seule étiquette générique d'importance à moins que la méthodologie d'annotation ne définisse clairement ce qui est mesuré.

Une image décorative peut être visuellement dominante tout en restant secondaire sur le plan sémantique. À l'inverse, un petit élément de contrôle peut avoir une proéminence visuelle limitée mais une grande importance fonctionnelle. Pour l'entraînement des modèles, la taille ou le contraste peuvent être des caractéristiques observables utiles, mais elles ne doivent pas être automatiquement considérées comme une vérité de terrain quant à l'intention du concepteur, ni comme base fiable pour des ensembles de données de reconnaissance d'activités humaines.

Les architectures de vision modernes représentent l'entrée visuelle de différentes manières. Les Vision Transformers travaillent généralement avec des patches ou des tokens visuels, tandis que d'autres systèmes peuvent fonctionner sur des cartes de caractéristiques, des régions ou des embeddings multimodaux. Ces représentations apprises peuvent encoder des informations spatiales, mais elles n'exposent pas automatiquement des concepts tels que le titre (headline), l'appel à l'action (CTA), un groupe visuel ou une section.

Les pixels fournissent la couleur, la texture, les contours, les formes et d'autres indices de bas niveau. Une structure de plus haut niveau est déduite à partir de ces signaux par le modèle et ses objectifs d'entraînement. Une image rendue n'indique pas explicitement qu'une région particulière est un titre ni que deux éléments appartiennent au même groupe.

Les patchs ou jetons visuels permettent à un modèle de relier des régions locales au contexte environnant. L'information positionnelle peut aider à distinguer des éléments qui sont au-dessus, en-dessous, à côté ou à l'intérieur d'autres éléments. La segmentation peut décrire la région visible d'un composant plus précisément qu'une simple boîte, notamment lorsque les composants ont des formes irrégulières ou se chevauchent.

Informations positionnelles et spatiales

Les informations spatiales peuvent être représentées sous plusieurs formes, notamment par encodage positionnel, coordonnées bidimensionnelles, position relative, boîtes englobantes, ordre des composants et relations spatiales apprises. Le jeu de données peut fournir une géométrie explicite même si l'architecture du modèle n'expose pas un champ dédié appelé embedding spatial.

Les boîtes englobantes sont précieuses car elles fournissent une description compacte de l'emplacement et de l'étendue. Elles deviennent beaucoup plus informatives lorsqu'elles sont combinées à des étiquettes, des relations et une hiérarchie.

Les boîtes englobantes encodent la géométrie, pas la logique de conception

Une boîte englobante indique à un modèle où se trouve un élément et combien d'espace il occupe. Elle n'explique pas, à elle seule, pourquoi l'élément appartient à un autre composant, quel élément doit être lu en premier, si un objet est l'enfant d'un autre, ou quel élément bénéficie intentionnellement d'une priorité visuelle plus élevée.

Deux designs peuvent contenir des éléments aux coordonnées presque identiques tout en leur attribuant des rôles sémantiques ou fonctionnels différents. De même, le même ensemble de boîtes peut décrire des groupements, des ordres de lecture ou des systèmes de conception différents. Pour la compréhension de la mise en page, la géométrie est donc une base plutôt qu'une représentation complète.

Des éléments aux relations

Une représentation relationnelle décrit un design comme un système d'éléments et de connexions plutôt que comme un ensemble de rectangles indépendants.

• Nœuds : texte, image, logo, CTA, forme, arrière-plan et autres composants de conception.
• Attributs : coordonnées, dimensions, typographie, couleur et rôle sémantique.
• Relations : au-dessus, en-dessous, à l'intérieur, aligné avec, groupé avec, chevauchant et associé à.
• Hiérarchie : relations parent-enfant, de groupe et de section.

Cette représentation est particulièrement utile lorsqu'un modèle doit générer, éditer, récupérer ou évaluer des designs. Les recherches actuelles en conception graphique, telles que PKU PosterLayout, fournissent un exemple concret de génération de mise en page sensible au contenu dans lequel les relations entre les éléments et le canevas visuel sont prises en compte ensemble. LICA démontre également la valeur de la structure hiérarchique des composants, de la géométrie, de la typographie et des relations entre gabarits.

La composition décrit comment les éléments sont disposés pour créer une structure, de l'équilibre, de la mise en valeur et de la cohérence. Les modèles peuvent apprendre des motifs récurrents à partir d'un grand nombre d'exemples, mais le signal appris dépend du contenu des exemples et de ce que l'objectif d'entraînement demande au modèle de prédire.

• • Échelle
• • Alignement
• • Proximité
• • Contraste
• • Répétition
• • Symétrie ou asymétrie
• • Espaces blancs
• • Densité visuelle
• • Regroupement
• • Points focaux

Le même exemple visuel peut fournir différents signaux d'apprentissage selon la façon dont il est annoté et utilisé. Une capture d'écran ne comportant qu'une étiquette de catégorie fournit moins d'informations structurelles explicites qu'une capture incluant les frontières des composants, les rôles sémantiques et les relations. Toutefois, davantage d'annotations n'est pas automatiquement préférable. L'annotation augmente les coûts et peut introduire des incohérences ; le niveau approprié dépend donc de la capacité ciblée.

• Identité de l'élément : titre, image, logo, CTA, paragraphe, icône et autres types de composants.
• Géométrie : coordonnées, dimensions, régions, alignement et limites.
• Relations spatiales : au‑dessus, en dessous, à côté, à l'intérieur, aligné avec et groupé avec.
• Hiérarchie structurelle : relations parent‑enfant, de groupe et de section.
• Rôles sémantiques et fonctionnels : titre principal, informations d'accompagnement, action principale, action secondaire ou navigation.
• Relations système de design : composants réutilisables, familles de modèles et autres structures récurrentes lorsque la tâche l'exige.

Ces types d'annotation sont complémentaires plutôt que des étapes obligatoires. Un jeu de données de génération de mise en page peut nécessiter une géométrie précise sans étiquettes du système de design, tandis qu'une tâche de recherche de composants peut avoir besoin de rôles sémantiques mais pas d'une hiérarchie explicite.

Un jeu de données de design pour l'IA est une catégorie orientée vers un objectif plutôt qu'un format de jeu de données standardisé. Il peut combiner des images, des captures d'écran, du texte, des structures de mise en page, des annotations, des métadonnées de conception, des relations entre les composants, des informations de style et d'autres signaux en fonction de l'application.

Pour l'IA de design graphique, des jeux de données structurés peuvent préserver l'information de mise en page ainsi que les composants modifiables, la typographie, les métadonnées et les relations entre les éléments de conception. La distinction est importante, car un rendu aplati n'expose que l'apparence, tandis que les données sources modifiables peuvent révéler plus directement les relations et la structure des composants.

Les mises en page créées par des humains peuvent révéler de véritables conventions de production, une concentration stylistique, des artefacts historiques et des variations d'origine naturelle. Elles peuvent aussi contenir des duplications, une couverture inégale et un étiquetage incohérent.

Les mises en page générées par programme peuvent isoler des variables géométriques ou relationnelles et fournir des étiquettes structurelles exactes lorsque ces variables sont contrôlées par le générateur. Leur valeur dépend de la mesure dans laquelle la distribution générée ressemble aux conditions que le modèle doit traiter.

La comparaison pertinente n'est donc pas simplement humain contre synthétique. Il s'agit de savoir quelle couverture supplémentaire ou quel signal d'entraînement chaque source apporte à la tâche cible. Une stratégie mixte peut être utile lorsque les conceptions réelles apportent le réalisme et que des données synthétiques contrôlées comblent des lacunes de couverture spécifiques.

Définissez la distribution cible avant de décider combien d'exemples de chaque type de design recueillir. Un modèle de design graphique peut nécessiter des variations selon les rapports d'aspect, les langues, la densité de contenu, les secteurs d'activité, la typographie, les styles visuels, les familles de modèles et les types de contenu.

Les cas rares peuvent être importants sans pour autant être fréquents. Les données d'entraînement peuvent suréchantillonner des exemples difficiles ou stratégiquement importants, tandis qu'un ensemble d'évaluation destiné à représenter le déploiement devrait être conçu séparément de la distribution d'entraînement.

La couverture doit répondre à une question pratique : les conditions de design que le modèle doit gérer sont-elles réellement présentes dans les données ? C'est plus instructif que de traiter la diversité comme une liste de catégories.

La mise en page graphique est fortement influencée par la typographie, l'espace blanc et la mise en valeur. La taille de police, le poids, la longueur des lignes et le regroupement peuvent affecter la façon dont un spectateur parcourt un design. L'espace blanc peut séparer des groupes, renforcer la hiérarchie et créer un rythme visuel même s'il ne contient aucun objet explicite.

Ces propriétés sont en partie observables et en partie contextuelles. Un modèle peut mesurer la taille du texte ou le contraste, mais la hiérarchie voulue peut dépendre du contenu, des conventions de la marque et des choix du designer. Pour cette raison, des métriques telles que le plus grand élément de texte ou le contraste le plus fort doivent être considérées comme des indicateurs mesurables, sauf si des étiquettes sémantiques ou des jugements humains les établissent comme vérité de référence pour la hiérarchie.

La gestion des quasi-doublons requiert plus de discernement que la simple déduplication de fichiers. Un modèle redimensionné ou localisé peut contenir des informations sur la composition adaptative qui seraient perdues s'il était traité comme un doublon ordinaire.

Ne supprimez pas la lignée de conception au nom de la déduplication. Les versions liées peuvent compter parmi les exemples les plus instructifs pour apprendre la mise en page responsive et l'adaptation des modèles.

La mise en page responsive n'est pas simplement la même composition rendue à une autre résolution. Changer le canevas peut modifier les relations entre les éléments.

Des exemples appariés, tels qu'une publication carrée sur les réseaux sociaux, une story verticale et une bannière au format paysage, permettent à un modèle d'observer des transformations telles que :

• Déplacement d'éléments
• Réagencement du texte
• Modification du recadrage des images
• Redimensionnement des éléments
• Préservation de la hiérarchie
• Modification des espaces blancs

Un jeu de données de mises en page appariées peut donc soutenir des questions qu’une collection de captures d’écran sans lien ne peut pas résoudre : quelles propriétés restent stables selon les formats, quels éléments se déplacent, quelles relations sont préservées et quelles règles changent lorsque le canevas disponible évolue ?

Pour une plateforme de design, il s’agit d’une forme de preuve de première main particulièrement pertinente, car le redimensionnement et l’édition au niveau des modèles exposent des exemples concrets de composition qui changent selon les formats.

Une capture d'écran jamais vue n'est pas nécessairement une mise en page inconnue. Si des éléments apparentés appartenant à la même famille de gabarits apparaissent à la fois dans l'entraînement et dans l'évaluation, un modèle peut tirer parti d'une exposition à la même structure sous-jacente même si le fichier exact n'a jamais été vu.

Les partitions d'évaluation devraient donc vérifier les fuites entre :

Le fait de grouper des exemples liés avant de créer les ensembles d'entraînement, de validation et de test fournit une estimation de la généralisation plus crédible. Pour la recherche sur la mise en page, l'indépendance au niveau de la famille peut compter autant que l'unicité au niveau du fichier.

Il n'existe pas de jeu de données unique qui définisse l'ensemble de la compréhension des mises en page en design graphique. Diverses ressources mettent l'accent sur différentes formes de structure.

PKU PosterLayout est un exemple de recherche sur la mise en page d'affiches adaptée au contenu, dans laquelle des éléments de design prédéfinis sont modélisés par rapport à la surface disponible. LICA fournit un autre exemple de représentation en couches du design qui combine la hiérarchie des composants, la géométrie, la typographie et les relations entre gabarits.

GraphicDesignBench, publié en 2026, évalue les IA professionnelles du design graphique sur des tâches couvrant la mise en page, la typographie, les infographies, les gabarits et la sémantique du design, ainsi que l'animation. Ses dimensions d'évaluation incluent des mesures spatiales, perceptuelles, textuelles, sémantiques et structurelles. La leçon générale est que la génération de mise en page, la typographie et la génération structurelle restent des défis techniques distincts et ne devraient pas être réduites à un seul score.

1. Définir la capacité cible. Précisez si le modèle doit détecter des éléments, générer des mises en page, adapter des modèles, évaluer la qualité du design, reconstruire la structure ou comparer des compositions.

2. Définir l'ontologie d'annotation. Établissez le vocabulaire des composants, des rôles et des relations avant de commencer l'annotation à grande échelle.

3. Choisir la profondeur d'annotation. Décidez quelle combinaison d'identité, de géométrie, de relations, de hiérarchie, de rôles sémantiques et d'informations sur le système de conception est justifiée par la tâche.

4. Définir la couverture du domaine cible. Cartographiez les formats d'appareils, les rapports d'aspect, les langues, les familles de conception, les types de contenu et autres conditions que le système doit gérer.

5. Identifier les doublons et variantes apparentées. Séparez les véritables doublons des variantes responsives, localisées, redimensionnées et des variantes appartenant à une même famille de modèles.

6. Vérifier la provenance et les droits d'utilisation. Confirmez l'origine des données et les droits applicables à la collecte, à l'apprentissage automatique, à la modification et à la redistribution.

7. Mesurer la cohérence des annotations. Utilisez des directives claires et des procédures de contrôle de qualité afin que des exemples équivalents reçoivent des étiquettes comparables.

8. Créer des groupes d'évaluation dès le début. Réservez des exemples représentatifs et regroupez les familles de modèles associées avant d'attribuer les partitions d'entraînement, de validation et de test.

9. Documenter la filiation du jeu de données. Conservez des identifiants permettant, le cas échéant, de retracer les variantes apparentées, les ressources sources et les familles de modèles.

10. Examiner le décalage de distribution au fil du temps. Une version d'un jeu de données ne dérive pas en elle-même ; l'environnement qu'elle représente peut changer.

Une version d'un jeu de données reste fixe, mais le domaine cible peut évoluer en raison de nouveaux formats d'appareils, de langues, de conventions de conception ou d'exigences du produit. La question pratique est donc de savoir si le jeu de données actuel représente toujours les conditions dans lesquelles le modèle est censé fonctionner.

La couverture et le biais sont liés, mais ne sont pas identiques. Un jeu de données peut présenter une faible couverture sans engendrer un biais systématique mesurable, et un déséquilibre entre les classes ou les modèles ne constitue pas automatiquement une preuve d'un biais au sein du jeu de données. Définissez la population cible et les critères d'échec avant de tirer cette conclusion.

L'évaluation d'un modèle doit correspondre à la capacité mesurée. Pour la détection de composants, des métriques de détection sont appropriées. Pour la segmentation, des mesures basées sur le recouvrement peuvent quantifier la précision des contours. Les tâches axées sur les relations peuvent tester si le modèle prédit correctement des connexions spatiales telles que au-dessus de, en dessous de, à l'intérieur de, adjacent à, aligné avec ou regroupé avec.

Les systèmes génératifs de design graphique peuvent nécessiter une combinaison d'évaluations structurelles et perceptuelles, incluant :

• Précision spatiale
• Recouvrement et alignement
• Fidélité du texte
• Validité structurelle
• Alignement sémantique
• Typographie
• Préférence humaine
• Contraintes spécifiques à la tâche
• Qualité de l'animation, le cas échéant

Il n'existe pas de métrique unique et universelle pour évaluer la compréhension du design. Un résultat visuellement attrayant peut néanmoins ne pas satisfaire des exigences structurelles, tandis qu'un résultat structurellement exact peut être esthétiquement faible. L'évaluation doit refléter la capacité que le modèle est censé acquérir.

Une grande collection de modèles étroitement liés peut contenir moins de variations structurelles indépendantes qu’un jeu de données plus petit, couvrant une gamme plus large de familles de mise en page et de relations. La taille du jeu de données, le nombre de modèles indépendants, la profondeur structurelle et la couverture du domaine cible doivent donc être indiqués séparément.

Le volume brut peut aussi masquer les duplications et les fuites. Si la même famille de modèles apparaît à plusieurs reprises dans différentes variantes, le décompte peut sembler impressionnant alors que la quantité d’informations de mise en page réellement indépendantes reste limitée.

Ces modes de défaillance constituent des catégories de diagnostic utiles, car une erreur de modèle n'est pas toujours due à l'architecture du modèle. Le jeu de données peut ne pas comporter la relation requise, surreprésenter une famille de templates, ou employer une étiquette qui ne correspond pas clairement à la capacité mesurée.