{"id":26492,"date":"2022-09-01T01:00:00","date_gmt":"2022-08-31T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=26492"},"modified":"2025-08-20T17:26:27","modified_gmt":"2025-08-20T15:26:27","slug":"guide-de-style-ux-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/","title":{"rendered":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0?"},"content":{"rendered":"<p>Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se rapproche donc fortement de la <a href=\"https:\/\/graphiste.com\/blog\/webdesign-charte-graphique-parfaite-site-web\">charte graphique<\/a>. Vos \u00e9quipes de conception et de d\u00e9veloppement peuvent ainsi s\u2019y r\u00e9f\u00e9rer \u00e0 tout moment afin de respecter votre ligne de design UX. Ce document permet \u00e0 vos projets de se d\u00e9velopper plus rapidement, avec un risque moindre de complications. Voici comment cr\u00e9er un guide de style UX.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. La grille de mise en page<\/h2>\n<figure id=\"attachment_26493\" aria-describedby=\"caption-attachment-26493\" style=\"width: 601px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-26493\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/grid.png\" alt=\"grid concept_webdesign_guide_ux\" width=\"601\" height=\"582\" \/><figcaption id=\"caption-attachment-26493\" class=\"wp-caption-text\"><a href=\"https:\/\/www.carbondesignsystem.com\/guidelines\/2x-grid\/overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Concept de la grille<\/a><\/figcaption><\/figure>\n<p>Multi colonnes, superpos\u00e9e ou modulaire\u2026 la grille est un \u00e9l\u00e9ment d\u00e9terminant et incontournable de votre mise en page qui permet de <a href=\"https:\/\/graphiste.com\/blog\/web-design-restructurer-site\">structurer votre web design<\/a>.<\/p>\n<p>Celle-ci induit une notion de limite, et fournit des rep\u00e8res de positionnement coh\u00e9rents entre vos diff\u00e9rents \u00e9l\u00e9ments (typographies, photos, illustrations, formes, etc.).<\/p>\n<p>De fait, vous devez int\u00e9grer les donn\u00e9es relatives \u00e0 la grille de mise en page dans votre guide de style UX, afin de vous assurer de la lisibilit\u00e9 de chaque conception produite par vos \u00e9quipes.<\/p>\n<p>&nbsp;<\/p>\n<h2>2. Les r\u00e8gles d\u2019espacements<\/h2>\n<p>Les \u00e9l\u00e9ments ne doivent jamais \u00eatre trop proches les uns des autres. Cette notion d\u2019<a href=\"https:\/\/graphiste.com\/blog\/maitriser-espaces-typographie\">espace<\/a> donne de l\u2019air \u00e0 vos interfaces et limite les risques d\u2019erreur. Vertical comme horizontal, l\u2019espacement est d\u00e9fini en fonction de votre grille de mise en page, de la taille de l\u2019\u00e9cran, et des diff\u00e9rents \u00e9l\u00e9ments internes.<\/p>\n<p>De plus, cette notion d\u2019espacement se base sur le contexte\u00a0:<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<ul>\n<li>On utilise un espacement plus petit pour les \u00e9l\u00e9ments inclus \u00e0 l&#8217;int\u00e9rieur d&#8217;un composant, comme une \u00e9tiquette, un champ de saisie, etc.<\/li>\n<li>On utilise un espacement plus grand pour les \u00e9l\u00e9ments de la page, comme les sections, le titre, les en-t\u00eates et le contenu.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2>3. Les points d&#8217;arr\u00eat<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-26494 aligncenter\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/points_arret.png\" alt=\"points d'arr\u00eat breakpoints webdesign guide ux\" width=\"700\" height=\"206\" \/><\/p>\n<p>La notion de points d&#8217;arr\u00eat permet \u00e0 vos concepteurs et \u00e0 vos d\u00e9veloppeurs d&#8217;uniformiser leur conception quelle que soit la taille de l\u2019\u00e9cran.<\/p>\n<p>Une donn\u00e9e devenue essentielle avec la multiplication des appareils mobiles.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/differences-print-web-design\">Print et web design&nbsp;: les 12 diff\u00e9rences<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>4. La palette de couleurs<\/h2>\n<figure id=\"attachment_26495\" aria-describedby=\"caption-attachment-26495\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-26495\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/palette_couleurs.jpg\" alt=\"palette couleurs webdesign guide ux\" width=\"700\" height=\"550\" \/><figcaption id=\"caption-attachment-26495\" class=\"wp-caption-text\">Palette de couleurs via <a href=\"https:\/\/uxplanet.org\/creating-a-ux-design-style-guide-for-your-team-e756210865a4\" target=\"_blank\" rel=\"noopener noreferrer\">Ux Planet<\/a><\/figcaption><\/figure>\n<p>Quels que soient vos choix chromatiques, ceux-ci doivent \u00e9galement figurer dans votre guide de style UX.<\/p>\n<p>Notons que la <a href=\"https:\/\/graphiste.com\/blog\/comment-trouver-la-palette-ideale-pour-votre-charte-graphique\">palette de couleurs<\/a> est g\u00e9n\u00e9ralement divis\u00e9e en plusieurs groupes\u00a0:<\/p>\n<ul>\n<li>Les couleurs primaires et secondaires<\/li>\n<li>Les nuances de gris<\/li>\n<li>Les couleurs de statut (succ\u00e8s, avertissement, etc.)<\/li>\n<\/ul>\n<p>Veillez \u00e0 ne pas utiliser trop de couleurs diff\u00e9rentes, \u00e0 vous assurer de leur contraste, et \u00e0 ne pas utiliser les couleurs d&#8217;\u00e9tat comme seuls indicateurs.<\/p>\n<blockquote><p>Utilisez notre <a href=\"https:\/\/www.palettedecouleur.net\/?utm_source=Graphiste&amp;utm_medium=blog&amp;utm_campaign=guide-style-ux\" target=\"_blank\" rel=\"noopener noreferrer\">outil de palette de couleur gratuit<\/a> pour trouver les couleurs id\u00e9ales pour votre site.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>5. La typographie<\/h2>\n<p>Style de police, apparence et structure sont les trois principaux \u00e9l\u00e9ments qui forment la <a href=\"https:\/\/graphiste.com\/blog\/comment-combiner-vos-typographies-bonnes-pratiques-et-outils\">typographie<\/a>. Celle-ci est bien plus importante que l\u2019esth\u00e9tique de votre design afin de favoriser une exp\u00e9rience utilisateur optimale. Elle permet en effet de cr\u00e9er une hi\u00e9rarchie visuelle sur votre site ou votre interface. Vous devez donc imp\u00e9rativement vous assurer de sa clart\u00e9 et de sa lisibilit\u00e9.<\/p>\n<ul>\n<li>La taille de la police est d\u00e9finie en fonction de la longueur du texte, de l&#8217;interligne et de l&#8217;\u00e2ge du lecteur.<\/li>\n<li>Pensez \u00e0 sp\u00e9cifier\u00a0ici les valeurs textuelles de l\u2019interface\u00a0:<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>utilisation des majuscules et minuscules ;<\/li>\n<li>caract\u00e9ristiques des titres, en-t\u00eates de tableaux, boutons, \u00e9tiquettes de champs de formulaire, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>6. Les r\u00e8gles relatives aux boutons et actions<\/h2>\n<p>Rappelez dans votre guide UX toutes les consignes qui r\u00e9gissent les boutons de vos interfaces, et celles qui se r\u00e9f\u00e8rent aux actions de l\u2019utilisateur&nbsp;:<\/p>\n<ul>\n<li>\u00e9tats par d\u00e9faut, au survol, actif, focus, s\u00e9lectionn\u00e9 et d\u00e9sactiv\u00e9\u00a0;<\/li>\n<li>alignement vis-\u00e0-vis du contenu\u00a0;<\/li>\n<li>commentaires affich\u00e9s \u00e0 la suite d\u2019une action\u00a0;<\/li>\n<li>ton employ\u00e9\u00a0;<\/li>\n<li>vocabulaire utilis\u00e9\u00a0;<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>7. Les r\u00e8gles relatives aux formulaires et tableaux<\/h2>\n<p>Pr\u00e9cisez dans votre guide UX toutes les informations relatives \u00e0 vos <a href=\"https:\/\/graphiste.com\/blog\/ux-ui-booster-design-formulaire\">formulaires<\/a>\u00a0:<\/p>\n<ul>\n<li>alignement des \u00e9tiquettes de vos champs de saisie\u00a0;<\/li>\n<li>largeur et hauteurs des champs en fonction de la taille du contenu\u00a0;<\/li>\n<li>indicateur d&#8217;\u00e9tat (actif, d\u00e9sactiv\u00e9 et erreur)\u00a0;<\/li>\n<li>indicateurs pr\u00e9sents dans les champs de saisie (s\u00e9parateurs de date, de num\u00e9ro de t\u00e9l\u00e9phone\u2026)<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>De m\u00eame, sp\u00e9cifier dans ce document toutes les r\u00e8gles qui r\u00e9gissent les <a href=\"https:\/\/graphiste.com\/blog\/reussir-design-tableaux\">tableaux<\/a>\u00a0:<\/p>\n<ul>\n<li>alignement du contenu du tableau\u00a0;<\/li>\n<li>caract\u00e9ristiques des valeurs num\u00e9riques*\u00a0;<\/li>\n<li>sp\u00e9cificit\u00e9s li\u00e9es aux en-t\u00eates, aux boutons, aux ic\u00f4nes\u2026<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p><em>*Format de date par pays, normes UE, normes internationales\u2026 les valeurs num\u00e9riques sont elles-m\u00eames sujettes \u00e0 des normes qu\u2019il est n\u00e9cessaire de rappeler dans votre guide UX.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<p>Un guide de conception UX pr\u00e9cis et bien document\u00e9 est imp\u00e9ratif au travail quotidien de vos \u00e9quipes afin de maintenir la coh\u00e9rence dans vos interfaces. Les principes mentionn\u00e9s dans le document ne doivent toutefois pas \u00eatre trop complexes, de mani\u00e8re \u00e0 \u00eatre plus facilement compris et appliqu\u00e9s par vos collaborateurs. Vous \u00e9viterez ainsi bien des erreurs dans vos choix de <a href=\"https:\/\/graphiste.com\/blog\/webdesign-ux-ui-tendances-2021\">conception de base UX \/ UI<\/a>, et offrirez plus d\u2019autonomie \u00e0 vos d\u00e9veloppeurs au moment de la mise en \u0153uvre.<\/p>\n<p>Vous \u00eates \u00e0 la recherche d\u2019un designer UX pour concevoir vos interfaces num\u00e9riques&nbsp;? Rendez-vous sur <a href=\"https:\/\/graphiste.com\">Graphiste.com<\/a>.<\/p>\n<p>Vous recherchez un d\u00e9veloppeur pour cr\u00e9er votre interface en suivant votre guide de style&nbsp;? Rendez-vous sur <a href=\"https:\/\/www.codeur.com\/?utm_source=Graphiste&amp;utm_medium=blog&amp;utm_campaign=guide-style-ux\" target=\"_blank\" rel=\"noopener noreferrer\">Codeur.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se rapproche donc fortement de la charte graphique. Vos \u00e9quipes de conception et de d\u00e9veloppement peuvent ainsi s\u2019y r\u00e9f\u00e9rer \u00e0 tout moment afin de respecter votre ligne de design UX. [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":26496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[101,27],"tags":[40],"class_list":["post-26492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design","category-webdesign","tag-booster-agence"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-31T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:26:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0?\",\"datePublished\":\"2022-08-31T23:00:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\"},\"wordCount\":948,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg\",\"keywords\":[\"Booster votre agence\"],\"articleSection\":[\"UX design\",\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\",\"url\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\",\"name\":\"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg\",\"datePublished\":\"2022-08-31T23:00:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"description\":\"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"Illustration by Eleonore Millet\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UX design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog","description":"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/","og_locale":"fr_FR","og_type":"article","og_title":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog","og_description":"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se","og_url":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-08-31T23:00:00+00:00","article_modified_time":"2025-08-20T15:26:27+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0?","datePublished":"2022-08-31T23:00:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/"},"wordCount":948,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg","keywords":["Booster votre agence"],"articleSection":["UX design","Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/","url":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/","name":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg","datePublished":"2022-08-31T23:00:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","description":"Le guide de conception UX est un document qui vous permet de r\u00e9pertorier l\u2019ensemble des choix graphiques pris par l\u2019entreprise pour son web design. Il se","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/04\/webdesign_guide_style_ux-1.jpg","width":850,"height":423,"caption":"Illustration by Eleonore Millet"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/guide-de-style-ux-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"UX design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/"},{"@type":"ListItem","position":4,"name":"Web design\u00a0: comment cr\u00e9er un guide de style UX\u00a0?"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/graphiste.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/26492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=26492"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/26492\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/26496"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=26492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=26492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=26492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}