Hubside
Clients
Habilité
Année
Introduction
Présentation du projet
Puis, sous l’impulsion de M.Fegaier, de nouveaux services sont venus compléter l’offre HUBSIDE tel que le “DRIVE” ou le “BUDGET”. Différentes équipes se sont constituées et la réalisation de l’UI et L’UX de ces produits s’ est faite indépendamment. L’offre HUBSIDE est maintenant un écosystème de produits interagissant les uns avec les autres. Il était devenu indispensable d’harmoniser graphiquement et fonctionnellement toutes les interfaces créées tout en respectant l’identité de la marque.
mise en situation 1er écran
Recommandations
Structurer et documenter l’ensemble des règles de mise en page, des layers, la grille responsive, les règles des espacements, la navigation et les menus.
Adopter une navigation commune afin de faciliter le parcours de l’utilisateur dans l’écosystème Hubside.
Regrouper l’ensemble des composants primaires d’une plateforme web : boutons, listes, champs texte, cards, toolbars, tooltips, sélection control… Ainsi que les patterns communs (molécules) : formulaire, search, authentification, chat, notification… Ces éléments sont propres au contexte de l’entreprise et doivent être identifiés en début de conception.
Pour chaque couleur secondaire (Produits), tester leurs contrastes sur fond blanc et fond bleu marine et s’assurer d’une valeur minimum pour valider leurs emplois. Avec rapport minimum de 3.00 sur ces deux arrières plans on peut décupler les possibilités graphiques des produits tout en garantissant l’accessibilité aux mals-voyants
Éviter autant que possible l’utilisation d’aplats de couleurs vives pour le repos de l’œil ou équilibrer les aplats vifs avec une dominante de blanc.
Utilisation de couleurs communes pour tous les produits tel que le gris foncé pour les liens secondaires, le noir pour les overlays, le blanc pour le body…
Utiliser des couleurs vives pour dynamiser la charte. Grâce à leurs utilisations, elles viendront égayer l’image globale de la marque et apporteront un équilibre entre couleurs vives et bleu marine.
Utiliser beaucoup de blanc tournant pour supporter visuellement l’emploi de ces nouvelles couleurs et faciliter une visualisation prolongée des interfaces.
Adopter la même iconographie (icônes, illustrations, style photographique) pour faciliter l’harmonie entre les produits et les interfaces.
Éviter l’utilisation de l’aplat de couleurs bleu marine dans les maquettes “produits”, car cela donne un rendu triste aux créations. Privilégier cette couleur pour la communication corporate ou du site ombrelle.(ex: Site Corporate HUBSIDE, Site job)
Conception
Un premier travail d’harmonisation UI et UX des interfaces à été nécessaire. Nous avons identifié les “patterns” communs à chaque produit et sélectionné une base réduite de composants avec des règles d’ergonomie. En outre, nous avons travaillé en collaboration avec les équipes marketing afin de s’assurer de la cohérence graphique avec la charte du groupe INDEXIA.
Aperçu du design system
Mise en situation
Mises en situations & Déclinaisons
Annexes
Puisqu’un proto’ vaut mieux que 10 000 mots, parcourez l’ensemble du projet au travers de maquettes en lignes.
