Produire des visuels originaux pour les pages pas à pas

Une page pas à pas se juge à ce que les images correspondent à ce que le lecteur a sous les yeux, et les images de banque ou les visuels marketing de l'éditeur échouent immédiatement à ce test. Les équipes prennent bien leurs propres captures, puis ne consignent rien sur la façon ni l'endroit où elles ont été prises, si bien qu'au premier changement d'interface la page ne peut plus être réparée sans refaire tout le parcours. La capture est la partie bon marché ; la méthode existe pour rendre la seconde capture bon marché elle aussi.

Le fichier de compétence

---
name: original-visuals-for-procedural-content
description: À utiliser lorsqu'une page procédurale repose sur des captures d'écran ou des schémas qui doivent être exacts aujourd'hui et réparables quand l'interface change.
---

# Produire des visuels originaux pour les pages pas à pas

Une page pas à pas se juge à ce que les images correspondent à ce que le lecteur a sous les yeux, et les images de banque ou les visuels marketing de l'éditeur échouent immédiatement à ce test. Les équipes prennent bien leurs propres captures, puis ne consignent rien sur la façon ni l'endroit où elles ont été prises, si bien qu'au premier changement d'interface la page ne peut plus être réparée sans refaire tout le parcours. La capture est la partie bon marché ; la méthode existe pour rendre la seconde capture bon marché elle aussi.

## Ce qu’il vous faut d’abord

- l'accès au produit ou au processus réel, dans la version que décrit la page
- un dispositif de capture fixe : une largeur de fenêtre, un niveau de zoom, un thème, un compte de démonstration
- la liste d'étapes validée à laquelle les visuels doivent correspondre, arrêtée avant le début des captures
- un endroit où stocker les fichiers sources éditables, pas seulement les images exportées

## Méthode

1. Fixez l'environnement de capture avant de prendre quoi que ce soit : une largeur, un zoom, un thème, un compte. Des captures prises à des largeurs différentes ne peuvent pas être refaites de façon cohérente et donnent l'impression de venir de produits différents.
2. Remplissez le compte de démonstration avec des données plausibles. Les états vides et les faux textes évidents font douter le lecteur du parcours, et des données clients réelles ne peuvent pas être publiées du tout.
3. Capturez chaque étape, y compris celles qui semblent trop évidentes pour en mériter une. La capture manquante est toujours l'étape où les lecteurs bloquent, et revenir pour une seule image coûte plus cher que de la prendre maintenant.
4. Annotez sur un calque séparé et conservez le fichier source. Des flèches aplaties dans un export imposent une recapture complète dès qu'un libellé se décale de dix pixels.
5. Recadrez sur la zone qui compte plutôt que sur la fenêtre entière. Les captures plein écran deviennent illisibles une fois réduites sur un téléphone, or c'est là que se lit l'essentiel du trafic pas à pas.
6. Rédigez un texte alternatif décrivant ce que le lecteur doit voir plutôt que nommant le fichier. « Onglet Facturation avec le forfait annuel sélectionné » est utile ; « capture des réglages » ne l'est pas.
7. Consignez la date de capture, la version du produit et le compte utilisé à côté de la page. Sans cette trace, le rafraîchissement devient un nouveau projet au lieu d'une simple retouche.

## Ce que ça produit

Un jeu de visuels annotés et versionnés, avec fichiers sources éditables, textes alternatifs rédigés, et une trace de capture nommant la version du produit et la date.

## Là où ça dérape

- Ne capturer qu'à une large fenêtre de bureau, si bien que les images sont illisibles sur les téléphones que la plupart des lecteurs utilisent
- Publier des captures contenant des données de comptes réels ou des noms internes, un problème de confidentialité qui survit à la page
- Aplatir les annotations dans l'export et jeter le source, si bien que le moindre ajustement d'interface impose de recapturer toute la séquence

---

Extrait de la bibliothèque de compétences QuQi - https://www.quqi.io/fr/skills/original-visuals-for-procedural-content

Ce qu’il vous faut d’abord

• l'accès au produit ou au processus réel, dans la version que décrit la page
• un dispositif de capture fixe : une largeur de fenêtre, un niveau de zoom, un thème, un compte de démonstration
• la liste d'étapes validée à laquelle les visuels doivent correspondre, arrêtée avant le début des captures
• un endroit où stocker les fichiers sources éditables, pas seulement les images exportées

Méthode

1. 01 Fixez l'environnement de capture avant de prendre quoi que ce soit : une largeur, un zoom, un thème, un compte. Des captures prises à des largeurs différentes ne peuvent pas être refaites de façon cohérente et donnent l'impression de venir de produits différents.
2. 02 Remplissez le compte de démonstration avec des données plausibles. Les états vides et les faux textes évidents font douter le lecteur du parcours, et des données clients réelles ne peuvent pas être publiées du tout.
3. 03 Capturez chaque étape, y compris celles qui semblent trop évidentes pour en mériter une. La capture manquante est toujours l'étape où les lecteurs bloquent, et revenir pour une seule image coûte plus cher que de la prendre maintenant.
4. 04 Annotez sur un calque séparé et conservez le fichier source. Des flèches aplaties dans un export imposent une recapture complète dès qu'un libellé se décale de dix pixels.
5. 05 Recadrez sur la zone qui compte plutôt que sur la fenêtre entière. Les captures plein écran deviennent illisibles une fois réduites sur un téléphone, or c'est là que se lit l'essentiel du trafic pas à pas.
6. 06 Rédigez un texte alternatif décrivant ce que le lecteur doit voir plutôt que nommant le fichier. « Onglet Facturation avec le forfait annuel sélectionné » est utile ; « capture des réglages » ne l'est pas.
7. 07 Consignez la date de capture, la version du produit et le compte utilisé à côté de la page. Sans cette trace, le rafraîchissement devient un nouveau projet au lieu d'une simple retouche.

Ce que ça produit

Un jeu de visuels annotés et versionnés, avec fichiers sources éditables, textes alternatifs rédigés, et une trace de capture nommant la version du produit et la date.

Là où ça dérape

• Ne capturer qu'à une large fenêtre de bureau, si bien que les images sont illisibles sur les téléphones que la plupart des lecteurs utilisent
• Publier des captures contenant des données de comptes réels ou des noms internes, un problème de confidentialité qui survit à la page
• Aplatir les annotations dans l'export et jeter le source, si bien que le moindre ajustement d'interface impose de recapturer toute la séquence

Utiliser cette compétence dans votre propre IA

Le fichier téléchargé est un simple markdown dont l'en-tête porte le nom et le déclencheur. Quand un assistant sait charger des compétences tout seul, c'est cet en-tête qu'il lit pour décider que celle-ci s'applique.

Plus dans Production de contenu