{"id":40591,"date":"2020-07-14T10:50:43","date_gmt":"2020-07-14T08:50:43","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=40591"},"modified":"2025-08-26T15:21:20","modified_gmt":"2025-08-26T13:21:20","slug":"differences-wireframe-mockup-prototype","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/","title":{"rendered":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?"},"content":{"rendered":"

Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres webdesigners<\/a> sont habitu\u00e9s \u00e0 rencontrer ces termes, les n\u00e9ophytes les confondent souvent et ne savent pas vraiment ce qu\u2019ils sont, ni comment chacun peut les aider dans la conception de leur site internet ou application mobile.
\nDans cet article nous verrons les diff\u00e9rences entre ces mots de mani\u00e8re \u00e0 comprendre ce qu\u2019est un wireframe, un prototype et un mockup et \u00e0 quel moment ils peuvent intervenir dans le processus de conception.
\nInutile de pr\u00e9ciser que cet article n\u2019est pas destin\u00e9 aux concepteurs exp\u00e9riment\u00e9s, mais s\u2019adresse plut\u00f4t aux d\u00e9butants ou aux curieux qui n\u2019ont pas encore de d\u00e9finition claire dans la t\u00eate.<\/p>\n

Commandez les contenus de vos brochures et plaquettes commerciales<\/a><\/p><\/blockquote>\n

 <\/p>\n

Le wireframe<\/h2>\n

\"wireframe\"
\nUn wireframe est un croquis de ce \u00e0 quoi ressemblera un site web ou une application.
\nIl s’agit de la repr\u00e9sentation graphique d’une application ou d’un site web sur laquelle on retrouve les \u00e9l\u00e9ments les plus essentiels et le contenu. Un squelette, souvent en gris et blanc, qui d\u2019ailleurs est souvent r\u00e9alis\u00e9 \u00e0 la main, sur une feuille de papier (ou une serviette de table). C\u2019est le point de d\u00e9part de ce \u00e0 quoi devra ressembler la page en question, avec les \u00e9l\u00e9ments essentiels, une UI tr\u00e8s basique et la mise en page.
\nParfois il n\u2019y a m\u00eame pas encore de vrais mots dessus, ou alors ils sont \u00e9crits \u00e0 la fa\u00e7on d\u2019une ordonnance r\u00e9dig\u00e9e par un m\u00e9decin de campagne pour son dernier patient de la semaine. (Oui bon, il existe aussi des outils<\/a>, mais c\u2019est tricher)<\/p>\n

Le wireframe est int\u00e9ressant car il est facile \u00e0 r\u00e9aliser, vraiment pas cher \u00e0 produire, et il couche les bases de la construction du site internet ou de l\u2019application afin que toutes les parties sachent vers quoi le projet doit tendre. Il n\u2019est pas encore question d\u2019esth\u00e9tique, mais juste de structure et de fonctionnalit\u00e9s.<\/strong><\/p><\/blockquote>\n

 <\/p>\n

Le mockup<\/h2>\n

\"mockup\"
\nLe mockup se fait d\u00e9j\u00e0 beaucoup plus esth\u00e9tique que le wireframe. Bien s\u00fbr il reprend la structure esquiss\u00e9e dans le wireframe, mais il montre \u00e0 quoi le produit final doit ressembler.
\nIl n\u2019est en revanche pas cliquable\u00a0: c\u2019est une simple image. Mais une image qui se veut le plus proche possible du but \u00e0 atteindre. Si le wireframe est un plan d\u2019architecte, le mockup serait une photo de synth\u00e8se du futur b\u00e2timent.<\/p>\n

Le mockup est tr\u00e8s utile pour aider \u00e0 prendre des d\u00e9cisions concernant la charte graphique, le style, la typographie\u2026 Avec ce document, vous allez exp\u00e9rimenter le c\u00f4t\u00e9 visuel du produit<\/strong> et vous pouvez m\u00eame commencer \u00e0 demander \u00e0 vos futurs utilisateurs leur avis afin d\u2019apporter les modifications n\u00e9cessaires.<\/p><\/blockquote>\n

Il est beaucoup plus facile pour un utilisateur final (ou m\u00eame le commanditaire du site ou de l\u2019application) de r\u00e9aliser \u00e0 quoi ressemblera son produit une fois termin\u00e9.
\nLe mockup est l\u00e0 aussi facile \u00e0 r\u00e9aliser, assez peu cher m\u00eame s\u2019il n\u00e9cessite un outil (comme Photoshop)<\/a>, et beaucoup plus pr\u00e9cis et r\u00e9aliste qu\u2019un simple croquis.<\/p>\n

Le prototype<\/h2>\n

\"prototype\"
\nEt voici maintenant, le prototype\u00a0: un prototype, c\u2019est la repr\u00e9sentation la plus fid\u00e8le possible du produit final<\/strong>, destin\u00e9e \u00e0 simuler l\u2019UI. Contrairement aux deux mod\u00e8les \u00e9voqu\u00e9s plus haut, le prototype est cliquable et permet donc \u00e0 l’utilisateur de naviguer \u00e0 travers le contenu et d\u2019interagir \u00a0directement dans l’interface. En fait, un prototype ressemble beaucoup au produit final lui-m\u00eame\u00a0: pour clore la m\u00e9taphore, si le wireframe est un plan et le mockup une photo de synth\u00e8se d\u2019un b\u00e2timent, le prototype serait une maquette<\/a> r\u00e9alis\u00e9e en 3D et \u00e0 l\u2019\u00e9chelle.
\nMais ce n’est donc pas encore le produit final ! Il n\u2019est pas cod\u00e9 qu\u2019\u00e0 moiti\u00e9 et ne sert qu\u2019\u00e0 valider le front-end<\/a>. En effet, on peut recourir au prototype afin de r\u00e9duire les co\u00fbts de d\u00e9veloppement jusqu’\u00e0 l’approbation de l’interface utilisateur. Une fois que le prototype est test\u00e9, l’\u00e9quipe peut poursuivre le codage.<\/p>\n

L\u2019avantage principal du prototype est qu’il est interactif, ce qui permet aux utilisateurs de tester l’interface<\/strong> et de d\u00e9couvrir ce qui marche et ce qui ne marche pas. Un prototype peut aussi aider \u00e0 trouver de nouvelles id\u00e9es, amenant \u00e0 modifier une partie du design et ainsi am\u00e9liorer l\u2019interface utilisateur, avant que le projet ne soit cod\u00e9. Il est toujours mieux de se rendre compte de ces petites erreurs avant que le projet n\u2019arrive aux mains de celui ou ceux qui seront charg\u00e9s de le coder.<\/p><\/blockquote>\n

\u00c9videmment un prototype demande plus de temps (et donc, plus d\u2019argent) que les deux mod\u00e8les pr\u00e9c\u00e9dents.<\/p>\n

Demandez les devis de d\u00e9veloppeurs front-end<\/a> pour r\u00e9aliser votre prototype en postant votre projet sur Codeur.com<\/a>. Vous obtiendrez de nombreuses r\u00e9ponses rapidement et gratuitement !<\/p><\/blockquote>\n

 <\/p>\n

Conclusion<\/h2>\n

Nous avons vu que le wireframe, le mockup et le prototype sont 3 choses bien diff\u00e9rentes. Dans un projet, il n\u2019est pas toujours utile de passer par ces 3 \u00e9tapes, mais vous devrez bien passer par au minimum l\u2019une d\u2019elle. Chacune a ses avantages et vous pouvez d\u00e9cider laquelle s’int\u00e9grera le mieux dans votre mani\u00e8re d\u2019arriver au produit final.
\n <\/p>\n","protected":false},"excerpt":{"rendered":"

Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres webdesigners sont habitu\u00e9s \u00e0 rencontrer ces termes, les n\u00e9ophytes les confondent souvent et ne savent pas vraiment ce qu\u2019ils sont, ni comment chacun peut les aider dans la conception […]<\/p>\n","protected":false},"author":69,"featured_media":40593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[21],"tags":[219],"class_list":["post-40591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-decryptage"],"acf":[],"yoast_head":"\nWireframe, mockup, prototype : quelles diff\u00e9rences ?<\/title>\n<meta name=\"description\" content=\"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframe, mockup, prototype : quelles diff\u00e9rences ?\" \/>\n<meta property=\"og:description\" content=\"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-14T08:50:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T13:21:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeur\" \/>\n<meta name=\"twitter:site\" content=\"@codeur\" \/>\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:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/person\\\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"Wireframe, mockup, prototype : quelles diff\u00e9rences ?\",\"datePublished\":\"2020-07-14T08:50:43+00:00\",\"dateModified\":\"2025-08-26T13:21:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/\"},\"wordCount\":945,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/wireframe-mockup-prototype.jpg\",\"keywords\":[\"D\u00e9cryptage\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/\",\"name\":\"Wireframe, mockup, prototype : quelles diff\u00e9rences ?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/wireframe-mockup-prototype.jpg\",\"datePublished\":\"2020-07-14T08:50:43+00:00\",\"dateModified\":\"2025-08-26T13:21:20+00:00\",\"description\":\"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\\\/UX. Si les graphistes et autres\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/wireframe-mockup-prototype.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/wireframe-mockup-prototype.jpg\",\"width\":1024,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/differences-wireframe-mockup-prototype\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphisme\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/graphisme\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Webdesign\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/graphisme\\\/webdesign\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Wireframe, mockup, prototype : quelles diff\u00e9rences ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/logo-codeur-com.png\",\"contentUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/fr-fr.facebook.com\\\/codeurfreelance\\\/\",\"https:\\\/\\\/x.com\\\/codeur\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codeur\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/person\\\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"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:\\\/\\\/www.codeur.com\\\/blog\\\/author\\\/cedric\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?","description":"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres","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:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/","og_locale":"fr_FR","og_type":"article","og_title":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?","og_description":"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres","og_url":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2020-07-14T08:50:43+00:00","article_modified_time":"2025-08-26T13:21:20+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@codeur","twitter_site":"@codeur","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:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?","datePublished":"2020-07-14T08:50:43+00:00","dateModified":"2025-08-26T13:21:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/"},"wordCount":945,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg","keywords":["D\u00e9cryptage"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/","url":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/","name":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg","datePublished":"2020-07-14T08:50:43+00:00","dateModified":"2025-08-26T13:21:20+00:00","description":"Les wireframes, les prototypes et les mockup sont des termes un peu barbares mais tr\u00e8s courants dans la conception des UI\/UX. Si les graphistes et autres","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/07\/wireframe-mockup-prototype.jpg","width":1024,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/differences-wireframe-mockup-prototype\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Graphisme","item":"https:\/\/www.codeur.com\/blog\/graphisme\/"},{"@type":"ListItem","position":3,"name":"Webdesign","item":"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/"},{"@type":"ListItem","position":4,"name":"Wireframe, mockup, prototype : quelles diff\u00e9rences ?"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","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:\/\/www.codeur.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/40591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=40591"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/40591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/40593"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=40591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=40591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=40591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}