Comment créer un plan d'étage interactif

La base d’un plan d’étage interactif exceptionnel est une image source nette et lisible. Que vous travailliez avec une exportation CAO architecturale, un rendu Revit, un plan PDF ou un plan de site graphique haute résolution, exportez votre dessin d'une largeur de 2 000 px à 6 000 px.

Supprimez les annotations techniques, les lignes de cote et les hachures de construction inutiles qui encombrent les écrans numériques. Concentrez-vous sur les périmètres des salles blanches, les entrées, les escaliers, les ascenseurs et les orientations des fenêtres clairement marqués. Utilisez des couleurs très contrastées pour que les murs et les couloirs navigables se démarquent immédiatement.

Téléchargez votre plan d'étage directement dans Layerpin. La plateforme optimise et prépare le fichier pour un zoom profond réactif, permettant aux navigateurs de demander une résolution adaptée à l'écran et au niveau de zoom du visiteur.

Pour les espaces clos tels que les bureaux, les salles de réunion, les unités de vente au détail ou les stands d'exposition, utilisez les outils de forme de polygone et de rectangle de Layerpin plutôt que de simples épingles. Les formes mettent en valeur l’empreinte physique de la zone, rendant les limites spatiales indubitables.

Appliquez des couleurs de remplissage semi-transparentes (par exemple, 15 à 25 % d'opacité) avec une bordure unie de 2 px. Cela permet aux détails architecturaux situés en dessous, tels que les ouvertures de porte, la disposition des sièges et les numéros de pièce, de rester entièrement visibles tout en communiquant les états de sélection.

Configurez des états de survol et actifs distincts. Lorsqu'un visiteur survole la salle 302, une lueur subtile ou un éclaircissement de remplissage fournit un retour tactile immédiat, signalant que l'espace est cliquable.

Alors que les formes définissent les pièces, les marqueurs à épingles sont idéaux pour les destinations individuelles : bureaux de réception, toilettes, sorties de secours, cafés, ascenseurs et équipements audiovisuels.

Layerpin vous permet de personnaliser les icônes d'épingles, les styles de marqueurs et les étiquettes de badges. Utilisez des icônes universellement reconnues (par exemple, une tasse de café pour les salles de repos, une icône d'ascenseur pour les ascenseurs) afin que les visiteurs puissent localiser les équipements essentiels sans lire de texte.

Organisez les marqueurs en catégories fonctionnelles afin que les visiteurs puissent activer et désactiver les couches d'agrément selon leurs besoins.

Lorsqu'un visiteur clique sur une salle ou un stand, la fiche d'information doit répondre immédiatement à ses prochaines questions. Incluez des photos de haute qualité de l'intérieur, de la superficie/capacité, des équipements techniques disponibles et de l'état d'occupation actuel.

Chaque carte doit comporter un bouton d'appel à l'action bien visible : « Planifier une visite », « Bureau de réservation », « Réserver une salle de réunion » ou « Contacter un agent de location ». Connectez ces boutons directement à votre Calendly, moteur de réservation ou formulaire CRM.

Sur les écrans mobiles, Layerpin adapte automatiquement les cartes d'informations dans un tiroir inférieur ergonomique, garantissant ainsi une utilisation d'une seule main pour les visiteurs se promenant dans l'espace physique.

Une fois votre plan d'étage interactif prêt, son intégration sur votre site Web prend moins de deux minutes. Copiez le script d'intégration réactif léger ou l'extrait iframe de Layerpin et collez-le dans les applications WordPress, Webflow, Squarespace, Wix, Framer ou Next.js personnalisées.

Pour les kiosques physiques et la signalisation sur site, générez des codes QR qui renvoient directement à des salles spécifiques ou à la vue mobile interactive complète. À mesure que les attributions de chambres ou les statuts de location changent, mettez à jour la carte dans Layerpin et publiez vos intégrations en direct, puis utilisez la version nouvellement publiée sans nécessiter de modifications du code du site Web.