Fiche pratique
Quand on travaille avec une IA qui crée des pages web, certains mots permettent d'aller beaucoup plus vite. Cette fiche rassemble 20 termes simples et utiles pour mieux décrire ce que vous voulez, gagner du temps et obtenir un résultat plus précis.
Les bases d'une page web
Cette première série de termes aide à désigner les grandes zones d'une page et la manière dont on s'y déplace.
Le hero est la grande zone d'ouverture en haut d'une page.
On y place souvent un titre fort, un texte court, un visuel et un bouton principal.
Garde le même visuel dans le hero que sur la page précédente.
Le header est le bandeau du haut, souvent fixe, avec le logo et le menu.
Il aide à se repérer et reste souvent identique sur plusieurs pages.
Fais un header plus fin et garde seulement Accueil, Toutes nos formations et Contact.
Le footer est la partie tout en bas de la page.
On y place souvent des liens utiles, des infos de contact, des mentions ou des ressources.
Ajoute dans le footer un lien vers la formation et un rappel de contact.
La navigation, c'est l'ensemble des liens qui permettent de se déplacer dans le site.
Elle peut être dans le header, dans un menu mobile ou dans un plan de page.
Ajoute une navigation simple en haut avec les ancres vers les sections.
Une section est un grand bloc de contenu ayant un sujet précis.
Une page peut contenir plusieurs sections : introduction, contenu, FAQ, contact, ressources.
Crée une section FAQ tout en bas de la page avec des questions claires.
Un bloc est un élément de contenu plus petit à l'intérieur d'une section.
Par exemple : une carte, un encart, une citation, un paragraphe mis en valeur.
Transforme chaque étape en bloc cliquable avec un titre et une phrase d'explication.
Une liste à puces sert à présenter plusieurs éléments de façon claire et rapide à lire.
Elle est utile pour des étapes, des idées, des avantages, des points à retenir.
Remplace ce paragraphe par une liste à puces plus lisible.
Un CTA est un bouton ou un lien qui pousse à faire une action.
Exemples d'actions : contacter, télécharger, lire la suite, demander un devis, revenir à l'accueil.
Ajoute un CTA plus visible pour découvrir la formation.
Une carte est un bloc visuel avec un fond, un cadre ou une ombre qui regroupe une information.
Les cartes sont souvent utilisées pour des articles, des ressources, des étapes ou des formations.
Affiche chaque fiche pratique sous forme de carte avec un visuel en haut.
Interactions et parcours
Ces termes sont utiles quand vous voulez faire ouvrir, fermer, déplacer ou guider l'utilisateur dans l'interface.
Un accordéon est un système de blocs que l'on ouvre et referme en cliquant.
C'est pratique pour montrer un titre et une phrase, puis n'afficher le détail qu'au clic.
Pour chaque étape, mets un titre et une phrase d'explication, et on clique pour voir le contenu.
Une pop-up ou modal est une fenêtre qui s'ouvre au-dessus de la page.
On l'utilise pour agrandir une image, afficher un QR code ou montrer une information ponctuelle.
Ajoute un bouton QR Code qui ouvre une pop-up avec le code à scanner.
Une ancre est un lien qui fait descendre directement à un endroit précis de la page.
Elle sert beaucoup pour un sommaire ou un bouton "aller à la FAQ".
Ajoute un lien qui amène directement vers la section FAQ en bas.
Responsive signifie qu'une page s'adapte correctement au téléphone, à la tablette et à l'ordinateur.
Le contenu se recompose pour rester lisible sans zoom ni débordement.
Assure-toi que le hero et les cartes restent propres sur mobile.
Design et lisibilité
Ici, on parle du style, de l'organisation visuelle et du confort de lecture. Ce sont souvent les termes qui changent le plus la qualité perçue d'une page.
La mise en page correspond à la façon dont les éléments sont disposés visuellement.
On parle ici de colonnes, de largeur, d'ordre des blocs, de respiration et d'équilibre général.
Revois la mise en page pour que le contenu soit plus élégant et plus lisible.
L'alignement indique comment les éléments se placent les uns par rapport aux autres.
Un mauvais alignement donne vite une impression brouillonne, même avec un bon contenu.
Réaligne les titres, les boutons et les cartes pour un rendu plus propre.
L'espacement, c'est l'air que l'on laisse entre les éléments.
Des espacements bien gérés rendent la page plus respirante, plus claire et plus professionnelle.
Ajoute un peu plus d'espace entre les paragraphes et les titres.
La typographie concerne le choix et l'usage des polices de caractères.
Elle influence fortement le style, la lisibilité et la personnalité de la page.
Choisis une typographie plus éditoriale et moins standard.
La palette de couleurs est l'ensemble des couleurs utilisées sur la page.
Elle doit être cohérente avec l'identité visuelle et aider à hiérarchiser les informations.
Propose une palette plus chaleureuse, avec un accent fort pour les boutons.
Un visuel est une image ou une illustration qui soutient le message de la page.
Il peut servir dans le hero, dans une carte, dans une vignette ou dans un item fermé.
Intègre ce visuel en début de ligne quand l'item est refermé.
Méthode de travail
Avant de passer au design final, certains mots servent à poser la structure et à gagner du temps dans les échanges.
Un wireframe est un schéma simple qui montre la structure d'une page avant le design final.
Il aide à valider l'organisation générale avant de travailler les couleurs, images et détails visuels.
Propose d'abord un wireframe simple avant de passer au design complet.