13 avril 2021-Temps de lecture : 4min

Carte interactive et Advanced Custom Fields : un site vitrine au sommet pour MND

MND, c’est groupe industriel spécialisé dans l’aménagement des sites de montagne. Vous prenez une télécabine, croisez un enneigeur et évoluez sur un domaine sécurisé du risque d’avalanche ? C’est eux ! Et en été, vous partez pour une tyrolienne taille XXL ? C’est encore eux !

A travers ses quatre pôles d’activités : Ropeways, Snow, Safety et Leisure, le groupe équipe et sécurise les activités de montagne. Et il fallait à la société un site vitrine flambant neuf pour regrouper et présenter très clairement ses quatre activités et ses centaines de projets autour du monde. Ça tombe plutôt pas mal, c’est une spécialité NewQuest 😎

mnd site vitrine

Côté design, modernité et asymétrie

L’asymétrie, c’est la grande tendance design du moment pour donner plus de dynamisme, mais également faciliter la lecture d’un site web. Et la charte graphique de MND, avec ses montagnes et ses formes déstructurées, se prêtait parfaitement à ce type d’identité visuelle.

Pour donner ce côté asymétrique, nous avons décidé de séparer les pages en deux via une ligne centrale verticale.

Ce qui nous permet d’alterner les blocs : textes, images, citations, etc. de part et d’autre de l’écran. Cela épure la navigation et crée un rythme de lecture en rupture, qui retient l’attention de l’internaute. Pour plus d’immersion, nous avons également choisi de développer ce site en pleine page et de laisser de grands espaces pour les visuels très travaillés de MND.

design asymétrique mnd

Et pour mettre l’accent sur les call-to-action du site, nous avons réalisé une animation sur le curseur. Celui-ci se transforme lorsque l’on passe sur la section contact ou références, ajoutant également une touche d’originalité au site.

animation curseur site vitrine

Enfin, un gros travail d’architecture, notamment pour réunir les contenus éditoriaux des quatre pôles d’activités de MND a été réalisé en amont. Pour structurer l’ensemble graphiquement, une couleur a été associée à chacun de ces pôles. Couleur que l’on retrouve quelle que soit la rubrique du site où l’on se trouve, de la page d’accueil aux pages-projets.design

La carte interactive : l’atout MND pour présenter ses projets

Un design qui claque donc ! Mais un autre atout de taille pour MND : une carte interactive pour mettre en avant les réalisations du groupe partout dans le monde. Il s’agit en fait d’un fond de carte Google Maps que nous avons mis aux couleurs de MND.

D’un seul coup d’œil, cette carte interactive permet de voir l’ensemble des projets du groupe.

On retrouve sur cette carte les couleurs propres à chaque pôle d’activité. En cliquant sur chaque épingle, le visiteur accède à une fiche reprenant les caractéristiques principales du projet. En cliquant sur « Découvrir le projet », une nouvelle page s’affiche pour donner les détails de chaque réalisation.

carte interactive custom wordpress

Mais cette carte a un autre intérêt commercial. Grâce à son système de filtre, on peut choisir d’afficher les filiales et les distributeurs de MND partout dans le monde. Chaque client peut ainsi trouver le point de contact à proximité de chez lui en quelques secondes.

Une mise en page ultra-personnalisée et administrable grâce aux Advanced Custom Fields

Enfin, sur un site de cette ampleur, il fallait à notre client une administration claire et simple en back-office. C’est pour cette raison que nous avons choisi d’utiliser un système d’Advanced Custom Fields (ACF) plutôt qu’un outil plus générique comme Gutenberg.

Ces ACF nous permettent d’hyper-personnaliser le design WordPress tout en délivrant un site administrable sans aucune connaissance spécifique

Pour faire simple, nous avons développé plusieurs templates en fonction des différents designs à intégrer. Pour chaque template, nous avons ensuite créé un groupe de champs ACF. Ils sont appelés en front-office et sont administrables et personnalisables en back-office. Ces champs étant hyperspécialisés, notre client ne peut pas se tromper sur leurs contenus. Il peut donc administrer sereinement son site, sans savoir à se soucier des possibles répercussions sur son design.

acf back office

En vrac, nous avons également réalisé des développements spécifiques sur la page contact qui renvoie soit vers le groupe, soit vers une filiale spécifique. Et nous avons mené une belle réflexion autour du responsive, en raison du design asymétrique. Enfin, nous travaillons sur l’intégration de nouvelles langues puisqu’à termes, le site sera traduit en huit langues. Bref, un projet complexe et multi-facettes comme nous les aimons ! Merci encore à toute l’équipe de MND pour sa confiance ! 😉

Ouvrez la discussion

En laissant un commentaire vous acceptez de laisser votre nom/ pseudo pour affichage sur le site et votre adresse mail pour pouvoir vous contacter à propos de votre commentaire uniquement si besoin. Vous pouvez à tout moment demander l’anonymisation de vos commentaires.

Laisser un commentaire

Un projet ou des idées ? On peut sûrement vous aider :)

Nouvelle billetterie en ligne et expérience utilisateur simplifiée : le site de Rhônexpress est flambant neuf !

Rhônexpress, c’est le moyen le plus rapide de rallier le centre-ville de Lyon depuis l’aéroport de Saint-Exupéry. Ou l’inverse ! 30 minutes et pas une de plus pour se retrouver à la Part-Dieu, poumon économique de la ville. Continue reading Nouvelle billetterie en ligne et expérience utilisateur simplifiée : le site de Rhônexpress est flambant neuf !

Personnalisation, abonnement ou achat en pack : les brosses à dents Bioseptyl changent de tête !

Entre Bioseptyl et NewQuest, c’est une histoire qui dure ! Nous avions conçu leur premier site e-commerce il y a sept ans, avec l’un de nos premiers abonnements à Mercanet. Et cette année, notre relation entre dans une nouvelle phase ! Continue reading Personnalisation, abonnement ou achat en pack : les brosses à dents Bioseptyl changent de tête !