Aller au contenu
Projets
Site entreprise
2023

Emundus E-dossiers & récolte de données

  • Développement web
  • Direction artistique
  • Site internet
  • Webdesign

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

Général • Outils

Joomla!-Logo-white
logo-yootheme-white
logo-figma-white
uikit-logo-white
Bleu

#1E53F9

Orange

#F9561E

Lavande

#A6AFF4

Bleu nuit

#1B1F3C

Clair

#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.

 

0
maquettes Figma
0
illustrations UI
Illustration d'interface UI simplifiée

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.

 

Illustration d'interface UI simplifiée
Illustration d'interface UI simplifiée

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.

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