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 biens immobiliers 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 les 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ée sur du print. Il est important de décliner cette charte pour du web afin de prendre en compte les contraintes liées à l'accessibilité (typographie adaptée à 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 rangé et structuré l'ensemble des contenus.
L'objectif final est d'avoir une arborescence claire 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

Suite à 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 final afin de s'assurer de la pertinence des choix en sections, et de l'emplacement des contenus.

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

Maquettes

Une fois que les wireframes ont bien été définis avec Anthony, je passe à l'étape finale tant attendue : le maquettage. Ainsi je mets en forme et en couleurs les wireframes, avec un design UI qui respecte les contraintes en accessibilité. Au fur et à mesure de l'avancée, nous voyons ensemble pour statuer sur des petits sujets en design, tout en nous 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 dont j'ai pris énormément de plaisir à réaliser le design : un site qui se veut original et différenciant 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 accompagnant 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

Intégration Webflow

📱 Site vitrine
🛠️ Intégration Webflow

Intégration des maquettes de Claire Pinot pour le nouveau site web de Sonik, qui propose une plateforme SaaS de détection & de conversion de leads dédiée aux équipes Sales, SDR & marketing.

Picto flèche de bouton

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 les collaborateurs à améliorer leur santé via le sport, et à réduire leur bilan carbone grâce à 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