Comment créer une maquette UI de site web avec l’IA à partir d’un wireframe ?

Qu’est-ce qu’une maquette UI de site web ?

Une maquette UI, pour User Interface, est une représentation visuelle détaillée d’une interface avant son développement.

Contrairement au wireframe, elle intègre réellement la direction artistique du projet.

Elle permet notamment de visualiser :

• les couleurs ;
• les typographies ;
• les photographies ;
• les boutons ;
• les cartes ;
• les formulaires ;
• les icônes ;
• les espacements ;
• la navigation ;
• la hiérarchie visuelle ;
• la cohérence entre les différentes sections.

Nous passons donc d’une structure très simple :

HERO

H1
Introduction
CTA
Image

SERVICES

RÉALISATIONS

TÉMOIGNAGES

FAQ

à une véritable interface graphique.

Le wireframe définit où placer les éléments.
La direction artistique définit leur langage visuel.
La maquette UI réunit les deux.

Pourquoi ne pas commencer directement par la maquette ?

C’est pourtant la méthode la plus fréquente lorsqu’on utilise un générateur de site avec l’intelligence artificielle.

Crée-moi un site moderne et premium pour une entreprise de rénovation à Toulouse.

Quelques secondes plus tard, une interface peut apparaître. Le résultat peut sembler impressionnant, mais l’IA a alors dû prendre presque toutes les décisions à notre place.

Architecture
+
Sections
+
Hiérarchie
+
Couleurs
+
Typographies
+
Images
+
Composants
+
CTA
+
Animations
+
Responsive

Elle ne se contente donc pas de produire une maquette : elle invente également une grande partie du projet.

Dans notre méthodologie, l’objectif est différent. À cette étape, l’IA ne doit plus décider de l’architecture. Elle doit traduire visuellement des décisions déjà validées.

1. Réunir les éléments nécessaires à la création de la maquette

Avant de générer une première proposition graphique, réunissons les éléments créés lors des étapes précédentes.

Le wireframe

HEADER

HERO
├── H1
├── Introduction
├── CTA principal
├── CTA secondaire
└── Image

PRÉSENTATION

PRESTATIONS

MÉTHODE

RÉALISATIONS

CHIFFRES CLÉS

TÉMOIGNAGES

FAQ

CTA FINAL

FOOTER

La direction artistique

POSITIONNEMENT

Haut de gamme accessible


COULEURS

Ivoire chaud
Brun profond
Beige minéral
Terracotta
Anthracite


TYPOGRAPHIES

Serif contemporaine → titres
Sans-serif → textes


PHOTOGRAPHIES

Naturelles
Architecturales
Lumière naturelle
Tons légèrement chauds


INTERFACE

Sobre
Éditoriale
Peu d'ombres
Coins légèrement arrondis
Pas de glassmorphism


ANIMATIONS

Subtiles
300 à 600 ms

Nous avons également le contenu de notre page.

WIREFRAME
Structure

        +

DIRECTION ARTISTIQUE
Identité

        +

CONTENU
Informations

        ↓

MAQUETTE UI

2. Utiliser de vrais contenus dès que possible

Le contenu influence directement la conception visuelle.

Un titre de trois mots et un titre de quinze mots n’occupent pas le même espace.

Une description de deux lignes et une description de huit lignes ne produisent pas la même carte.

Il est donc préférable d’éviter le Lorem Ipsum lorsque les contenus réels sont déjà disponibles.

Exemple de contenu fictif

Titre principal

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.

[BOUTON]

Exemple avec un contenu réaliste

Rénovation intérieure à Toulouse

Transformons votre intérieur
en un espace qui vous ressemble.

De la conception aux finitions,
nous accompagnons votre projet
de rénovation à Toulouse
et dans ses environs.

[Demander un devis]

[Découvrir nos réalisations]

La maquette peut alors être réellement testée avec le type de contenu qu’elle devra accueillir.

3. Ne pas laisser l’IA modifier le wireframe

À cette étape, la structure UX a déjà été validée.

Il est donc utile de préciser clairement les limites de la génération.

Respecte strictement le wireframe fourni.

Ne crée aucune nouvelle section.

Ne supprime aucune section.

Tu peux travailler la composition interne
des sections mais tu ne dois pas
modifier l'architecture de la page.

Sans cette instruction, l’IA peut facilement ajouter des sections simplement parce qu’elles sont fréquentes sur des sites similaires.

Partenaires

Newsletter

Statistiques

Équipe

Blog

Certifications

L’objectif est maintenant de contrôler la conception plutôt que de la subir.

4. Commencer par la maquette desktop

Pour la première exploration visuelle, nous pouvons commencer par la version desktop.

Notre Hero contient :

H1
Introduction
CTA principal
CTA secondaire
Image

Et notre direction artistique précise :

