Design de site web de marque avec 3D interactive

La 3D interactive fonctionne mieux lorsqu'elle répond à une question qu'une image fixe ne peut pas résoudre. Utilisez-la pour permettre à quelqu'un d'inspecter un produit, de comprendre un système, de se déplacer dans un espace ou de voir une idée de marque se déployer. N'ajoutez pas une scène simplement parce que la technologie est disponible.

Écrivez l'action visée en une phrase avant de choisir une bibliothèque :

1. Le visiteur voit l'idée clé.
2. Le visiteur effectue une interaction claire.
3. La page lui donne une prochaine étape utile, comme lire une étude de cas ou entamer une conversation.

WebGL est une API JavaScript permettant d'afficher des graphiques 2D et 3D interactifs dans un canevas de navigateur, avec accès à l'accélération matérielle lorsque l'appareil la prend en charge, selon la documentation WebGL de MDN. C'est donc une couche de rendu utile, et non une stratégie de contenu.

Le meilleur design de site web 3D traite la scène comme une amélioration. Placez le message important dans du vrai HTML. Donnez au canevas un titre à proximité, une courte explication textuelle, des commandes visibles et un lien normal vers l'étape suivante.

Utilisez cette structure pour une section d'en-tête ou de produit :

• Un titre textuel qui énonce la valeur ou le sujet.
• Un paragraphe qui explique ce que le visiteur voit.
• Un bouton ou un lien qui fonctionne sans la scène.
• Un canevas qui ajoute de la profondeur, du mouvement ou de l'inspection.
• Une image fixe ou une version 2D simplifiée pour les appareils lents et les paramètres de mouvement réduit.

Ne placez pas la seule version d'un nom de produit, d'une affirmation ou d'un appel à l'action dans une texture ou un canevas. Les moteurs de recherche et les technologies d'assistance ont besoin de contenu qu'ils peuvent analyser. Les directives de Google Search Central sur les données structurées précisent aussi que le balisage doit décrire le contenu visible de la page, et non du contenu masqué ou vide créé uniquement pour la recherche.

La performance commence dans la direction artistique. Une grande scène, des textures lourdes, plusieurs nuanceurs et un chargement immédiat peuvent transformer une expérience soignée en écran vide sur un téléphone.

Fixez des budgets pour la scène avant la production :

• Octets initiaux de JavaScript et d'actifs 3D.
• Dimensions et formats de fichier des textures.
• Nombre d'objets et d'appels de rendu.
• Délai accordé avant l'affichage du premier texte et de la première image utiles.
• Fréquence d'images et comportement de la mémoire sur un appareil mobile de milieu de gamme.

Chargez par couches. Affichez d'abord la structure de la page, le titre et l'image principale. Différez la scène 3D jusqu'à ce qu'elle approche de la zone visible ou que le visiteur la demande. Utilisez des modèles à plus faible détail et des textures plus petites sur les petits écrans. Mettez le rendu en pause lorsque la scène est masquée et libérez les ressources lorsque le visiteur quitte un parcours.

Mesurez les résultats au lieu de promettre une page universelle de deux secondes. Les directives Core Web Vitals de web.dev définissent de bonnes cibles au 75e centile : 2,5 secondes ou moins pour le Largest Contentful Paint, 200 millisecondes ou moins pour l'Interaction to Next Paint et 0,1 ou moins pour le Cumulative Layout Shift.

Ce sont des cibles d'expérience à l'échelle de la page; testez donc la page complète avec la couche 3D activée, différée et indisponible.

Une expérience 3D accessible offre un parcours utile aux personnes qui ne voient pas la scène, ne la contrôlent pas ou ne la tolèrent pas. Les utilisateurs du clavier ont besoin de commandes pouvant recevoir le focus et d'un ordre logique. Les utilisateurs de lecteurs d'écran ont besoin d'un texte qui explique le sujet et le résultat d'une action. Les utilisateurs d'écrans tactiles ont besoin de commandes qui ne dépendent ni du survol ni d'un glissement précis.

Le mouvement exige une issue explicite. Les directives du W3C pour le critère de succès 2.3.3 des WCAG 2.2 recommandent de prendre en charge les préférences de mouvement et de retirer l'animation inutile. Respectez prefers-reduced-motion, offrez un moyen visible de mettre en pause ou de simplifier la scène et évitez que la parallaxe soit la seule façon de comprendre une section.

Testez au moins ces états :

• Clavier seulement, y compris la visibilité du focus et le comportement de sortie.
• Lecteur d'écran avec le canevas ignoré ou doté d'une étiquette utile.
• Mouvement réduit activé.
• Entrée tactile sans dépendance au survol.
• WebGL indisponible ou contexte perdu.
• Réseau lent et appareil mobile à faible mémoire.

La 3D ne remplace pas l'architecture de l'information. Gardez un titre de page significatif, des intertitres descriptifs, du texte indexable, des liens explorables et des adresses stables. Utilisez du contenu rendu côté serveur ou disponible de façon statique pour le message principal lorsque la pile technologique le permet. Le navigateur peut ensuite améliorer ce document après son chargement.

N'ajoutez des données structurées que si elles décrivent fidèlement le contenu visible. Google recommande JSON-LD lorsque la configuration du site le permet et oriente les auteurs vers le test des résultats enrichis pour la validation. N'ajoutez pas un objet HowTo ou FAQ simplement parce qu'une scène comporte des étapes ou des questions. La page doit montrer la même information au visiteur.

Pour les équipes d'entreprise, cette séparation facilite aussi l'entretien. Les rédacteurs peuvent mettre à jour un titre, une étude de cas ou un appel à l'action sans reconstruire la scène. Les développeurs peuvent modifier les détails de rendu sans enfouir le message de la marque dans du code de nuanceur.

Tenez une revue avec le design, le contenu, l'ingénierie, le référencement et l'accessibilité avant le lancement. Posez les mêmes questions sur ordinateur de bureau et sur mobile :

1. Le premier écran explique-t-il l'offre avant que la scène finisse de se charger?
2. Un visiteur peut-il accomplir l'action principale sans la 3D?
3. La scène ajoute-t-elle de la compréhension plutôt que de la décoration?
4. Le LCP, l'INP et le CLS sont-ils mesurés avec des appareils et des conditions réseau réalistes?
5. Le mouvement réduit modifie-t-il l'expérience de façon utile?
6. L'équipe du CMS peut-elle modifier le contenu environnant en toute sécurité?

Locomotive décrit son propre travail comme des identités et des expériences de marque sur mesure conçues d'abord pour le numérique, avec des services allant de la stratégie jusqu'au déploiement et à l'entretien, sur son site public d'agence. Cette étendue est un modèle utile pour ce type de projet : traitez l'idée visuelle, le système technique et la responsabilité après le lancement comme un seul problème de design.

• MDN WebGL API : rôle de WebGL et modèle de rendu du navigateur.
• web.dev Core Web Vitals : cibles actuelles de LCP, d'INP et de CLS et directives de mesure.
• W3C WCAG 2.2, Animation from Interactions : directives sur le mouvement réduit et l'animation.
• Google Search Central, données structurées : directives sur le contenu visible et JSON-LD.
• Locomotive : positionnement public de l'agence et portée des services.