{"id":9895,"date":"2023-09-08T10:30:00","date_gmt":"2023-09-08T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=9895"},"modified":"2025-08-20T17:25:39","modified_gmt":"2025-08-20T15:25:39","slug":"comment-creer-wireframe","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/","title":{"rendered":"Comment cr\u00e9er votre premier wireframe&nbsp;?"},"content":{"rendered":"<p>Le wireframe, c&#8217;est bien plus qu&#8217;un anglicisme barbare. Le wireframe est la <strong>premi\u00e8re \u00e9tape<\/strong> entre l&#8217;id\u00e9e d&#8217;un site et sa concr\u00e9tisation.<\/p>\n<p>Mais comment le faire&nbsp;? Comment le commencer&nbsp;? Jusqu&#8217;o\u00f9 devez-vous le peaufiner&nbsp;? Voil\u00e0 ce que nous allons \u00e9tudier dans cet article (avec quelques petits outils en plus pour vous aider).<\/p>\n<h2>Qu&#8217;est-ce qu&#8217;un wireframe&nbsp;?<\/h2>\n<p>Un wireframe est la <a href=\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe-web\" target=\"_blank\" rel=\"noopener noreferrer\">maquette d&#8217;un site<\/a>&nbsp;d\u00e9j\u00e0 r\u00e9alis\u00e9e et pr\u00e9sent\u00e9e via un ordinateur.<\/p>\n<p>Il donne une id\u00e9e g\u00e9n\u00e9rale de la pr\u00e9sentation de la future page, mais aussi de la future arborescence du site, voire des interactions entre les \u00e9l\u00e9ments. Il y a donc un petit aspect technique dans le contenu du wireframe (d&#8217;o\u00f9 l&#8217;utilisation de l&#8217;informatique), mais sans les petits d\u00e9tails graphiques (couleurs, images, animations\u2026) qui rendront le site encore plus beau.<\/p>\n<p>Un wireframe permet de revenir aux basiques des pages web, ce qui est utile \u00e0 la fois pour la partie r\u00e9flexion, de votre c\u00f4t\u00e9, et pour la partie pr\u00e9sentation, envers le client.<\/p>\n<h2><\/h2>\n<h2>\u00c0 quoi ressemble un wireframe&nbsp;?<\/h2>\n<p>Un wireframe, quand on le regarde de mani\u00e8re synth\u00e9tique, c&#8217;est avant tout des d\u00e9limitations de zones avec des carr\u00e9s plus fonc\u00e9s pr\u00e9sentant les parties qui seront r\u00e9serv\u00e9es aux futures images, et d&#8217;autres plus claires, o\u00f9 le texte est synth\u00e9tis\u00e9 par de simples lignes.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-9898 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1.jpg\" alt=\"\" width=\"700\" height=\"343\" srcset=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1.jpg 700w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1-300x147.jpg 300w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1-60x29.jpg 60w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1-370x181.jpg 370w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1-270x132.jpg 270w, https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/exemple-wireframe-1-570x279.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Vous pouvez visualiser les possibles wireframes de nombreux sites gr\u00e2ce au <a href=\"https:\/\/www.wirify.com\/?source=graphiste-com-blog&amp;utm_source=graphiste-com-blog\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">plug-in Wirify<\/a> qui transforme n&#8217;importe quelle page en sa plus simple expression (ce qui vous fournira d\u00e9j\u00e0 un premier aper\u00e7u de ce qu&#8217;est un wireframe).<\/p>\n<p>Une bonne id\u00e9e pour vous familiariser encore plus avec cette pr\u00e9sentation est de vous appuyer sur des mod\u00e8les pr\u00e9\u00e9tablis, que vous pourrez ensuite modifier \u00e0 votre guise. Vous en trouverez notamment sur <a href=\"https:\/\/www.lucidchart.com\/pages\/fr\/presentation-produit-lucidchart\/?source=graphiste-com-blog&amp;utm_source=graphiste-com-blog\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">LucidChart<\/a> (avec des templates adapt\u00e9s \u00e0 plusieurs tailles d&#8217;\u00e9cran).<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-9899 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/outil-wireframe-lucidchart.jpg\" alt=\"Outil LucidChart Wireframe\" width=\"700\" height=\"257\"><\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/wireframe-application-mobile\">Comment cr\u00e9er un wireframe d&#8217;application mobile&nbsp;?<\/a><\/p><\/blockquote>\n<h2><\/h2>\n<h2>Comment cr\u00e9er son wireframe&nbsp;?<\/h2>\n<p>Si un simple carnet et un crayon peuvent servir pour tracer les premiers traits de votre wireframe, vous irez encore plus loin avec des outils technologiques.<\/p>\n<p>L&#8217;<a href=\"https:\/\/www.invisionapp.com\/freehand?redirect=1\/?source=graphiste-com-blog&amp;utm_source=graphiste-com-blog\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">application Freehand<\/a> vous permet de passer rapidement d&#8217;un brouillon de carr\u00e9 \u00e0 une pr\u00e9sentation nettement plus professionnelle.<\/p>\n<p>Par ailleurs, cet outil est collaboratif (ce qui est plut\u00f4t pratique pour travailler en \u00e9quipe). N&#8217;oubliez pas que le wireframe est aussi un moyen de communication, en interne comme \u00e0 l&#8217;externe. Et le contenu est modifiable \u00e0 volont\u00e9&nbsp;: un wireframe n&#8217;est jamais un produit fini, mais juste une base qui peut \u00eatre am\u00e9lior\u00e9e.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-9900 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/02\/freehand-wireframe.jpg\" alt=\"Freehand Wireframe\" width=\"700\" height=\"357\"><\/p>\n<p><a href=\"https:\/\/balsamiq.com\/?source=graphiste-com-blog&amp;utm_source=graphiste-com-blog\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Balsamiq<\/a> est \u00e9galement tr\u00e8s bien r\u00e9put\u00e9 et dispose aussi bien de maquettes que d&#8217;une biblioth\u00e8que de composants assez riche.<\/p>\n<p>Les <a href=\"https:\/\/graphiste.com\/blog\/outils-creer-wireframes-mockups\" target=\"_blank\" rel=\"noopener noreferrer\">bons outils<\/a>, c&#8217;est bien. Mais encore vous faut-il savoir ce que vous allez inclure dans votre pr\u00e9sentation&nbsp;!<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;:&nbsp;<a href=\"https:\/\/graphiste.com\/blog\/zoning-site-web\">Comment faire un zoning de site web&nbsp;?<\/a><\/p><\/blockquote>\n<h2><\/h2>\n<h2>Que faut-il inclure dans un wireframe&nbsp;?<\/h2>\n<p>Un wireframe, c&#8217;est le <strong>r\u00e9sum\u00e9 d&#8217;une page web<\/strong>.<\/p>\n<p>Vous devez donc y inclure tout ce qui est habituellement sur une page&nbsp;: header, footer, colonnes avec, comme nous l&#8217;avons vu pr\u00e9c\u00e9demment, les zones d\u00e9j\u00e0 d\u00e9limit\u00e9es pour les images ou les textes, voire les vid\u00e9os (un carr\u00e9 barr\u00e9 d&#8217;une croix est l&#8217;ic\u00f4ne d&#8217;une photo, une ligne repr\u00e9sente un texte, un triangle dans un carr\u00e9 symbolisera une vid\u00e9o).<\/p>\n<p>Quand le wireframe se d\u00e9veloppe, il peut \u00eatre utile de hi\u00e9rarchiser les contenus avec des diff\u00e9rences de taille dans les typographies.<\/p>\n<blockquote><p>Attention, rien de glamour ici&nbsp;: que du noir et blanc, voire du gris pour indiquer un d\u00e9veloppement de menu. Pas de polices de caract\u00e8res \u00e9labor\u00e9es (elles seront choisies par la suite). Le but est d&#8217;\u00eatre simple, efficace et compr\u00e9hensible en un seul coup d&#8217;\u0153il.<\/p><\/blockquote>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/logiciel-prototypage-maquette-web\" target=\"_blank\" rel=\"noopener noreferrer\">Web design&nbsp;: 10 logiciels de prototyping pour vos maquettes<\/a><\/p><\/blockquote>\n<h2><\/h2>\n<h2>Conclusion<\/h2>\n<p>Le wireframe n&#8217;est qu&#8217;une \u00e9tape dans la cr\u00e9ation d&#8217;un site, mais c&#8217;est une \u00e9tape essentielle pour avancer sereinement (et pour recevoir un retour de la part de vos clients).<\/p>\n<p>Ensuite, vous d\u00e9velopperez petit \u00e0 petit ce wireframe pour y ajouter plus de design, <a href=\"https:\/\/graphiste.com\/blog\/interaction-site-web\" target=\"_blank\" rel=\"noopener noreferrer\">plus d&#8217;interactions,<\/a> plus de contenu\u2026 Mais \u00e7a, ce sera apr\u00e8s&nbsp;!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le wireframe, c&#8217;est bien plus qu&#8217;un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l&#8217;id\u00e9e d&#8217;un site et sa concr\u00e9tisation. Mais comment le faire&nbsp;? Comment le commencer&nbsp;? Jusqu&#8217;o\u00f9 devez-vous le peaufiner&nbsp;? Voil\u00e0 ce que nous allons \u00e9tudier dans cet article (avec quelques petits outils en plus pour vous aider). Qu&#8217;est-ce qu&#8217;un wireframe&nbsp;? Un wireframe [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":50927,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[102],"tags":[107],"class_list":["post-9895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-tutoriel"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Le wireframe, c&#039;est bien plus qu&#039;un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l&#039;id\u00e9e d&#039;un site et sa concr\u00e9tisation. Mais comment le\" \/>\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\/comment-creer-wireframe\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Le wireframe, c&#039;est bien plus qu&#039;un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l&#039;id\u00e9e d&#039;un site et sa concr\u00e9tisation. Mais comment le\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\" \/>\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=\"2023-09-08T08:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:25:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"Comment cr\u00e9er votre premier wireframe&nbsp;?\",\"datePublished\":\"2023-09-08T08:30:00+00:00\",\"dateModified\":\"2025-08-20T15:25:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\"},\"wordCount\":741,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png\",\"keywords\":[\"Tutoriel\"],\"articleSection\":[\"UI design\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\",\"url\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\",\"name\":\"Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png\",\"datePublished\":\"2023-09-08T08:30:00+00:00\",\"dateModified\":\"2025-08-20T15:25:39+00:00\",\"description\":\"Le wireframe, c'est bien plus qu'un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l'id\u00e9e d'un site et sa concr\u00e9tisation. Mais comment le\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png\",\"width\":1024,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#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\":\"UI design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Comment cr\u00e9er votre premier wireframe&nbsp;?\"}]},{\"@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":"Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog","description":"Le wireframe, c'est bien plus qu'un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l'id\u00e9e d'un site et sa concr\u00e9tisation. Mais comment le","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\/comment-creer-wireframe\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog","og_description":"Le wireframe, c'est bien plus qu'un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l'id\u00e9e d'un site et sa concr\u00e9tisation. Mais comment le","og_url":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2023-09-08T08:30:00+00:00","article_modified_time":"2025-08-20T15:25:39+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png","type":"image\/png"}],"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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"Comment cr\u00e9er votre premier wireframe&nbsp;?","datePublished":"2023-09-08T08:30:00+00:00","dateModified":"2025-08-20T15:25:39+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/"},"wordCount":741,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png","keywords":["Tutoriel"],"articleSection":["UI design"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/","url":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/","name":"Comment cr\u00e9er votre premier wireframe ? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png","datePublished":"2023-09-08T08:30:00+00:00","dateModified":"2025-08-20T15:25:39+00:00","description":"Le wireframe, c'est bien plus qu'un anglicisme barbare. Le wireframe est la premi\u00e8re \u00e9tape entre l'id\u00e9e d'un site et sa concr\u00e9tisation. Mais comment le","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/12\/Image-a-la-une-creer-wireframe.png","width":1024,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/comment-creer-wireframe\/#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":"UI design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/"},{"@type":"ListItem","position":4,"name":"Comment cr\u00e9er votre premier wireframe&nbsp;?"}]},{"@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\/9895","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=9895"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/9895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/50927"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=9895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=9895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=9895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}