2024 Refonte du Site Web de Homegrade

Accessibilité

System design

UX design

Quand Homegrade a fait appel à nous, l’objectif était clair : réaliser un site web alliant design élégant, ergonomie intuitive et accessibilité exemplaire. Mission acceptée !  Résultat : un site mijoté avec soin,
où chaque détail est optimisé pour une navigation fluide et inclusive

Découvrez comment nous avons sublimé les contenus de Homegrade en une expérience utilisateur aussi esthétique qu’efficace.

Nous avons imaginé une interface claire et intuitive, pensée pour accompagner chaque utilisateur sans friction. Un design qui respire la simplicité, une ergonomie fluide et une expérience utilisateur qui donne envie de revenir.

Différentes captures d’écran de pages "conseils" sur mobile et desktop

Chez Homegrade, l’accessibilité est au cœur de l’expérience. Nous avons intégré les normes WCAG 2.1 AA pour offrir un site inclusif et fonctionnel.

Contrastes optimisés, tailles de texte ajustées, et un code irréprochable : nous avons tout pensé pour que chacun puisse naviguer sans effort.

Pas d’artifice, juste une interface conçue pour tous, avec soin et précision.

Pictogrammes pour représenter l'accessibilité WCAG 2.1
Capture d'une maquette web qui affiche le system design accessible

Dix thématiques, dix palettes de couleurs soigneusement élaborées.

Notre studio a pensé chaque choix chromatiquee pour garantir la lisibilité et refléter l’identité visuelle de Homegrade. Sur les pages de conseils comme dans les illustrations, toutes les couleurs et tous les contrastes sont calculés pour marier accessibilité et esthétisme.
Un travail minutieux, qui fait briller chaque détail sans compromettre l’expérience utilisateur.

Chaque thématique est représentée par sa propre illustration et sa propre palette de couleurs accessibles pour les différents daltonismes


Pour Homegrade, nous avons créé un système design complet : boutons, pictogrammes et éléments de navigation, tous pensés pour s’intégrer avec fluidité et clarté.

Pas de surcharge visuelle, mais une structure qui guide et rassure l’utilisateur à chaque étape. Chaque détail compte.

Mockup de la partie “Découvrez nos conseils par thématique” de la page d’accueil du site Homegrade
Quelques éléments du design système : boutons, flèches, navigation, pictogrammes, décoration de liens, icônes de réseaux sociaux, etc.

Pour enrichir le site, nous avons imaginé un set d’illustrations sur mesure, déclinable pour chaque thématique.

Ces visuels jouent un rôle essentiel : ils clarifient les messages et rendent les pages plus engageantes.

Sobres, précis et cohérents, ils apportent une touche chaleureuse tout en respectant les codes graphiques de Homegrade.

Elements du système design
Exemples des différentes illustrations qui animent toutes les pages du site internet. Sont représentés ici : cookies, budget, menuiserie, audit, projet, accord et réflexion.

Nous avons développé des blocs Gutenberg entièrement personnalisés pour structurer et enrichir les contenus du site. 

Schémas, tableaux, visuels ou appels à l’action : chaque bloc a été conçu pour être à la fois esthétique, ergonomique et conforme aux normes d’accessibilité. 

Une solution élégante et pratique, qui permet à Homegrade de gérer son contenu en toute simplicité.

Illustration de la mascotte Homegrade qui travaille sur un pc portable