Créer un mockup de son site web gratuitement : le guide pas à pas
Un beau mockup montre ton site tel que tes visiteurs le voient, dans un vrai appareil. Voici comment en créer un gratuitement en quelques minutes, sans logiciel de 3D ni modèle à retoucher.
Un mockup de site web, c’est quoi exactement ?
Un mockup (on dit aussi maquette de présentation) est une image ou une vidéo qui place ton site dans un appareil : un smartphone, une tablette ou un ordinateur portable. Le visiteur ne voit plus une simple capture rectangulaire, il voit ton site « en situation », comme s’il le tenait en main.
C’est le visuel qu’on retrouve sur les pages d’accueil, dans les portfolios, les propositions commerciales et les publications de lancement. Il sert à une chose : faire comprendre en une seconde à quoi ressemble ton site, et donner envie d’aller le voir.
Pourquoi les méthodes classiques prennent du temps
Pendant longtemps, créer un mockup voulait dire télécharger un modèle à remplir dans un logiciel de retouche, faire une capture d’écran, la redimensionner, la déformer pour qu’elle épouse l’écran en perspective, puis exporter. Compte une demi-heure par visuel, et tout recommencer à chaque modification du site.
Il y a aussi trois pièges que tout le monde rencontre :
- La bannière cookies qui recouvre un tiers de l’écran sur mobile.
- La mauvaise version du site : une capture faite sur ordinateur, posée dans un smartphone, donne un texte minuscule et illisible.
- Une image figée, alors que sur les réseaux, c’est le mouvement qui arrête le défilement.
Un studio en ligne comme Flokup règle ces trois points automatiquement. Voici la marche à suivre.
Créer ton mockup en 6 étapes
1. Ouvre le studio, sans compte
Rends-toi sur le studio Flokup. Il s’ouvre directement dans ton navigateur : rien à installer, pas d’inscription pour essayer. Tu peux faire autant d’essais et de prévisualisations que tu veux.
2. Colle l’adresse de ton site
Dans le panneau du studio, colle l’adresse complète de ta page (par exemple https://monsite.fr) et lance la capture. Flokup ouvre ta page dans un vrai navigateur, à la largeur exacte de l’appareil choisi, et capture toute la page, du haut jusqu’au pied de page. Sur un smartphone, tu obtiens donc la vraie version mobile ; sur un ordinateur portable, la vraie version bureau.
Au passage, la bannière cookies est retirée : les gestionnaires de consentement courants sont bloqués et les bannières maison sont refusées. On t’explique le détail dans notre article sur la capture d’un site sans bannière cookies.
Ton site n’est pas encore en ligne ? La capture ne fonctionne que pour une adresse publique. Fais une capture d’écran de ton côté et importe-la : elle s’affiche dans l’appareil comme une capture Flokup, et ton fichier reste dans ton navigateur.
3. Choisis l’appareil et sa finition
Quatre modèles en 3D sont disponibles, tous génériques et sans logo :
- Smartphone à îlot : la découpe noire allongée en haut de l’écran.
- Smartphone à poinçon : la petite caméra ronde centrée.
- Tablette : idéale pour montrer une version intermédiaire.
- Ordinateur portable : avec la barre du navigateur et ton adresse.
Choisis l’appareil qui correspond à ton public. Si la majorité de tes visiteurs arrive sur mobile, commence par le smartphone : c’est la version qu’ils connaissent. Ajoute ensuite une finition (cinq teintes métalliques) qui s’accorde avec les couleurs de ton site.
4. Règle l’animation et le fond
Quatre animations sont prêtes à l’emploi : présentation (l’appareil entre en scène), flottement doux, rotation à 360°, ou appareil fixe qui suit la souris pour trouver l’angle parfait d’une image. Pendant ce temps, la page capturée défile en douceur dans l’écran.
Pour le fond, tu as le choix entre un dégradé, un fond clair, un fond sombre ou un fond transparent, pratique pour poser l’appareil sur un autre visuel.
5. Choisis le format
Le format dépend de l’endroit où tu vas publier : 16:9 pour un en-tête de site, une présentation ou YouTube, 9:16 pour les stories et les vidéos verticales, 1:1 ou 4:5 pour les fils d’actualité. Le cadrage se recalcule tout seul autour de l’appareil. Si tu hésites, notre guide des formats par réseau social résume tout dans un tableau.
6. Exporte en PNG ou en vidéo
Quand le rendu te plaît, exporte-le : une image PNG (avec fond transparent si tu veux) ou une vidéo MP4 fluide, jusqu’en 4K à 60 images par seconde. Le calcul se fait sur ta machine, image par image : ce que tu vois est exactement ce que tu télécharges.
Qu’est-ce qui est vraiment gratuit ?
Tout ce qui sert à créer et à essayer est gratuit, sans limite de temps :
| Ce que tu fais | Sans compte | Avec un compte gratuit |
|---|---|---|
| Ouvrir le studio et prévisualiser | Oui, illimité | Oui, illimité |
| Capturer ton site sans bannière cookies | Oui | Oui |
| Importer ta propre image ou vidéo | Oui | Oui |
| Télécharger le résultat (PNG ou MP4) | Non | 1 téléchargement offert, qualité maximale |
L’inscription est gratuite et ne demande aucune carte bancaire. Si tu as besoin de télécharger régulièrement, les offres Pro et Agence donnent des téléchargements illimités : le détail est sur la page des tarifs.
Les 5 règles d’un mockup réussi
- Montre ta meilleure page. Ce n’est pas forcément l’accueil : une page produit ou une réalisation parle parfois davantage.
- Un seul message par visuel. Un appareil bien cadré vaut mieux que quatre appareils minuscules.
- Soigne le contraste. Un site clair ressort mieux sur un fond sombre, et inversement.
- Reste cohérent. Garde le même angle et le même fond sur toute une série de visuels : ton portfolio ou ton fil gagne en clarté.
- Pense au mouvement. Une courte vidéo où la page défile retient bien plus l’attention qu’une image fixe. Une vidéo en 9:16 où ton site défile est souvent le visuel le plus partagé.
Et si tu te demandes si tout cela vaut mieux qu’une simple capture, on a comparé les deux approches dans mockup 3D ou capture d’écran.
Questions fréquentes
Faut-il savoir faire de la 3D pour créer un mockup ?
Non. Tu choisis un appareil, une animation et un format, le studio s’occupe de la 3D, de la lumière et du cadrage. Aucun logiciel à installer.
Puis-je utiliser mon mockup dans un cadre professionnel ?
Oui, les appareils sont génériques et sans logo, donc utilisables sur ton site, tes réseaux ou ton portfolio. Pour produire des visuels pour le compte de clients, l’offre Agence est prévue pour cet usage.
Mon site est protégé par un mot de passe, comment faire ?
La capture ne peut pas atteindre une page privée. Fais une capture d’écran de ton côté et importe-la dans le studio : elle s’affiche dans l’appareil comme une capture normale.
