Résumé

Ce générateur de wireframe avec l'IA vous permet de bloquer la mise en page d'une page avant d'ouvrir l'éditeur de blocs WordPress. Choisissez un type de page tel que page d'accueil, article de blog, tableau de bord, page produit, portfolio ou formulaire de contact, sélectionnez un style de mise en page (bandes empilées, grille de cartes ou colonne latérale plus principale), et réglez le nombre de sections de deux à huit. L'outil redessine des boîtes réelles et proportionnées en direct, en suivant des conventions UX établies comme l'ordre de lecture en F et en Z, afin que la maquette que vous créez se lise déjà comme une page, pas comme une supposition.

Générateur de wireframe IA : créer une mise en page en quelques secondes

Choisissez un type de page, un style de mise en page et un nombre de sections. Une vraie maquette basse fidélité se redessine en direct, avant de poser un seul bloc Gutenberg.

Créer un brouillon

Esquissez votre mise en page

Choisissez le type de page que vous construisez, un style de mise en page pour la zone contenu, et le nombre de sections dont elle a besoin. Les boîtes ci-dessous se mettent à jour à chaque modification.

Aperçu du wireframe uniquement. Les boîtes représentent des régions de mise en page, pas le contenu final ou les images.

Comment ce wireframe reste honnête

Construit sur des conventions, pas sur des suppositions

Ordre de lecture en F et en Z

Les bandes de contenu empilé suivent le pattern F que la recherche oculométrique continue de trouver sur les pages chargées en texte. Un héros centré avec le titre, le sous-titre et l'appel à l'action en rangée suit le pattern Z à la place, la forme que l'œil du lecteur trace sur un écran clairsemé et de décision première.

Présets de type de page fondés sur des conventions réelles

Un tableau de bord garde une colonne de navigation latérale persistante peu importe ce qui change, la façon dont les panneaux d'administration sont vraiment construits. Un article de blog apparie une colonne d'article principale avec une barre latérale. Une page produit se divise en galerie et boîte d'achat au-dessus de la ligne de flottaison, puis empile les sections de détail en dessous.

Mathématique de grille qui répond vraiment

La mise en page de la grille utilise CSS auto-fill pour que les cartes se réarrangent d'elles-mêmes à mesure que le nombre de sections change, et chaque arrangement, grille, empilé ou barre latérale, s'effondre en une colonne sous environ 480 pixels de largeur. Pas d'ajustement manuel des points d'arrêt à vérifier sur un téléphone.

Trois réglages, un brouillon

  1. 1

    1. Choisissez le type de page

    Page d'accueil, article de blog, tableau de bord, page produit, portfolio ou formulaire de contact. Cela définit l'en-tête, la forme du héros et le pied de page pour correspondre à ce que ce type de page a vraiment besoin.

  2. 2

    2. Choisissez un style de mise en page

    Bandes empilées, une grille de cartes ou une barre latérale à côté d'une colonne principale. Chaque type de page s'ouvre avec le style que la plupart des constructeurs cherchent, et vous pouvez le remplacer.

  3. 3

    3. Définissez le nombre de sections

    Glissez de deux à huit sections de contenu. Le wireframe ci-dessous ajoute ou supprime des boîtes en direct, en gardant le même en-tête, héros et pied de page en place.

Un brouillon que vous pouvez mettre en face d'un client avant de toucher l'éditeur de site

Un wireframe aussi brut n'est pas destiné à survivre au contact avec du contenu réel. Il est conçu pour faire valider rapidement le squelette d'une page : combien de sections, ce qui se trouve au-dessus de la ligne de flottaison, si le blog a vraiment besoin d'une barre latérale. Une fois ce squelette convenu, construire les blocs Group, Cover et Query Loop correspondants dans l'éditeur de site est une conversation beaucoup plus courte, car personne ne discute de la structure, seulement des mots et des images qui vont dedans.

  • Convenir du nombre de sections avant d'ouvrir l'éditeur de site
  • Montrer à un client deux styles de mise en page dans le même appel
  • Vérifier la version mobile sur le même écran que le brouillon de bureau
Gros plan d'une main dessinant des boîtes de wireframe avec un stylo plume et une règle sur du papier

Questions courantes sur le générateur de wireframe

Est-ce que ce générateur de wireframe avec l'IA est gratuit ?
Oui. Il s'exécute entièrement dans votre navigateur sans inscription et sans limite d'utilisation. Il n'y a pas d'appel au serveur : les mathématiques de mise en page se font sur votre appareil dès que vous déplacez un contrôle.
Est-ce qu'il stocke ou envoie mes entrées quelque part ?
Non. Le type de page, le style de mise en page et le nombre de sections restent dans la mémoire de la page seulement. Rien n'est écrit dans une base de données et rien n'est envoyé à un serveur, à part une balise anonyme d'exécution d'outil utilisée pour mesurer combien de visiteurs essaient l'outil.
D'où viennent ces patterns de mise en page ?
De recherches UX documentées et largement citées plutôt que de devinettes : les études de suivi oculaire F-pattern et Z-pattern (Nielsen Norman Group), la convention de navigation persistante utilisée dans les tableaux de bord d'administration, le pattern de galerie divisée plus boîte d'achat courant sur les pages produit (une découverte du Baymard Institute), et la mise en page d'une seule colonne que la recherche en utilisabilité trouve constamment la plus efficace pour les formulaires courts.
Puis-je exporter ce wireframe comme un vrai pattern Gutenberg ?
Pas directement. C'est une étape de planification, pas un générateur de code : cela vous aide à convenir d'une structure avec un client ou un collègue avant d'ouvrir l'éditeur de site et de construire à la main les blocs Group, Cover et Query Loop correspondants.
Pourquoi le type de page tableau de bord garde-t-il toujours une barre latérale à gauche, peu importe le style de mise en page que je choisisse ?
Parce qu'une colonne de navigation persistante est une convention structurelle des tableaux de bord d'administration, pas un choix stylistique. Le sélecteur de mise en page change toujours comment les widgets à l'intérieur sont arrangés (une grille de cartes ou une liste empilée), mais supprimer la colonne de navigation serait un mensonge sur la façon dont les vrais tableaux de bord sont construits.
Quel style de mise en page dois-je utiliser pour une page d'accueil ?
La grille de cartes est le défaut pour les pages d'accueil et les portfolios, car les sections de fonctionnalités et de projets peuvent généralement être scannées côte à côte. Les bandes empilées conviennent à une page produit ou un formulaire, où vous voulez que les visiteurs lisent une chose à la fois.
Le wireframe fonctionne-t-il sur un petit écran de téléphone ?
Oui. Chaque mise en page s'effondre en une seule colonne sous environ 480 pixels de largeur, y compris la grille et l'arrangement colonne latérale plus principale, afin que vous puissiez vérifier un brouillon mobile sur le même écran que celui de bureau.
D'autres types de pages vont-ils être ajoutés plus tard ?
Page d'accueil, article de blog, tableau de bord, page produit, portfolio et formulaire de contact couvrent les types de pages que les constructeurs WordPress indépendants créent le plus souvent. Si une lacune claire se présente en pratique, elle est ajoutée à la liste des présets.

D'autres outils WordPress qui valent la peine de rester ouverts dans un onglet

noonwp couvre Gutenberg, l'édition complète du site et le WordPress RTL pour les personnes qui livrent des sites clients, pas seulement les lis à ce sujet.

Ouvrir le scriptorium
Noon