Éditorial
Sobre
Architecture
Grande photographie
Ivoire
Brun
Terracotta

Nous pouvons alors imaginer une composition telle que :

┌────────────────────────────────────────────┐
│ LOGO        NAVIGATION            DEVIS    │
├──────────────────────┬─────────────────────┤
│                      │                     │
│ RÉNOVATION           │                     │
│ INTÉRIEURE            │    PHOTOGRAPHIE     │
│ À TOULOUSE            │                     │
│                      │                     │
│ Introduction         │                     │
│                      │                     │
│ [DEVIS] Réalisations │                     │
│                      │                     │
└──────────────────────┴─────────────────────┘

5. Créer une véritable hiérarchie visuelle

Une bonne maquette ne consiste pas simplement à appliquer des couleurs à un wireframe.

Elle doit guider le regard de l’utilisateur.

01
H1
Élément dominant

02
Photographie
Élément visuel fort

03
Introduction
Information secondaire

04
CTA principal
Action

05
CTA secondaire
Alternative

Plusieurs éléments permettent de créer cette hiérarchie :

• la taille ;
• le contraste ;
• la graisse typographique ;
• la position ;
• les espacements ;
• la couleur ;
• les proportions.

L’utilisateur ne doit pas avoir à chercher ce qui est important.

6. Concevoir les sections comme un ensemble cohérent

Une erreur fréquente consiste à concevoir chaque section indépendamment.

Hero très éditorial

↓

Services sous forme de cartes SaaS

↓

Réalisations façon portfolio

↓

Avis façon marketplace

↓

FAQ avec un style différent

Chaque section peut fonctionner individuellement, mais l’ensemble manque alors de cohérence.

Le design system permet de répéter certaines règles :

LABEL
Petite capitale terracotta

H2
Serif

TEXTE
Sans-serif

LIEN
Flèche simple

ESPACEMENT
96 px

BORDURE
1 px beige

RADIUS
8 px

Ce sont ces répétitions maîtrisées qui permettent de construire progressivement une identité graphique.

7. Travailler les composants UI avant de multiplier les pages

Avant de générer toutes les pages du site, il est préférable de valider les principaux composants.

• header ;
• bouton principal ;
• bouton secondaire ;
• carte service ;
• carte réalisation ;
• témoignage ;
• accordéon FAQ ;
• champ de formulaire ;
• footer.

Prévoir les états des boutons

DEFAULT

HOVER

FOCUS

ACTIVE

DISABLED

Prévoir les états des formulaires

VIDE

FOCUS

REMPLI

ERREUR

VALIDÉ

DÉSACTIVÉ

Une maquette réellement exploitable doit anticiper ces différents comportements.

8. Utiliser l’IA pour explorer plusieurs compositions

Même avec un wireframe précis, plusieurs choix de composition restent possibles.

Version A : grille classique

PROJET 1    PROJET 2

PROJET 3    PROJET 4

Version B : composition éditoriale

GRANDE IMAGE

        PETITE IMAGE

PETITE IMAGE

        GRANDE IMAGE

Version C : présentation horizontale

←  PROJET 1  PROJET 2  PROJET 3  →

L’intelligence artificielle devient particulièrement utile pour explorer rapidement ces alternatives sans remettre en question l’architecture générale.

Demander des variations ciblées

Conserve exactement :

- le contenu ;
- la palette ;
- les typographies ;
- les composants ;
- le wireframe.

Propose trois compositions différentes
uniquement pour la section Réalisations.

VERSION A
Très éditoriale.

VERSION B
Minimaliste.

VERSION C
Plus immersive avec davantage
de place accordée aux photographies.

Ne modifie aucune autre section.

9. Quel prompt utiliser pour générer une maquette UI avec l’IA ?

Voici une structure de prompt complète pour transformer un wireframe validé en maquette UI haute fidélité.

Tu es UI Designer senior spécialisé
dans la conception d'interfaces web.

Je souhaite transformer un wireframe validé
en maquette UI haute fidélité.

IMPORTANT

L'architecture UX a déjà été validée.

Tu ne dois :

- ajouter aucune section ;
- supprimer aucune section ;
- modifier aucun objectif fonctionnel ;
- inventer aucune fonctionnalité.

Tu dois traduire visuellement
le système fourni.


CONTEXTE

Entreprise de rénovation intérieure
basée à Toulouse.

POSITIONNEMENT

Haut de gamme accessible.

PERSONNALITÉ

Élégante
Sobre
Chaleureuse
Contemporaine
Humaine


WIREFRAME

HEADER

HERO
- H1
- introduction
- CTA principal
- CTA secondaire
- photographie

PRÉSENTATION

PRESTATIONS

MÉTHODE

RÉALISATIONS

CHIFFRES CLÉS

TÉMOIGNAGES

FAQ

CTA FINAL

FOOTER


