Emundus étant devenu ces dernières années un acteur important dans le domaine de la gestion de dossiers numériques et collecte de données, la refonte leur site vitrine vieillissant était un enjeu important : pour une communication visuelle plus moderne, plus professionnelle, et reflétant mieux leur poids dans le secteur.
Général • Brief
À la suite de la conception de leur site carrière, Emundus m’a chargé de la refonte de leur site entreprise, présentant leur solution de gestion de dossiers, collecte de données et mise en place de workflow.
Cette refonte graphique et structurelle avait plusieurs buts :
- moderniser l’apparence et instaurer des principes graphiques à travers une nouvelle identité visuelle
- présenter de manière ergonomique et fluide, des contenus nombreux et denses
- faciliter l’administration et la création de nouveaux contenus via des modèles de pages sur-mesure
#1E53F9
#F9561E
#A6AFF4
#1B1F3C
#F7F8FC
Définition du thème visuel et conception de maquettes graphiques
L’ancien site d’Emundus avait un design maladroitement défini, posé sur une identité aux contours flous, et manquait cruellement d’ergonomie dans le sectionnement de ses contenus et sa navigation globale.
Ayant précédemment posé lors de la conception de leur site carrière les bases d’un nouveau thème graphique, j’ai pu m’appuyer dessus pour créer celui de leur site entreprise, décliné sur les 12 maquettes produites sur Figma pour cette refonte.
Maquettes • Style graphique
Afin de se détacher nettement de la lourdeur du style précédent, le nouveau design propose une mise en page aéré et ouverte et un contraste important. Les deux couleurs de base d’Emundus sont complétées d’une troisième, lavande clair, venant souligner et décorer les contenus principaux, notamment par de larges formes géométriques et motifs.
Maquettes • Illustrations UI
La solution proposée par Emundus étant numérique, le choix a été fait de limiter l’usage global de photograhie pour mettre plutôt en avant la solution et son fonctionnement. Des illustrations vectorielles aux couleurs d’Emundus ont
Pour ne pas surcharger les écrans de captures d’écrans et ne pas lasser l’utilisateur tout en restant pertinent, j’ai créé des illustrations mettant en scène des bouts d’interfaces schématisées, figurant certaines interactions et fonctionnalités de la solution.
Conception technique, développement et intégration web
Le site a été conçu sous Joomla! 5 associé au constructeur de sites Yootheme, pour une flexibilité optimale et une expérience d’édition fluide. Il est bien entendu responsive. Afin de reproduire fidèlement les maquettes graphiques, j’ai étendu les fonctionnalités avec un thème enfant, et également y ajouter de nouveaux modules sur-mesure destinés à l’éditeur.
Sur un espace de préproduction dédié, j’ai créé la structure du site, configuré les composants globaux et recréé les modèles de pages, permettant à Emundus de prendre ensuite la main sur la création des contenus et la mise en ligne du site.
- PHP 8.1
- LESS/CSS
- JS
- TWIG/HTML
Site • Fonctionnalités et modules sur-mesure
Pour répondre aux besoins spécifiques des maquettes, j’ai développé un thème enfant embarquant des fonctionnalités supplémentaires.
Cela m’a permis non seulement de créer des modules visuels interactifs sur-mesure (tables de tarifs, animations lottie, onglets, carousels, …), intégrés directement dans l’interface de l’éditeur, mais également d’étendre les modules natifs. Enfin, j’ai développé des fonctionnalités et modifié les templates globaux du thème.
Site • Thème visuel et framework CSS
Le thème visuel est basé sur framework CSS UIKit, embarqué par Yootheme : j’en ai tiré parti afin garantir un design moderne et réactif. Une bibliothèque de fichiers .LESS ensuite compilés en CSS permet une personnalisation complète du style graphique pour correspondre à 100% à la nouvelle identité visuelle
