Création de prototype de site web

La maquette UI/UX montre à quoi ressemble chaque écran. Le prototype relie ces écrans : on clique sur les boutons, on ouvre les menus et on suit le parcours comme sur un vrai site.

Pour un site vitrine simple, une maquette suffit souvent. Le prototype devient utile si le parcours peut faire hésiter : réservation, formulaire de demande en plusieurs étapes, espace client. Devant un investisseur ou un partenaire, il fait aussi essayer l’idée au lieu de la décrire.

Un prototype se situe généralement entre 200 et 1 000 €, livré en 3 à 10 jours. Trois éléments font le prix : combien d’écrans relier, combien d’interactions simuler, et si le design existe déjà. Rendre cliquable une maquette existante coûte moins cher que de tout concevoir.

Une application complète peut dépasser cette fourchette. Un prototype n’a pas à tout couvrir : simuler le parcours qui fait douter suffit souvent à trancher.

Un outil suffit si vous savez déjà ce que vous voulez montrer et si vous avez du temps. Figma permet de créer des interactions et de partager le résultat par un lien. Des outils d’IA comme Figma Make ou Bolt génèrent une première version à partir d’une description, ce qui aide à tester une idée.

Un designer apporte surtout la réflexion sur le parcours : ce qu’il faut montrer, dans quel ordre et ce qui peut bloquer un visiteur. Avec une version générée par IA, vous pouvez lui demander de la reprendre plutôt que de repartir de zéro.

Il peut simuler la navigation, les menus, les fenêtres et les étapes d’un formulaire. En général, il n’enregistre rien : pas de compte réel, pas de paiement ni de données conservées. Il n’est pas non plus destiné à être référencé sur Google.

Si vos utilisateurs doivent réellement s’inscrire ou payer, vous cherchez plutôt un MVP, une première version qui fonctionne.

Donnez une tâche précise à quelques personnes proches de vos futurs visiteurs, par exemple « réservez un créneau pour mardi », puis observez sans aider. Notez où elles hésitent et ce qu’elles comprennent de travers.

Quelques séances révèlent souvent les plus gros blocages, à un moment où la correction ne touche pas encore le code. Si le test fait partie de la commande, faites préciser le nombre de séances et si les corrections sont comprises.

Oui, comme référence. Un fichier de design soigné lui donne le parcours, les écrans et les comportements attendus, mais il faudra encore construire le vrai site : c’est le rôle de l’intégration de maquette.

Le code généré par une IA demande plus de prudence. Avant de le garder, faites vérifier sa sécurité, sa qualité et sa facilité de reprise par un développeur.

• Les parcours à simuler, décrits étape par étape, du premier écran à l’action finale.
• Les supports : ordinateur, mobile ou les deux, car chacun demande ses propres écrans.
• Vos contenus et votre identité : des textes approximatifs suffisent, mais évitez le faux texte, qui fausse les tests.
• Le niveau de confidentialité : vérifiez qui peut ouvrir le lien avant de le diffuser.