1:"$Sreact.fragment"
2:I[51108,["/_next/static/chunks/644de0c51988d865.js"],""]
19:I[61063,["/_next/static/chunks/567c5dc074a83024.js","/_next/static/chunks/5aaa37a6db4a1042.js"],"OutletBoundary"]
1a:"$Sreact.suspense"
:HL["/images/blog/blog-ux-design.svg","image"]
0:{"buildId":"Bp0Us4AEwhCjpahVLvQ3V","rsc":["$","$1","c",{"children":[["$","div",null,{"className":"max-w-3xl mx-auto px-6 py-16","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Les 5 étapes clés d'un projet UX Design réussi\",\"description\":\"Du brief client au prototype final, voici les 5 étapes essentielles d'un processus UX Design structuré — avec les outils et livrables à chaque phase.\",\"datePublished\":\"2026-03-03\",\"author\":{\"@type\":\"Person\",\"name\":\"Killy Rousseau\"},\"keywords\":\"UX Design, Méthodologie, Figma\",\"image\":\"/images/blog/blog-ux-design.svg\"}"}}],["$","$L2",null,{"href":"/blog","className":"inline-flex items-center gap-2 text-lavender hover:text-lime text-sm font-outfit transition-colors mb-12","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":15,"height":15,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left","aria-hidden":"true","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]," Retour au blog"]}],["$","div",null,{"className":"rounded-2xl overflow-hidden mb-10 aspect-video","children":["$","img",null,{"src":"/images/blog/blog-ux-design.svg","alt":"Les 5 étapes clés d'un projet UX Design réussi","className":"w-full h-full object-cover"}]}],["$","header",null,{"className":"mb-10","children":[["$","div",null,{"className":"flex flex-wrap gap-2 mb-5","children":[["$","span","UX Design",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"UX Design"]}],["$","span","Méthodologie",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"Méthodologie"]}],["$","span","Figma",{"className":"flex items-center gap-1 text-xs font-outfit px-2.5 py-1 rounded-full bg-muted text-lime","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":10,"height":10,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-tag","aria-hidden":"true","children":[["$","path","vktsd0",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["$","circle","kqv944",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],"$undefined"]}],"Figma"]}]]}],["$","h1",null,{"className":"font-dynapuff text-4xl sm:text-5xl text-light leading-tight mb-4","children":"Les 5 étapes clés d'un projet UX Design réussi"}],["$","p",null,{"className":"flex items-center gap-2 font-outfit text-lavender/60 text-sm","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":13,"height":13,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar","aria-hidden":"true","children":["$L3","$L4","$L5","$L6","$undefined"]}],"Publié le ","3 mars 2026"]}]]}],"$L7","$L8"]}],null,"$L9"]}],"loading":null,"isPartial":false}
3:["$","path","1cmpym",{"d":"M8 2v4"}]
4:["$","path","4m81vk",{"d":"M16 2v4"}]
5:["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}]
6:["$","path","8toen8",{"d":"M3 10h18"}]
7:["$","div",null,{"className":"w-16 h-px bg-primary mb-10"}]
8:["$","div",null,{"className":"space-y-5 font-outfit text-light/85 leading-relaxed","children":[["$","p","0",{"dangerouslySetInnerHTML":{"__html":"Le <strong>UX Design</strong> (User Experience Design) vise à concevoir des produits digitaux centrés sur l'utilisateur. Voici la méthodologie en 5 étapes que j'applique dans mes projets."}}],["$","h2","1",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Qu'est-ce que le UX Design ?"}],["$","p","2",{"dangerouslySetInnerHTML":{"__html":"Le UX Design est une discipline qui consiste à concevoir des interfaces (sites web, applications) en plaçant l'utilisateur au centre de chaque décision. L'objectif : créer des expériences intuitives, agréables et efficaces."}}],["$","h2","3",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 1 : La recherche utilisateur (UX Research)"}],["$","p","4",{"dangerouslySetInnerHTML":{"__html":"Avant de dessiner quoi que ce soit, il faut <strong>comprendre les utilisateurs</strong>. Cette phase comprend :"}}],["$","ul","5",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Interviews utilisateurs</strong> : entretiens qualitatifs pour comprendre les besoins, frustrations et comportements"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Personas</strong> : profils fictifs représentant les typologies d'utilisateurs cibles"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Benchmark concurrentiel</strong> : analyse des solutions existantes pour identifier les forces et faiblesses"}}]]}],["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>User journey map</strong> : cartographie du parcours utilisateur actuel"}}]]}]]}],["$","h2","6",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 2 : L'architecture de l'information"}],["$","p","7",{"dangerouslySetInnerHTML":{"__html":"Organisez le contenu de manière logique et intuitive :"}}],["$","ul","8",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Card sorting</strong> : faire trier les contenus par des utilisateurs pour définir la navigation"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Arborescence</strong> : structure hiérarchique des pages et sections"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>User flows</strong> : schémas des parcours utilisateurs pour chaque action clé"}}]]}]]}],["$","h2","9",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 3 : Le wireframing"}],["$","p","10",{"dangerouslySetInnerHTML":{"__html":"Les wireframes sont des maquettes basse fidélité qui définissent la structure des pages sans design :"}}],["$","ul","11",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Focus sur la <strong>hiérarchie de l'information</strong>"}}]]}],["$","li","1",{"className":"flex gap-2","children":["$La","$Lb"]}],"$Lc"]}],"$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16","$L17","$L18"]}]
9:["$","$L19",null,{"children":["$","$1a",null,{"name":"Next.MetadataOutlet","children":"$@1b"}]}]
a:["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}]
b:["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Placement des éléments (navigation, CTA, contenu)"}}]
c:["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Tests rapides avec des utilisateurs pour valider la structure"}}]]}]
d:["$","p","12",{"dangerouslySetInnerHTML":{"__html":"<strong>Outil recommandé</strong> : Figma avec le plugin Wireframe pour des prototypes rapides."}}]
e:["$","h2","13",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 4 : Le prototypage haute fidélité"}]
f:["$","p","14",{"dangerouslySetInnerHTML":{"__html":"C'est là que le design prend vie :"}}]
10:["$","ul","15",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Application de la <strong>charte graphique</strong> (couleurs, typo, iconographie)"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Design des composants réutilisables (<strong>Design System</strong>)"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Micro-interactions et animations"}}]]}],["$","li","3",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"Prototype interactif cliquable pour les tests"}}]]}]]}]
11:["$","h2","16",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Étape 5 : Les tests utilisateurs"}]
12:["$","p","17",{"dangerouslySetInnerHTML":{"__html":"Confrontez votre prototype à de vrais utilisateurs :"}}]
13:["$","ul","18",{"className":"space-y-2 pl-4","children":[["$","li","0",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Tests de guerilla</strong> : 5 utilisateurs suffisent pour identifier 85% des problèmes d'usabilité"}}]]}],["$","li","1",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Tests A/B</strong> : comparer deux versions pour optimiser les conversions"}}]]}],["$","li","2",{"className":"flex gap-2","children":[["$","span",null,{"className":"text-red mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"dangerouslySetInnerHTML":{"__html":"<strong>Heatmaps</strong> : analyser les zones d'attention et de clic"}}]]}]]}]
14:["$","h2","19",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"Quels outils pour le UX Design en 2026 ?"}]
15:["$","div","20",{"className":"overflow-x-auto","children":["$","table",null,{"className":"w-full text-sm border-collapse","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th","0",{"className":"text-left px-4 py-2.5 bg-surface border border-muted text-light font-semibold","dangerouslySetInnerHTML":{"__html":"Outil"}}],["$","th","1",{"className":"text-left px-4 py-2.5 bg-surface border border-muted text-light font-semibold","dangerouslySetInnerHTML":{"__html":"Usage"}}]]}]}],["$","tbody",null,{"children":[["$","tr","0",{"children":[["$","td","0",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"<strong>Figma</strong>"}}],["$","td","1",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"Wireframes, prototypes, design system"}}]]}],["$","tr","1",{"children":[["$","td","0",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"<strong>Maze</strong>"}}],["$","td","1",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"Tests utilisateurs à distance"}}]]}],["$","tr","2",{"children":[["$","td","0",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"<strong>Hotjar</strong>"}}],["$","td","1",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"Heatmaps et enregistrements de sessions"}}]]}],["$","tr","3",{"children":[["$","td","0",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"<strong>Notion</strong>"}}],["$","td","1",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"Documentation UX et specs"}}]]}],["$","tr","4",{"children":[["$","td","0",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"<strong>FigJam</strong>"}}],["$","td","1",{"className":"px-4 py-2 border border-muted text-light/75","dangerouslySetInnerHTML":{"__html":"Ateliers collaboratifs et brainstorming"}}]]}]]}]]}]}]
16:["$","h2","21",{"className":"font-dynapuff text-2xl text-light mt-10 mb-2","children":"FAQ"}]
17:["$","p","22",{"dangerouslySetInnerHTML":{"__html":"<strong>Quelle est la différence entre UX et UI Design ?</strong> Le UX Design concerne l'expérience globale (recherche, structure, parcours). Le UI Design se concentre sur l'aspect visuel de l'interface (couleurs, typographie, composants). Les deux sont complémentaires."}}]
18:["$","p","23",{"dangerouslySetInnerHTML":{"__html":"<strong>Combien de temps prend un projet UX ?</strong> Un projet UX complet (recherche → prototype testé) prend généralement 4 à 8 semaines selon la complexité. Un audit UX rapide peut se faire en 1 semaine."}}]
1b:null