DIRECTION ARTISTIQUE

Palette :

#302B27
Brun profond

#F4F0E8
Ivoire chaud

#DDD3C4
Beige minéral

#A86245
Terracotta

#222222
Anthracite


TYPOGRAPHIE

Titres :
Serif contemporaine et éditoriale.

Textes :
Sans-serif sobre et très lisible.


STYLE PHOTOGRAPHIQUE

Photographies réalistes.

Architecture intérieure.

Lumière naturelle.

Tons légèrement chauds.

Textures naturelles.

Éviter les images trop parfaites
ou visiblement artificielles.


COMPOSANTS

Boutons légèrement arrondis.

Pas de boutons pill systématiques.

Peu d'ombres.

Pas de glassmorphism.

Bordures fines.

Espacements généreux.

Interface éditoriale.


GRILLE

Desktop :
12 colonnes.

Largeur maximale :
1280 px.

Gouttières :
24 px.


OBJECTIF

Créer une maquette desktop haute fidélité
cohérente avec cette direction artistique.

La page doit transmettre :

- confiance ;
- savoir-faire ;
- qualité ;
- proximité ;
- élégance.


CONTRAINTES

Évite les codes visuels typiques
des interfaces générées automatiquement :

- dégradés technologiques ;
- cartes flottantes inutiles ;
- effets lumineux ;
- glassmorphism ;
- accumulation d'icônes ;
- textes démesurés sans justification ;
- animations décoratives ;
- composants SaaS ;
- mise en page générique.


MISSION

Transforme le wireframe fourni
en interface graphique.

Respecte strictement :

- la structure ;
- le contenu ;
- la direction artistique ;
- la hiérarchie ;
- le design system.

Travaille particulièrement :

- la hiérarchie visuelle ;
- les proportions ;
- les espacements ;
- les photographies ;
- la cohérence entre les sections.

Ne développe pas encore le site.

Ne génère pas de code.

L'objectif est uniquement
de produire la maquette UI.

10. Comment évaluer une maquette générée par IA ?

Une maquette impressionnante visuellement n’est pas nécessairement une bonne maquette.

Hiérarchie

• Le H1 est-il immédiatement identifiable ?
• Le CTA principal ressort-il suffisamment ?
• Les titres de section sont-ils différenciés ?

Lisibilité

• Les textes sont-ils suffisamment grands ?
• Les paragraphes sont-ils correctement dimensionnés ?
• Les contrastes sont-ils suffisants ?

Cohérence

• Les mêmes composants sont-ils utilisés de manière constante ?
• Les espacements suivent-ils une logique commune ?
• Les bordures et arrondis sont-ils cohérents ?

Expérience utilisateur

Le parcours défini dans le wireframe doit rester visible dans la maquette.

Identité

Le site doit conserver une personnalité visuelle suffisamment forte pour ne pas sembler interchangeable.

11. Les défauts typiques des maquettes générées par IA

Des titres disproportionnés

Les générateurs IA utilisent fréquemment de très grands titres dans les Hero. Cette approche peut fonctionner, mais elle ne doit pas devenir une règle systématique.

Trop de cartes

Service → carte

Avis → carte

Chiffre → carte

FAQ → carte

CTA → carte

Texte → carte

L’espace blanc et la typographie peuvent parfois suffire pour organiser le contenu.

Trop d’arrondis

Des border-radius importants partout peuvent produire une esthétique très générique.

Trop de dégradés

Un dégradé doit être un choix de direction artistique, pas un automatisme.

Des images trop parfaites

Des images trop lisses, trop symétriques ou trop spectaculaires peuvent donner au projet un rendu artificiel.

12. Tester la maquette avec des contenus réalistes

L’intelligence artificielle peut produire une très belle composition à partir de textes extrêmement courts.

Mais le contenu réel peut ensuite être beaucoup plus long.

Contenu court

Nos services

Nous créons des espaces uniques.

Contenu réel

Nos prestations de rénovation intérieure

Nous accompagnons les propriétaires
dans leurs projets de rénovation complète
ou partielle de maisons et appartements
à Toulouse et dans toute la région.

La maquette doit fonctionner avec les contenus réels du projet.

13. Tester les cas extrêmes

Une interface doit également fonctionner lorsque le contenu n’est pas parfaitement calibré.

• titre très court ;
• titre très long ;
• description sur deux lignes ;
• description sur six lignes ;
• carte avec image ;
• carte sans image ;
• trois réalisations ;
• sept réalisations ;
• FAQ avec réponse courte ;
• FAQ avec réponse longue.

Cette étape devient particulièrement importante lorsque les contenus seront administrables par le client.

14. Créer une véritable maquette mobile

Une fois la direction desktop validée, il faut réellement concevoir la version mobile.

Exemple desktop

