Design UX/UI de site vitrine

Ward Group

Cabinet d'architecture et de rénovation immobilière haut de gamme.
Présentation du site web WARD

Contexte

Spécialisée dans le design et la rénovation de bien immobilier de luxe, l'entreprise a besoin de gagner en visibilité et de se démarquer dans un marché très concurrentiel.

WARD Group possède déjà une charte graphique dédiée au print. Il s'agit de reprendre les éléments de son identité visuelle et de l'adapter pour le format web.

Logo WARD

Exploration du besoin

Mini charte graphique

Ward possède déjà une mini charte graphique, qui est axé sur du print. Il est important de décliné cette charte pour du web afin de prendre en compte les contraintes liées à l'accessibilité (typographie adapté à la lecture de paragraphe, contraste entre texte et fond, etc.).

Afin de définir le style graphique du site, j'ai proposé à Anthony d'élaborer ensemble un moodboard, comprenant différentes esthétiques liées au secteur de l'architecture et de la rénovation. Il s'agit d'affiner l'univers visuel de WARD, afin d'être au plus proche de la vision et des valeurs de l'entreprise.

Les couleurs de WARDUn pattern graphique de WARDUn pattern d'illustrations de WARDLes typos utilisées de WARD

Propositions graphiques

Afin de définir l'angle esthétique du site web, j'ai réalisé 4 propositions graphiques, en cohérence avec sa charte graphique et prenant en compte les souhaits d'Anthony via le moodboard.

Proposition A

Proposition graphiqueProposition graphique

Proposition B

Proposition graphiqueProposition graphique

Proposition C

Proposition graphiqueProposition graphique

Proposition D

Proposition graphiqueProposition graphique

Structure du site web

Arborescence et parcours utilisateur

Lors de cet atelier avec Anthony, nous avons ranger et structurer l'ensemble des contenus.
L'objectif final est d'avoir une arborescence clair et compréhensible pour le futur site.

Atelier d'idéation pour la conception du site WARD
Atelier de structure du contenu afin d'élaborer l'arborescence du site.

Wireframes & Maquettage

Wireframes

Suit à l'atelier d'idéation sur la structure du site, je passe à l'étape du wireframing. Il s'agit de construire le squelette du site qui intègre le contenu fourni par Anthony. Ce squelette doit être au plus proche du résultat finale afin de s'assurer de la pertinence des choix en sections, et à l'emplacement des contenus.

Les wireframes du site WARD
Wireframe de la site vitrine Ward Group.

Maquettes

Une fois que les wireframes ont bien été définis avec Anthony, je passe par l'étape finale tant attendu : le maquettage. AInsi je met en forme et en couleurs les wireframes, avec un design UI qui respecte les contraintes en accessibilité. Au fur et à mesure de l'avancé, nous voyons ensemble pour statuer sur des petits sujets en design, tout en s'assurant de la faisabilité en développement Webflow.

Les maquettes de site WARD
Maquettes finales du site vitrine.

Conclusion

Le projet Ward a été un projet auquel j'ai pris énormément de plaisir à réaliser le design de WARD, un site qui se veut original, différenciante dans le secteur de l'immobilier.

Une belle première collaboration  avec Camille, intégratrice Webflow, et de superbes échanges avec Anthony, qui possède aujourd'hui un site web flexible et performant, répondant exactement à ses attentes.

Présentation du site web WARD

Mes projets

Quelques projets réalisés avec ☀️

Picto Fleche vers le haut