UX/UI – Squarespace
Site vitrine
Raphaël Mulot
Raphaël Mulot
Raphaël Mulot
Le photographe professionnel Raphaël Mulot cherche à valoriser son activité en ligne à travers son premier site sur Squarespace
Le photographe professionnel Raphaël Mulot cherche à valoriser son activité en ligne à travers son premier site sur Squarespace
Mon rôle
Mon rôle
Mon rôle
UX/UI Designer
UX/UI Designer
UX/UI Designer
Client
Client
Client
Raphaël Mulot
Raphaël Mulot
Raphaël Mulot
Outils
Outils
Outils
Squarespace
Squarespace
Squarespace
Contexte
Contexte
Raphaël Mulot cherche à valoriser son activité en ligne à travers un site moderne et structuré mettant en avant ses compétences, ses références et son portfolio.
Contexte
Raphaël Mulot cherche à valoriser son activité en ligne à travers un site moderne et structuré mettant en avant ses compétences, ses références et son portfolio.
Objectifs
Objectifs
Objectifs
Présenter le travail de Raphaël Mulot à travers un portfolio valorisant ses prestations.
Comment renforcer sa présence en ligne et à faciliter le contact avec les futurs clients ?
Présenter le travail de Raphaël Mulot à travers un portfolio valorisant ses prestations.
Comment renforcer sa présence en ligne et à faciliter le contact avec les futurs clients ?
Ma démarche
Ma démarche
Ma démarche
Raphaêl n’avait pas de site web auparavant et disposait déjà de ses textes et d'attentes précises.
Ma démarche a porté sur la structuration, la mise en valeur et l’optimisation du site dans le cadre de Squarespace.
Analyse des besoins
Benchmark
Observation du marché et analyse de sites de photographes de mariage concurrents.
Analyse des codes du secteur
Structuration des contenus
Hiérarchisation et organisation des sections clés
Parcours utilisateur et simplification de la navigation
Design UI et optimisation UX
Raphaêl n’avait pas de site web auparavant et disposait déjà de ses textes et d'attentes précises.
Ma démarche a porté sur la structuration, la mise en valeur et l’optimisation du site dans le cadre de Squarespace.
Analyse des besoins
Benchmark
Observation du marché et analyse de sites de photographes de mariage concurrents.
Analyse des codes du secteur
Structuration des contenus
Hiérarchisation et organisation des sections clés
Parcours utilisateur et simplification de la navigation
Design UI et optimisation UX
Synthèse
Synthèse
Synthèse
Benchmark
Analyse de sites de photographes de mariage (Les Photographistes, Mélanie Bultez, Samantha Pastoor) afin d’identifier les bonnes pratiques et les codes visuels du secteur.
Analyse de sites de photographes de mariage (Les Photographistes, Mélanie Bultez, Samantha Pastoor) afin d’identifier les bonnes pratiques et les codes visuels du secteur.
Constat :
Choix de typographies peu lisibles et contrastes insuffisants
Surcharge d’informations avec des contenus présentés sans hiérarchisation
Manque de cohérence visuelle et éditoriale qui peut nuire à l'image professionnelle.
Constat :
Choix de typographies peu lisibles et contrastes insuffisants
Surcharge d’informations avec des contenus présentés sans hiérarchisation
Manque de cohérence visuelle et éditoriale qui peut nuire à l'image professionnelle.
Opportunités UX/UI
Opportunités UX/UI
À partir du benchmark ainsi que l'analyse des besoins de Raphaël, plusieurs opportunités ont été identifiées et ont guidé les choix de conception.
À partir du benchmark ainsi que l'analyse des besoins de Raphaël, plusieurs opportunités ont été identifiées et ont guidé les choix de conception.
Home page synthétique : accès direct aux informations sans scroll excessif
Home page synthétique : accès direct aux informations sans scroll excessif
Call-to-action visibles : incitation au contact ou à la réservation mise en évidence.
Call-to-action visibles : incitation au contact ou à la réservation mise en évidence.
Hiérarchisation de l’information : mettre en avant les photos et guider l’utilisateur
Hiérarchisation de l’information : mettre en avant les photos et guider l’utilisateur
Accessibilité renforcée : typographies lisibles et contrastes adaptés
Accessibilité renforcée : typographies lisibles et contrastes adaptés
Design UI et optimisation UX
Design UI et optimisation UX
La palette repose sur un fond clair pour créer une atmosphère douce contrasté par un brun élégant utilisé pour les textes et boutons principaux. Des blocs blancs accueillent les témoignages offrant une respiration visuelle et une meilleure lisibilité du contenu.
Concernant la typographie, Adamina est utilisée pour les titres et headings apportant au site une identité élégante et affirmée avec des paragraphes en Raleway, une sans-serif moderne assurant lisibilité et équilibre.
La palette repose sur un fond clair pour créer une atmosphère douce contrasté par un brun élégant utilisé pour les textes et boutons principaux. Des blocs blancs accueillent les témoignages offrant une respiration visuelle et une meilleure lisibilité du contenu.
Concernant la typographie, Adamina est utilisée pour les titres et headings apportant au site une identité élégante et affirmée avec des paragraphes en Raleway, une sans-serif moderne assurant lisibilité et équilibre.
Le header avec un logo et un menu provisoires introduit le site avec une phrase d’accroche claire et guide l’utilisateur vers le contenu principal.
Le header avec un logo et un menu provisoires introduit le site avec une phrase d’accroche claire et guide l’utilisateur vers le contenu principal.
L’aperçu du portfolio placé juste après le header capte immédiatement l’attention et présente les projets phares.
Le défilement horizontal avec flèches facilite la découverte sans allonger la homepage pour pouvoir accéder plus vite aux autres informations.
L’aperçu du portfolio placé juste après le header capte immédiatement l’attention et présente les projets phares.
Le défilement horizontal avec flèches facilite la découverte sans allonger la homepage pour pouvoir accéder plus vite aux autres informations.
La page portfolio quand à elle présente des photos sélectionnées par le photographe sous forme de vignettes visuelles. Leur taille adaptée, la disposition en grille et le défilement horizontal offrent une navigation fluide et intuitive sans alourdir la page.
La page portfolio quand à elle présente des photos sélectionnées par le photographe sous forme de vignettes visuelles. Leur taille adaptée, la disposition en grille et le défilement horizontal offrent une navigation fluide et intuitive sans alourdir la page.
Les témoignages ont été intégrés dans des pages stratégiques comme la homepage et la page “Mariage”.
Avec une photo et un cadre blanc pour plus de lisibilité, ils présentent aux visiteurs une expérience humaine et rassurante tout en transmettant l’émotion et l’authenticité des retours clients.
Les témoignages ont été intégrés dans des pages stratégiques comme la homepage et la page “Mariage”.
Avec une photo et un cadre blanc pour plus de lisibilité, ils présentent aux visiteurs une expérience humaine et rassurante tout en transmettant l’émotion et l’authenticité des retours clients.
Challenges et Prochaines étapes
Challenges et Prochaines étapes
Le principal challenge a été de travailler avec les contraintes de Squarespace qui limitent certaines personnalisations tout en respectant les demandes du client, valorisant les projets et garantissant une navigation claire.
Les prochaines étapes incluent le remplacement des visuels provisoires, l’optimisation de la lisibilité et des parcours utilisateurs ainsi que l’exploration de futures améliorations UX/UI.
Le principal challenge a été de travailler avec les contraintes de Squarespace qui limitent certaines personnalisations tout en respectant les demandes du client, valorisant les projets et garantissant une navigation claire.
Les prochaines étapes incluent le remplacement des visuels provisoires, l’optimisation de la lisibilité et des parcours utilisateurs ainsi que l’exploration de futures améliorations UX/UI.