┌──────────────────────────────────┐
│ TEXTE             PHOTOGRAPHIE   │
│                                  │
│ H1                               │
│ Introduction                     │
│ CTA + CTA                        │
└──────────────────────────────────┘

Exemple mobile

┌─────────────────┐
│                 │
│ H1              │
│                 │
│ Introduction    │
│                 │
│ CTA             │
│                 │
│ CTA secondaire  │
│                 │
│ PHOTOGRAPHIE    │
│                 │
└─────────────────┘

Le mobile ne doit pas être considéré comme une simple réduction du desktop.

15. Donner des règles responsive à l’intelligence artificielle

Nous pouvons demander explicitement à l’IA d’adapter la composition.

Crée maintenant la version mobile
de cette maquette.

Largeur de référence :
390 px.

Ne te contente pas
de réduire proportionnellement
la version desktop.

Adapte réellement la composition.

RÈGLES

- conserver la hiérarchie du contenu ;
- une seule colonne lorsque nécessaire ;
- marges latérales de 20 px ;
- boutons tactiles suffisamment grands ;
- pas de texte inférieur à 16 px pour le corps ;
- réduire les titres sans perdre leur hiérarchie ;
- supprimer les éléments purement décoratifs s'ils gênent ;
- conserver les CTA importants accessibles ;
- adapter les galeries ;
- éviter le scroll horizontal ;
- simplifier la navigation.

Pour chaque modification importante,
explique la décision responsive.

16. Vérifier l’accessibilité de la maquette

Une partie de l’accessibilité peut être contrôlée avant même de commencer le développement.

Contrastes

Les textes doivent rester lisibles sur tous leurs arrière-plans.

Taille des textes

Les contenus secondaires ne doivent pas devenir minuscules uniquement pour préserver une composition.

Liens et boutons

Les interactions doivent rester clairement identifiables.

Formulaires

Les labels et les états d’erreur doivent être anticipés.

Focus clavier

Les états de focus doivent être prévus dans le design system.

Couleur

Une information importante ne doit pas dépendre uniquement d’une différence de couleur.

17. Transformer la maquette en système réutilisable

Une fois la première page validée, il est préférable d’identifier les éléments qui peuvent être réutilisés sur les autres pages.

GLOBAL

Header
Footer
Navigation
Boutons
Formulaires


TYPOGRAPHIE

Display
H1
H2
H3
Body
Small


COMPOSANTS

Service Card
Project Card
Testimonial
FAQ
CTA


SECTIONS

Hero
Introduction
Services
Projects
Testimonials
CTA

Cette logique améliore :

• la cohérence ;
• la vitesse de conception ;
• la maintenabilité ;
• la future phase de développement.

Checklist : votre maquette UI est-elle prête ?

Structure

• Le wireframe initial est respecté.
• Aucune section inutile n’a été ajoutée.
• La hiérarchie de l’information est conservée.

Direction artistique

• Les couleurs respectent le système défini.
• Les typographies sont cohérentes.
• Le style photographique est homogène.
• Les composants partagent le même langage graphique.

Contenu

• Les vrais contenus sont utilisés lorsque possible.
• Les textes longs ont été testés.
• Les contenus courts ont été testés.
• Les images correspondent au projet.

Interface

• Les boutons possèdent plusieurs états.
• Les formulaires sont prévus.
• Les cartes fonctionnent avec différents contenus.
• Les espacements suivent une échelle cohérente.

UX

• L’action principale reste identifiable.
• Le parcours utilisateur reste logique.
• Les informations importantes ressortent visuellement.

Responsive

• Une maquette desktop existe.
• Une véritable version mobile existe.
• Les composants peuvent s’adapter aux différentes largeurs.

Accessibilité

• Les contrastes sont suffisants.
• Les textes sont lisibles.
• Les boutons sont suffisamment grands.
• Les formulaires possèdent des labels.
• Les états de focus sont anticipés.

De la maquette UI au responsive design

Notre méthodologie comprend désormais cinq étapes.

01
CAHIER DES CHARGES / PROMPT
Définir le projet

        ↓

02
ARBORESCENCE
Définir les pages

        ↓

03
WIREFRAME
Définir la structure

        ↓

04
DIRECTION ARTISTIQUE
Définir l'identité visuelle

        ↓

05
MAQUETTE UI
Construire l'interface

Au fur et à mesure que le projet avance, nous réduisons la liberté laissée à l’intelligence artificielle et augmentons la précision de nos contraintes.

L’objectif n’est donc pas nécessairement de demander à l’IA de concevoir un site à notre place.

Il s’agit plutôt de lui fournir suffisamment de contexte pour accélérer notre propre processus de conception.

Dans le prochain épisode, nous verrons comment créer un site parfaitement responsive avec l’IA : breakpoints, composants adaptatifs, typographies fluides, gestion du mobile, tablette et écrans intermédiaires.