MAQUETTE UX/UI
Dans le cadre d’un projet scolaire, j’ai réalisé la conception UX/UI d’un site web fictif nommé Hestia, une agence de voyages proposant des séjours sportifs destinés aux débutants, avec un fort accent sur l’esprit de groupe et la cohésion.
Notre réflexion autour du nom et de l’identité de marque vise à retranscrire l’idée de chaleur, de partage et de connexion humaine, valeurs au cœur du concept.
Notre cible principale était constituée de jeunes actifs vivant en grande ville, occupant un poste de bureau et ressentant une lassitude liée à une routine étouffante. Le site devait alors offrir une expérience visuelle respirante et apaisante, pour contraster avec leur quotidien chargé et stressant.
WIREFRAME
L’objectif des wireframes était de créer une interface simple, lisible et accueillante, évitant toute surcharge visuelle.
Nos choix UX se sont orientés sur :
-
Des formes arrondies pour adoucir la perception et rendre l’interface plus accueillante.
-
Une mise en avant des blocs photos afin d’inviter l’utilisateur à se projeter immédiatement dans l’univers du voyage.
-
Une architecture claire et structurée, facilitant la navigation et réduisant l’effort cognitif.
L’ensemble du parcours utilisateur a été conçu selon une démarche desktop-first, puis adapté en version mobile afin de garantir une expérience optimale sur tous les supports.
MAQUETTE INTERACTIVE
La phase de maquettage s’est appuyée sur la direction artistique et la charte graphique élaborées en amont afin d’assurer une cohérence esthétique globale.
Points clés du maquettage :
-
Recherche de photographies de haute qualité, élément central permettant de crédibiliser le site et de transmettre l’émotion du voyage.
-
Construction des principales pages : page produit, page À propos, tunnel d’achat, ainsi que l’intégralité de la version mobile.
-
Application d’une UI visuelle immersive mais épurée, laissant de l’espace et de grands visuels pour transmettre la sensation de “respirer”.
La maquette a ensuite été transformée en prototype interactif avec la fonctionnalité prototype de Figma.
Interactions mises en place :
-
Redirections entre les pages pour simuler le parcours utilisateur.
-
Menu déroulant sur mobile.
-
Animations des boutons (hover et clic) pour renforcer la sensation d’interaction et l’intuitivité de navigation.
Ces micro-interactions participent à rendre l’expérience plus fluide, intuitive et engageante.