{"id":13704,"date":"2020-08-19T10:12:42","date_gmt":"2020-08-19T07:12:42","guid":{"rendered":"https:\/\/${domain}\/blog\/?p=13704"},"modified":"2025-02-04T16:21:02","modified_gmt":"2025-02-04T14:21:02","slug":"wireframe-vs-mockup-vs-prototype-whats-the-difference","status":"publish","type":"post","link":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/","title":{"rendered":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Web designers and programmers use these terms extensively. But many people confuse them and don&#8217;t really understand their real meaning. Do you know what is the difference between <\/span><span style=\"font-weight: 400;\">wireframe vs mockup vs prototype<\/span><span style=\"font-weight: 400;\">?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s figure it out together! We\u2019ll talk about mockup, prototype, and <\/span><span style=\"font-weight: 400;\">wireframe examples<\/span><span style=\"font-weight: 400;\"> as well as their definitions<\/span><span style=\"font-weight: 400;\">, and learn where to start when creating your website.\u00a0<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69ea5c53c5ab2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69ea5c53c5ab2\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#What_Is_a_Wireframe\" >What Is a Wireframe?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#What_Is_a_Mockup\" >What Is a Mockup?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#What_Is_a_Prototype\" >What Is a Prototype?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#Mockup_vs_Prototype\" >Mockup vs Prototype<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#Wireframe_vs_Prototype\" >Wireframe vs Prototype<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#Mockups_vs_Wireframes\" >Mockups vs Wireframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_Is_a_Wireframe\"><\/span><span style=\"font-weight: 400;\">What Is a Wireframe?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It is the very first step in creating any website. In fact, it&#8217;s a black and white, <a href=\"https:\/\/weblium.com\/create-dummy-website\">non-detailed draft<\/a> of what your site will look like. Its main purpose is to outline the structure of your site and basic design approaches. For example, whether it will be a multi-page or one-page site. What blocks do you want to place on each page? How will these pages be interconnected?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wireframes help you visually reflect all your ideas, discuss them, and easily make changes to your future website structure.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13740\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1-800x437.png\" alt=\"What Is a Wireframe?\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-5-1.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><b>How to Create a Wireframe?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">There are hundreds of different programs that you can use to create wireframes. Most web designers prefer these programs:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sketch;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Wireframe.cc;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Miro;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Draftium.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13739\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1-800x437.png\" alt=\"How to Do a Wireframe?\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-4-1.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In practice, most web designers first draw a wireframe on paper. Then they transfer it to one of the programs above. When the wireframe is ready, they share it with other team members, show it to clients, and edit. It doesn&#8217;t take much time, but you should not skip this step if you want to create a logical, beautiful, and effective website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, it only takes a few minutes to create a wireframe on Draftium, even if it\u2019s your first project. You can use ready-made blocks to create a clear site structure without focusing on minutiae.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_Is_a_Mockup\"><\/span><span style=\"font-weight: 400;\">What Is a Mockup?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A mockup is a static high-fidelity design of your future website. It is a way to show how the finished website design will look after its development. As a rule, a mockup is done for the following purposes:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">presentation for team members or clients to visualize your project;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">presentation for investors.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Mockups are not interactive. They are done in order to understand exactly how your site will look like, if the chosen color scheme looks nice, etc.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13741\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1-800x437.png\" alt=\"What Is a Mockup?\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-6-1.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><b>How to Do a Mockup?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">There are several popular programs used to <a href=\"https:\/\/draftium.com\/blog\/how-to-create-a-website-mockup\">do mockups<\/a>, such as:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Adobe Photoshop;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Adobe Illustrator;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sketch;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Placeit;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Proto.io.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In addition, there are programs with ready-made mockup templates. Using them, you can see how your design will look in different environments: on laptops, smartphones, watches, etc.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_Is_a_Prototype\"><\/span><span style=\"font-weight: 400;\">What Is a Prototype?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A prototype displays all the main elements and interconnections that will be present in your finished project. In fact, it is an almost ready version of your site. If you want to create an effective and well-designed website, prototyping is a must. In this case, you can fully test your site and evaluate its usability before the release.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Thanks to prototypes, it is possible to agree in advance on the user interface and not waste time editing the finished website. You can give prototypes for testing to a group of users since the entire interface is clickable.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13742\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1-800x437.png\" alt=\"What Is a Prototype?\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site_1.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><b>How to Do a Prototype?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You can create prototypes using different programs:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Principle;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Origami;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Axure RP.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The tools above are popular among professional web and UI\/UX designers. But if you do not have much experience in web design, there are simpler programs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, you can use Draftium, which works well for both wireframes and prototypes. Although it has a black and white interface, it includes dozens of different blocks. In a matter of minutes, you can create a clickable prototype, show it to your colleagues or clients, and make edits.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13738\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2-800x437.png\" alt=\"How to Do a Prototype?\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-3-2.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Transferring <a href=\"https:\/\/draftium.com\/blog\/how-to-create-your-first-prototype\">your prototype<\/a> to Weblium takes just a couple of clicks. You get a ready-made structure, blocks, interconnections between pages and buttons, etc. Replace b&amp;w blocks with color images, edit texts, choose the color scheme \u2013 and your website is ready!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By the way, we have a useful article on how to prototype websites \u2013 you can read it <\/span><a href=\"https:\/\/${domain}\/blog\/how-to-create-a-prototype-for-a-website\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mockup_vs_Prototype\"><\/span><span style=\"font-weight: 400;\">Mockup vs Prototype<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The key difference between mockups and prototypes is that mockups are not interactive. In fact, they are only needed to demonstrate the design and are full-size images of your future website. A prototype is an almost complete, clickable, and functional product. You can test it, present it to clients for approval, etc.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wireframe_vs_Prototype\"><\/span><span style=\"font-weight: 400;\">Wireframe vs Prototype<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A wireframe is actually a low-fidelity b&amp;w sketch of your future site. It is necessary in order to understand what your website and its structure will be like. A prototype is an almost ready, colored, and clickable project.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mockups_vs_Wireframes\"><\/span><span style=\"font-weight: 400;\">Mockups vs Wireframes<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A wireframe is a draft for a schematic representation of your future website. You can use it to roughly arrange the blocks, show their interconnection, and decide what pages you need on your site. A mockup is a color representation of your site. It is usually done to approve the chosen design approaches, color scheme, etc.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-13737\" src=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2-800x437.png\" alt=\"Mockups vs Wireframes\" width=\"800\" height=\"437\" srcset=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2-800x437.png 800w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2-320x175.png 320w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2-768x419.png 768w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2-418x228.png 418w, https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/site-2-2.png 1344w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span><span style=\"font-weight: 400;\">Summary<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now you\u2019ve learned the <\/span><span style=\"font-weight: 400;\">mockup definition<\/span><span style=\"font-weight: 400;\">, as well as seen prototypes and <\/span><span style=\"font-weight: 400;\">website wireframe examples<\/span><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">In fact, these are 3 stages of website development, which definitely should not be neglected.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make a wireframe, mockup, or prototype of your future website, you don&#8217;t have to become a guru of professional UI\/UX design programs. You can use fairly simple tools.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a website structure in Draftium from ready-made blocks, define the interconnections between blocks and pages. Share the result with your colleagues or clients, make the necessary edits. Then export your project to Weblium. All blocks will remain in their place, you just have to replace the images with color ones and choose the design scheme.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Prototyping any site (be it a one-pager or multi-page resource) can help you avoid a lot of problems. Start creating any website with prototyping, and your site will surely be effective, beautiful, and user-friendly!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web designers and programmers use these terms extensively. But many people confuse them and don&#8217;t really understand their real meaning. Do you know what is the difference between wireframe vs mockup vs prototype?\u00a0 Let&#8217;s figure it out together! We\u2019ll talk about mockup, prototype, and wireframe examples as well as their definitions, and learn where to &hellip;<\/p>\n","protected":false},"author":14,"featured_media":13736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[122],"tags":[],"class_list":["post-13704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","has-thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog<\/title>\n<meta name=\"description\" content=\"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog\" \/>\n<meta property=\"og:description\" content=\"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblium Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/weblium\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-19T07:12:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-04T14:21:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1344\" \/>\n\t<meta property=\"og:image:height\" content=\"734\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Weblium\" \/>\n<meta name=\"twitter:site\" content=\"@Weblium\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/\"},\"author\":{\"name\":\"Alina\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#\\\/schema\\\/person\\\/00f234e64d6b4da8c98f5b1a43199332\"},\"headline\":\"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?\",\"datePublished\":\"2020-08-19T07:12:42+00:00\",\"dateModified\":\"2025-02-04T14:21:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/\"},\"wordCount\":986,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wp.en.weblium.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cover_v1.png\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/\",\"url\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/\",\"name\":\"Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wp.en.weblium.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cover_v1.png\",\"datePublished\":\"2020-08-19T07:12:42+00:00\",\"dateModified\":\"2025-02-04T14:21:02+00:00\",\"description\":\"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wp.en.weblium.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cover_v1.png\",\"contentUrl\":\"https:\\\/\\\/wp.en.weblium.com\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cover_v1.png\",\"width\":1344,\"height\":734,\"caption\":\"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/wireframe-vs-mockup-vs-prototype-whats-the-difference\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wp.en.weblium.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\\\/\\\/wp.en.weblium.com\\\/category\\\/web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#website\",\"url\":\"https:\\\/\\\/wp.en.weblium.com\\\/\",\"name\":\"Weblium Blog\",\"description\":\"Weblium Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wp.en.weblium.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#organization\",\"name\":\"Weblium\",\"url\":\"https:\\\/\\\/wp.en.weblium.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/weblium.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Logo-square-dark-blue.png\",\"contentUrl\":\"https:\\\/\\\/weblium.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Logo-square-dark-blue.png\",\"width\":200,\"height\":200,\"caption\":\"Weblium\"},\"image\":{\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/weblium\\\/\",\"https:\\\/\\\/x.com\\\/Weblium\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wp.en.weblium.com\\\/#\\\/schema\\\/person\\\/00f234e64d6b4da8c98f5b1a43199332\",\"name\":\"Alina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g\",\"caption\":\"Alina\"},\"description\":\"Digital Marketing Specialist at Weblium\",\"url\":\"https:\\\/\\\/wp.en.weblium.com\\\/author\\\/alina\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog","description":"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?","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:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/","og_locale":"en_US","og_type":"article","og_title":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog","og_description":"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?","og_url":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/","og_site_name":"Weblium Blog","article_publisher":"https:\/\/www.facebook.com\/weblium\/","article_published_time":"2020-08-19T07:12:42+00:00","article_modified_time":"2025-02-04T14:21:02+00:00","og_image":[{"width":1344,"height":734,"url":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","type":"image\/png"}],"author":"Alina","twitter_card":"summary_large_image","twitter_creator":"@Weblium","twitter_site":"@Weblium","twitter_misc":{"Written by":"Alina","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#article","isPartOf":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/"},"author":{"name":"Alina","@id":"https:\/\/${domain}\/blog\/#\/schema\/person\/00f234e64d6b4da8c98f5b1a43199332"},"headline":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?","datePublished":"2020-08-19T07:12:42+00:00","dateModified":"2025-02-04T14:21:02+00:00","mainEntityOfPage":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/"},"wordCount":986,"commentCount":0,"publisher":{"@id":"https:\/\/${domain}\/blog\/#organization"},"image":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#primaryimage"},"thumbnailUrl":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/","url":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/","name":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference? - Weblium Blog","isPartOf":{"@id":"https:\/\/${domain}\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#primaryimage"},"image":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#primaryimage"},"thumbnailUrl":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","datePublished":"2020-08-19T07:12:42+00:00","dateModified":"2025-02-04T14:21:02+00:00","description":"Find out the difference between wireframe vs mockup vs prototype. See their examples, and also decide what prototyping tools select for your site?","breadcrumb":{"@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#primaryimage","url":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","contentUrl":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","width":1344,"height":734,"caption":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?"},{"@type":"BreadcrumbList","@id":"https:\/\/${domain}\/blog\/wireframe-vs-mockup-vs-prototype-whats-the-difference\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/${domain}\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/${domain}\/blog\/category\/web-design\/"},{"@type":"ListItem","position":3,"name":"Wireframe vs Mockup vs Prototype: What\u2019s the Difference?"}]},{"@type":"WebSite","@id":"https:\/\/${domain}\/blog\/#website","url":"https:\/\/${domain}\/blog\/","name":"Weblium Blog","description":"Weblium Blog","publisher":{"@id":"https:\/\/${domain}\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/${domain}\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/${domain}\/blog\/#organization","name":"Weblium","url":"https:\/\/${domain}\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/${domain}\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/weblium.com\/blog\/wp-content\/uploads\/2020\/06\/Logo-square-dark-blue.png","contentUrl":"https:\/\/weblium.com\/blog\/wp-content\/uploads\/2020\/06\/Logo-square-dark-blue.png","width":200,"height":200,"caption":"Weblium"},"image":{"@id":"https:\/\/${domain}\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/weblium\/","https:\/\/x.com\/Weblium"]},{"@type":"Person","@id":"https:\/\/${domain}\/blog\/#\/schema\/person\/00f234e64d6b4da8c98f5b1a43199332","name":"Alina","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0543e6dc740283e260f7a619e618c2fdfbef692ba5d0b3ff942d83e457dfde87?s=96&d=mm&r=g","caption":"Alina"},"description":"Digital Marketing Specialist at Weblium","url":"https:\/\/${domain}\/blog\/author\/alina\/"}]}},"jetpack_featured_media_url":"https:\/\/${domain}\/blog\/wp-content\/uploads\/2020\/08\/cover_v1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/posts\/13704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/comments?post=13704"}],"version-history":[{"count":7,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/posts\/13704\/revisions"}],"predecessor-version":[{"id":25768,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/posts\/13704\/revisions\/25768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/media\/13736"}],"wp:attachment":[{"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/media?parent=13704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/categories?post=13704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/${domain}\/blog\/wp-json\/wp\/v2\/tags?post=13704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}