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 ☀️

Branding & conception site web

📱 Site web
🖼️ Branding
🎨 UX & maquettes UI
🛠️‍ Intégration Webflow

Pour le lancement de son activité, en accompagnement Florent, j'ai réalisé son identité graphique, son logo, le design de son site, jusqu'à l'intégration au pixel près sur Webflow.

Picto flèche de bouton

Refonte UX / UI de site web

Picto Fleche de bouton

Création de site vitrine

📱 Site vitrine
🧱 Structure UX
🎨 Maquettes UI

Réalisation des maquettes UI pour le site vitrine de Graine & Cie, épicerie éco-responsable, proposant des produits en vrac et sans emballage.

Picto flèche de bouton
Présentation site vitrine Graine & Cie

Création de site vitrine

Picto Fleche de bouton

Branding et conception
de site vitrine

📱 Site vitrine
🖼️ Branding
🎨 UX & maquettes UI

Conception de l'identité de marque Viatera. Logo, charte graphique, structure UX et maquette UI pour un cabinet de stratégie en hôtellerie de luxe.

Picto flèche de bouton
Ordinateur portable affichant la page web Viatera avec une vue aérienne de paysage rural et texte en français sur la durabilité discrète.

Refonte application mobile

Picto Fleche de bouton

Refonte d'application mobile

📱 Mobile app
🐻‍❄️ Recherche Utilisateur
🎨 UX & Maquette UI

Refonte d'une application mobile de QVT en entreprise qui engage leurs collaborateurs à améliorer leurs santés via le sport, et à baisser leurs bilans carbone, par de la mobilité douce.

Picto flèche de bouton
Présentation de l'application Squadeasy

Création de landing page

Picto Fleche de bouton

Design UI d'un site vitrine

📱 Site web
🧱 Structure UX
🎨 Maquettes UI

Création du site WARD en UX & UI. Cabinet d'architecture et de rénovation dédié à l'immobilier haut de gamme.

Picto flèche de bouton
Présentation du site web Ward

Refonte UX / UI de site web

Picto Fleche de bouton
Picto Fleche vers le haut