À la suite du succès de l’outil Expert, l’un des produits internes, j’ai pris en charge l’ensemble des outils internes de la plateforme Preventimmo. Le projet consistait cette fois à concevoir trois outils en parallèle, destinés à améliorer les workflows internes.
Étant seul sur la partie conception produit et design, j’ai mis en place un design system pour assurer cohérence et efficacité entre les trois outils.
Certains éléments de ce projet sont confidentiels. Si vous avez un accès, connectez-vous pour découvrir les visuels. Sinon, je serais ravi d’en discuter avec vous lors d’un échange privé.
Certaines couleurs fonctionnent aussi bien sur fond clair que foncé : ce sont les couleurs partagées.
Couleurs thèmes
Qu’elle soit en mode clair ou sombre, chaque version possède une identité colorimétrique distincte.
×
×
×
×
×
×
Couleurs graphs
Les couleurs des graphiques sont des teintes réutilisées dans l’ensemble des rapports pour assurer une lecture fluide et une cohérence visuelle entre les différents types de données.
Texte
La typographie repose sur Roboto, une police simple et efficace, qui permet une lecture confortable et une hiérarchie visuelle bien marquée.
×
Elément de Design Système
Boutons
Le design system propose deux styles de boutons : les boutons pleins, avec un fond coloré, et les boutons au trait, plus légers et sans fond. Chaque variante a son usage, en fonction du niveau d’importance ou du contexte d’affichage.
×
×
×
×
Elément de Design Système
×
×
Tooltips
Pour les boutons ou call-to-action représentés uniquement par une icône, une tooltip apparaît au survol pour préciser leur fonction.
Input texte
Ici, chaque champ peut intégrer des indications claires pour aider l’utilisateur à bien le remplir, qu’il s’agisse d’un libellé complémentaire, d’un exemple ou d’un message contextuel.
×
×
×
×
Dropdown & Autocomplet
L’autocomplétions propose des suggestions au fil de la saisie, tandis que les menus déroulants conviennent aux choix plus simples ou limités.
Datepicker
Le datepicker prend en charge la sélection d’une date ou d’une plage, avec une interface simple et accessible. Il permet la saisie directe ou l’ouverture d’un calendrier, avec une gestion claire des états (focus, sélection, désactivation) et des validations intégrées.
×
×
×
×
Selecteur & Switch
Les sélecteurs regroupent cases à cocher et boutons radio. Ils permettent de choisir un ou plusieurs éléments, avec un libellé clair et des états visuels lisibles.
Les switchs servent à activer ou désactiver une option instantanément. Leur design distingue nettement les états actif et inactif, même sans couleur.
Header
Le header offre une navigation principale discrète, avec des boutons aux états clairs (survol, focus, actif). Le menu profil regroupe les actions essentielles, accessibles en un clic et entièrement navigables au clavier.
×
×
×
×
Tags
Le tag sert à signaler un élément, un statut ou un filtre actif. Il peut être statique ou retirable lorsqu’il représente un filtre appliqué. Chaque tag est pensé pour rester lisible, discret et immédiatement identifiable.
Messages de notifications
Nous avons déployé des messages de notifications, à trois niveaux : informatif, attention et urgence afin de guider l’utilisateur au bon moment et mettre en avant l’essentiel.
×
×
Iconographie
Illustrations
Pour illustrer les grandes thématiques, j’ai conçu des visuels plus travaillés que l’iconographie classique, avec des couleurs propres et des effets de volume et d’ombre.
×
×
×
×
×
×
Font-icones
Chaque version inclut aussi des éléments invariables, comme les icônes WYSIWYG, les logos produits ou les pictos spécifiques comme les « Andrew ».
Pour répondre aux différents usages, la font existe en trois graisses : Regular, Medium et Bold.
J’ai créé une iconographie sur mesure pour l’ensemble des projets. Les icônes sont dessinées sous Illustrator, puis intégrées dans une font-icône personnalisée.
Régular
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
Medium
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
Bold
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
×
Andrew
Les Andrew est petit personnes utilisés dans certaines situation pour passer des messages sur les produits
×
×
×
×
×
×
×
×
WYSIWYG
×
×
×
×
×
×
×
×
×
×
×
×
×
×
Changer le thème
Je vous accompagne dans la conception adaptées à vos besoins. Échangeons ensemble
