Mockup 3D de site internet, le montrer sans le ralentir

Tu viens de mettre ton site en ligne, ou de le refaire. Pour l'annoncer, tu poses une capture d'écran sur Instagram : un rectangle de texte, une bannière cookies qui mange le bas, et peu de réactions. Le même site affiché dans un smartphone en 3D, qui défile tout seul, raconte une tout autre histoire : un projet fini, soigné, prêt à visiter. C'est ce qu'on appelle un mockup. Voici comment en faire un bon, et surtout comment l'utiliser sans abîmer la vitesse de ton site.

Ce qu'est un mockup de site

Un mockup est une mise en scène de ton site dans l'écran d'un appareil réaliste : smartphone, tablette ou ordinateur portable. Il sert à trois choses :

• donner le contexte : on comprend tout de suite que c'est un site, et sur quel écran il s'affiche ;
• attirer l'œil : le relief, la lumière et le mouvement se distinguent dans un fil d'actualité ;
• cacher le superflu : pas d'onglets, pas de barre de notifications, pas de bannière.

Il existe des modèles à télécharger pour les logiciels de graphisme, mais ils demandent de placer et d'ajuster la capture à la main. Les studios en ligne comme Flokup, édité par Flopix, font tout le travail dans le navigateur.

Les trois règles d'un mockup réussi

1. La vraie version du site, à la bonne taille

L'erreur classique : coller une capture prise sur ordinateur dans l'écran d'un téléphone. Le texte devient minuscule, la mise en page n'a aucun sens. Un bon mockup montre la version mobile sur un téléphone et la version bureau sur un ordinateur.

Flokup règle ce problème à la source : quand tu colles l'adresse de ton site, il l'ouvre dans un vrai navigateur, à la largeur exacte de l'écran choisi, et capture toute la page. Si tu changes d'appareil, il recapture à la nouvelle taille.

2. Pas de bannière cookies

Sur mobile, le bandeau de consentement peut cacher une bonne partie de l'écran. Flokup le retire avant la capture, en trois temps : blocage des scripts des gestionnaires de consentement courants, clic sur « Refuser » pour les bannières maison, puis masquage des calques restants. Il refuse toujours, il n'accepte jamais : la capture ne donne aucun accord à des traceurs.

3. Des appareils sans marque

Les grands fabricants interdisent l'usage de leurs noms et logos dans les produits commerciaux. Les appareils de Flokup sont donc génériques : smartphone à îlot, smartphone à poinçon, tablette, ordinateur portable, avec les silhouettes que tout le monde reconnaît, mais sans logo. Tes visuels restent utilisables dans une publicité ou une proposition commerciale.

Choisir la mise en scène selon l'usage

• Story ou Reel : smartphone, format vertical 9:16, vidéo où la page défile.
• Publication dans le fil : format 4:5 ou carré, image ou courte vidéo.
• Miniature YouTube ou présentation : format paysage 16:9, appareil en trois-quarts.
• Page d'accueil de ton site : image en paysage, souvent à fond transparent pour se fondre dans la page.

Dans Flokup, le changement de format recadre la scène automatiquement. Le studio propose cinq angles (de face, trois-quarts gauche ou droite, vu d'en haut, vu d'en bas), quatre animations (présentation, flottement, rotation 360°, fixe à orienter à la souris) et plusieurs fonds, dont un fond transparent. L'export se fait en image PNG ou en vidéo MP4, jusqu'en 4K à 60 images par seconde. Pour les dimensions recommandées par chaque réseau, consulte notre article sur les formats d'images pour les réseaux sociaux.

Sur ton site : exporte, ne charge pas la 3D

C'est le point le plus important, et le plus souvent raté. Il est tentant d'afficher sur sa page d'accueil une scène 3D « en direct », que le visiteur peut faire tourner. Pour le haut d'une page d'accueil, c'est une mauvaise idée :

• le poids : une bibliothèque 3D comme three.js pèse à elle seule de l'ordre de 170 Ko, avant même la scène ;
• le calcul : la carte graphique du visiteur travaille en continu, ce qui ralentit les téléphones modestes et vide la batterie ;
• le référencement : Google mesure le temps d'affichage du plus grand élément en haut de page (le LCP). Une scène 3D lente à apparaître pénalise cette mesure.

La bonne méthode : calculer la 3D une fois, au moment de l'export, et n'afficher sur ton site qu'une image et, si tu veux, une courte vidéo. Même rendu à l'œil, pour quelques centaines de kilo-octets.

C'est le choix fait pour la page d'accueil de flopix.fr : l'appareil en 3D qu'on y voit est une image et une courte vidéo exportées depuis Flokup et hébergées sur le site, pas une scène chargée en direct.

La recette pour ta page d'accueil

1. Exporte ton mockup en PNG, avec un fond transparent si ta page a une couleur de fond.
2. Convertis l'image en WebP ou AVIF, des formats bien plus légers que le PNG.
3. Redimensionne-la à sa taille réelle d'affichage.
4. Écris un texte alternatif précis : « Le site de l'atelier Bois et Fil affiché sur un smartphone ».
5. Ne la charge pas en différé si elle est en haut de page : c'est elle qui doit s'afficher en premier.
6. Si tu ajoutes une vidéo : muette, en boucle, avec l'image en attente (« poster »), chargée après le reste de la page. Sur flopix.fr, elle n'est même pas chargée quand le visiteur a demandé à réduire les animations ou à économiser ses données.

Pour la boucle, une vidéo de 12 secondes exportée depuis Flokup est marquée « boucle parfaite » : elle se répète sans à-coup.

Avant de te lancer

Un mockup met en valeur ce qui existe, il ne corrige rien. Si le haut de ton site est confus ou illisible sur téléphone, ça se verra encore plus dans un bel appareil. Commence par soigner ta page, en t'aidant si besoin de notre article pour créer un site vitrine sans coder, puis passe à la mise en scène.

La formation Mockups 3D avec Flokup te guide pas à pas, de la capture de ton site à l'export, puis à la publication sur tes réseaux et sur ton site.