{"id":28362,"date":"2022-04-14T07:42:54","date_gmt":"2022-04-14T07:42:54","guid":{"rendered":"https:\/\/emizentech.com\/blog\/?p=28362"},"modified":"2023-08-29T11:08:19","modified_gmt":"2023-08-29T11:08:19","slug":"wireframe-mockup-prototype","status":"publish","type":"post","link":"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html","title":{"rendered":"Wireframe vs Mockup vs Prototype: What Is The Difference?"},"content":{"rendered":"\n<p>Some of the common terms that any product design team uses are Wireframe, Mockup, and Prototype. The design team uses these terms to make an illustration of any concept, to gather feedback, and to gain consensus. With the help of these, the team will be able to create the design. These things also help to build the exact need of the customers. Maybe wireframe, mockup, and prototype seem to sound similar but are unique. All of them are unique and have unique roles at different times while the product is developing. This is also known as the lifecycle of product development.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/emizentech.com\/blog\/best-practices-for-ecommerce-product-pages.html\">product designing<\/a> team uses these terms interchangeably. For this, there might be any confusion. The confusion regarding which is what and when to use that particular term? How to use that particular term in the cycle? And how do any of these get done? You should also know the exact time of using each of those during any product development process. You need to choose the right process at the very right time. This will help you to get the correct effort level of investment. This will also help you to deliver what exactly a customer wants.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/a><\/span><\/div>\n<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:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#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:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#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:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#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:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#Convert_Your_App_Idea_Into_Reality\" >Convert Your App Idea Into Reality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#When_To_Use_Wireframes\" >????When To Use Wireframes?????<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#When_To_Use_Mockups\" >????When To Use Mockups?????<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#When_To_Use_Prototypes\" >????When To Use Prototypes?????<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#How_Do_Wireframes_Mockups_Prototypes_Compare\" >How Do Wireframes, Mockups, &amp; Prototypes Compare?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/emizentech.com\/blog\/wireframe-mockup-prototype.html#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Wireframe\"><\/span>What is a Wireframe?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"300\" style=\"aspect-ratio: 600 \/ 300;\" width=\"600\" autoplay loop muted src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframe.mp4\"><\/video><\/figure>\n\n\n\n<p>The visual two-dimensional guide or illustration that represents or illustrates the skeletal framework of any page or website is known as a wireframe. This one focus specifically on the allocation of space for content, functionalities, and the gesture of the page or website. The wireframe is also getting used for arranging all the elements of a website and accomplishing all the purposes at its best.<\/p>\n\n\n\n<p>This term has been adopted from another field, where the skeletal framework represents 3-d shapes and their volume. <a href=\"https:\/\/emizentech.com\/blog\/mobile-app-wireframing.html\">Wireframes<\/a> don\u2019t have any style, graphics, or color. It only focuses on behavior, functionality, and content priority. This one helps to establish a relationship between various templates of any website. Wireframe helps to depict the layout of pages or the arrangement of the content of any website. This includes the elements of the interface, navigational system, and the way they are working together.<\/p>\n\n\n\n<p>In other words, the wireframe focuses on the act of the screen, not on the looks. These can even be sketched on the whiteboard or even pencil drawings. Also, it can be created through application software. Generally, <a href=\"https:\/\/emizentech.com\/blog\/what-is-business-analyst.html\">business analysts<\/a>, developers, designers who have experienced users, and visual designers. Also, interactive designers, user researchers, and information <a href=\"https:\/\/emizentech.com\/blog\/app-development-guide.html#Wireframes\">architectures use wireframes<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Create Your First Wireframe (A UX Tutorial)\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/qpH7-KFWZRI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Mockup\"><\/span>What is a Mockup?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"300\" style=\"aspect-ratio: 600 \/ 300;\" width=\"600\" autoplay loop muted src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Mockup-1.mp4\"><\/video><\/figure>\n\n\n\n<p>Mockup is the conceptual <a href=\"https:\/\/emizentech.com\/blog\/design-strategies-ecommerce-website-boost-conversion.html\">design of any website<\/a> or page to a scale or a full-size base without any interactivity. This is the early draft of any website or application. Mockups can be used for devices, demonstration, teaching, promotion, design evolution, and so on. Primarily mockups get used for converting any concepts or ideas into a design. This has the final structure of <a href=\"https:\/\/emizentech.com\/blog\/mobile-app-navigation.html\">navigation<\/a> and the <a href=\"https:\/\/emizentech.com\/blog\/app-design-best-practices.html\">design<\/a>. This helps the users to get the proper idea of the final website or application design.<\/p>\n\n\n\n<p>Mockups are also created to get feedback from users, as these have the basic structure or the design of the outcome of any website or webpage or any other type of application. These are created based on the wireframe of any particular website or application. As mockups have graphics and color, it shows the next-level design of the wireframe. This also looks like the final design of any product for having visual elements. Also, mock-ups have some texts too. Ideally, a mockup is static, but interactive mockups with very few limited functions are there nowadays. This is possible with the latest mockup tools and software. Also, some complex and multi-layered mockups served as the base of prototypes.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"What is a Mockup?\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/8iP2qXwk184?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Prototype\"><\/span>What is a Prototype?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"300\" style=\"aspect-ratio: 600 \/ 300;\" width=\"600\" autoplay loop muted src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Prototype.mp4\"><\/video><\/figure>\n\n\n\n<p>The prototype is the tool to visualize the early sample or model. This one gets released to test the concept or the product. Also, for some processes, the prototypes can be made as well. Before launching any website, application, or web page, this is the interactive design. The prototype gets prepared by amalgamating all the works to prepare a website or application, such as wireframe and mockup. This includes almost all the functional pieces of any design. This helps the users understand the product and what it is doing, and how to access it at any point of work. It also helps to understand the interactive functions and elements and how to access those in the original product.<\/p>\n\n\n\n<p>With the help of a prototype, designers enhance the product&#8217;s design from the early stages. This helps to analyze the user review of the final product. Also, it gives feedback on the process or the website or the application beforehand and can be modified as required. As the prototype has many of the real-time features of a website or the application, this one is the step-through through which the theoretical idea comes to the practical one. That is why this process is known as materialization. Prototyping can also be counted as a step within the formalization and evolution of any particular idea.&nbsp;<\/p>\n\n\n\n<div style=\"background-color:#ffecde;text-align:center\" class=\"wp-block-genesis-blocks-gb-cta gb-block-cta\"><div class=\"gb-cta-content\"><h2 class=\"gb-cta-title gb-font-size-32\" style=\"color:#32373c\"><span class=\"ez-toc-section\" id=\"Convert_Your_App_Idea_Into_Reality\"><\/span>Convert Your App Idea Into Reality<span class=\"ez-toc-section-end\"><\/span><\/h2><div class=\"gb-cta-text gb-font-size-32\" style=\"color:#32373c\"><p><strong>Let&#8217;s Build A New App Together<\/strong><\/p><\/div><\/div><div class=\"gb-cta-button\"><a href=\"https:\/\/emizentech.com\/enqiry.html?utm_source=blog&amp;utm_medium=gb&amp;utm_campaign=wireframemockupprototype\" target=\"_self\" rel=\"noopener noreferrer\" class=\"gb-button gb-button-shape-rounded gb-button-size-medium\" style=\"color:#ffffff;background-color:#000000\">Get Started<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_To_Use_Wireframes\"><\/span><a href=\"https:\/\/emojipedia.org\/laptop\/\" target=\"_blank\" rel=\"noopener\">????<\/a>When To Use Wireframes?<a href=\"https:\/\/emojipedia.org\/mobile-phone\/\" target=\"_blank\" rel=\"noopener\">????<\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The wireframe is the basic outline of any structure or plan of any product or webpage or application. From the concept, it is important to reach a consensus to set up the structure&#8217;s functionality. As it doesn\u2019t have any graphics or color, it helps understand if it helps the users. It gives importance to the layout, not the exact design.<\/p>\n\n\n\n<p>With the help of a wireframe, the information design of the site gets a visuality with a clarification of the ways to display particular information and the functionality of the user interface. It also allocates any given content along with its space and location. So, to determine all these things wireframe should be used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_To_Use_Mockups\"><\/span><a href=\"https:\/\/emojipedia.org\/laptop\/\" target=\"_blank\" rel=\"noopener\">????<\/a>When To Use Mockups?<a href=\"https:\/\/emojipedia.org\/mobile-phone\/\" target=\"_blank\" rel=\"noopener\">????<\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When the designs and the graphics are already done and will be displayed to the stakeholders, then the mockups should get used. It shows a detailed, designed structure of the product or the webpage or application with graphics and colors. It has a perfect visual look, which is somehow realistic and portrays the original idea of the product or the application. As this has a static nature, it helps the users get a look at the product if they like the design. Comparing mockups helps the designers get more ideas and help to get more ideas about the design. Also, it helps to get to some selection as well. This is an evolution of a designed idea from the wireframe with a properly designed layout of a product or webpage, or application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_To_Use_Prototypes\"><\/span><a href=\"https:\/\/emojipedia.org\/laptop\/\" target=\"_blank\" rel=\"noopener\">????<\/a>When To Use Prototypes?<a href=\"https:\/\/emojipedia.org\/mobile-phone\/\" target=\"_blank\" rel=\"noopener\">????<\/a> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The prototype is the final part of the design of any given or proposed idea. This has the design of the product or webpage or application, along with those, there are some accessible interfaces of the outcome. So, the prototype gets used just before launching any product or application. As this one has an accessible interface, it helps an accessible interface, it helps the users to provide feedback as well.<\/p>\n\n\n\n<p>This evolution of design comes from the previous one of the same, and that is the mockup. After development, the prototype is the individual tool to taste the product or the application. This also helps to understand how the real users will interact with the same webpage or the application. Once this phase gets passed with satisfactory results and feedback, the product gets towards development and execution.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wireframing Tools<a href=\"https:\/\/emojipedia.org\/hammer-and-wrench\/\" target=\"_blank\" rel=\"noopener\">????\ufe0f<\/a><\/h3>\n\n\n\n<p>There are some different <a href=\"https:\/\/emizentech.com\/blog\/wireframing-mockup-ui-prototyping-tools.html\">wireframe tools<\/a>, among them, some important are<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Pencil Project<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-Project.jpg\" alt=\"Pencil Project\" class=\"wp-image-28382\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-Project.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-Project-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-Project-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">2. MockFlow<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/MockFlow.jpg\" alt=\"MockFlow\" class=\"wp-image-28383\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/MockFlow.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/MockFlow-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/MockFlow-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">3. Jumpchart<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Jumpchart.jpg\" alt=\"Jumpchart\" class=\"wp-image-28384\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Jumpchart.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Jumpchart-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Jumpchart-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">4. Wirefy<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wirefy.jpg\" alt=\"Wirefy\" class=\"wp-image-28385\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wirefy.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wirefy-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wirefy-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">5. Framebox.<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Framebox.jpg\" alt=\"Framebox\" class=\"wp-image-28386\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Framebox.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Framebox-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Framebox-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Mockup Tools<\/h3>\n\n\n\n<p>Among some of the mockup tools, some important are<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Pop<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pop.jpg\" alt=\"Pop\" class=\"wp-image-28387\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pop.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pop-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pop-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">2. Pencil<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-.jpg\" alt=\"Pencil\" class=\"wp-image-28388\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil-.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil--300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Pencil--768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">3. FrameAPP<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/FrameAPP.jpg\" alt=\"FrameAPP\" class=\"wp-image-28390\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/FrameAPP.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/FrameAPP-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/FrameAPP-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">4. Balsamiq<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Balsamiq.jpg\" alt=\"Balsamiq\" class=\"wp-image-28391\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Balsamiq.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Balsamiq-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Balsamiq-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">5. Moqups<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Moqups.jpg\" alt=\"Moqups\" class=\"wp-image-28392\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Moqups.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Moqups-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Moqups-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Prototype Tools<\/h3>\n\n\n\n<p>Out of some handy and good tools, the important tools for the prototype are getting listed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Figma<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Figma.jpg\" alt=\"Figma\" class=\"wp-image-28394\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Figma.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Figma-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Figma-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">2. Webflow<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Webflow.jpg\" alt=\"Webflow\" class=\"wp-image-28395\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Webflow.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Webflow-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Webflow-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">3. Justinmind<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Justinmind.jpg\" alt=\"Justinmind\" class=\"wp-image-28396\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Justinmind.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Justinmind-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Justinmind-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">4. Sketch<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Sketch-software.jpg\" alt=\"Sketch software\" class=\"wp-image-28397\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Sketch-software.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Sketch-software-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Sketch-software-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">5. Fluid UI<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Fluid-UI.jpg\" alt=\"Fluid UI\" class=\"wp-image-28398\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Fluid-UI.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Fluid-UI-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Fluid-UI-768x480.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Do_Wireframes_Mockups_Prototypes_Compare\"><\/span>How Do Wireframes, Mockups, &amp; Prototypes Compare?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>From the discussion of what are those three, the differences between those three can come into an account,<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframes-Mockups-Prototypes.jpg\" alt=\"Wireframes, Mockups, &amp; Prototypes\" class=\"wp-image-28400\" width=\"750\" height=\"468\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframes-Mockups-Prototypes.jpg 800w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframes-Mockups-Prototypes-300x188.jpg 300w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframes-Mockups-Prototypes-768x480.jpg 768w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Wireframes are very basic. It is only a black and white structure of any product to give the basic idea. It doesn\u2019t have any graphics or color on it.<\/li>\n\n\n\n<li>Though mockups are also static they have a good amount of realistic touch. This shows the features and the look of any product or application or website. This has graphics and colors.<\/li>\n\n\n\n<li>The prototype is the final stage of any product before launching. It has some interactivity and presentation. It helps the user to understand the way to use that product in reality. Users can even use the prototypes of any product like a real one.<\/li>\n<\/ul>\n\n\n\n<p>To explain the differences between those three, the wireframe is very basic, just the outline of the idea of any product without any graphics and color. Then comes the mockups, here comes the graphics and color with a short idea of the real product derived from the wireframe. Then comes the prototype. This gets derived from the mockups by adding much real-time interaction process to it. This one gives the user an idea of using the real product. So, this can be said, from the wireframes, the mockups get evaluated, and the prototypes get evaluated from the mockups to get reviews and feedback on any product before it gets launched from the very basic idea of that particular product.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"800\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Wireframes.jpg\" alt=\"\" class=\"wp-image-28375\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Wireframes.jpg 500w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Wireframes-188x300.jpg 188w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">App Wireframes<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"800\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Mockups.jpg\" alt=\"App Mockups\" class=\"wp-image-28378\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Mockups.jpg 500w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Mockups-188x300.jpg 188w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">App Mockups<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"800\" src=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Prototypes-.jpg\" alt=\"App Prototypes\" class=\"wp-image-28377\" srcset=\"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Prototypes-.jpg 500w, https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/App-Prototypes--188x300.jpg 188w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">  App Prototypes  <\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p><strong>Table To Compare The Differences Between Wireframes, Mockups, &amp; Prototypes<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-black-color has-pale-cyan-blue-background-color has-text-color has-background\"><thead><tr><th><\/th><th>Wireframe<\/th><th>Mockup<\/th><th>Prototype<\/th><\/tr><\/thead><tbody><tr><td><strong>What<\/strong><\/td><td>The basic sketch of the proposed design of the product without graphics and color.<\/td><td>The static design of the product with graphics and color gives an idea of the product<\/td><td>This is the last stage of design before launching the product with accessible interfaces.<\/td><\/tr><tr><td><strong>Design quality<\/strong><\/td><td>Low<\/td><td>Medium<\/td><td>High<\/td><\/tr><tr><td><strong>Purpose<\/strong><\/td><td>To get internal feedback and consensus about the product, and how it might work for users.<\/td><td>To have a more detailed visual update about the product with graphics and color of the product.<\/td><td>To get user feedback and to determine user acceptance of the design and the surface. This one even has an accessible surface for users to use.<\/td><\/tr><tr><td><strong>Time invested&nbsp;<\/strong><\/td><td>Low<\/td><td>Medium<\/td><td>High<\/td><\/tr><tr><td><strong>Included elements<\/strong><\/td><td>The basic format of the structure of the product<\/td><td>Graphics, logo, color, design, as some additional visual ideas<\/td><td>Interactive and navigation elements to be used like real-time product or application<\/td><\/tr><tr><td><strong>Creator<\/strong><\/td><td>UX designer or the person who gave the idea<\/td><td>UX designer<\/td><td>UX designer<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It is a long process for any product or any website or webpage or even application to get into the final state and be released to users from the very beginning. Once the idea gets proposed, the basic design of the website or the application needs to create. The first phase of the design should have the basic idea of the webpage or application. This can be done on any whiteboard or even with pen and paper just by using some basic marks and without any design and color. This is the wireframe, the very basic design structure. Then comes the mockups, with the visual effect of the webpage or the application on it. This one contains the graphics, loge, and icon in it. This is the second stage of product designing. The mockups are the static display of the webpage or the application.<\/p>\n\n\n\n<p>After these two get selected the final design of the product comes with interactive and navigation elements for users to use and provide feedback. This is the prototype. After this part, the design goes for the execution. Though these almost sound synonymous but have different properties and functions for the design of the webpage or the application.<\/p>\n\n\n\n<p>If you have an <a href=\"https:\/\/emizentech.com\/blog\/mobile-app-ideas.html\">app idea<\/a> that you want to build then Emizentech can assist you. We are an <a href=\"https:\/\/emizentech.com\/mobile-app-development.html\">app development agency<\/a> that has building innovative mobile apps for clients globally. So, if you need help, get in touch with us.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Frequently Asked Questions on Wireframe vs. Mockup vs. Prototype<\/h3>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1649915948096\"><strong class=\"schema-faq-question\"><strong>What are the differences between wireframe and mockup?<\/strong><\/strong> <p class=\"schema-faq-answer\">The wireframe is the basic structure of any given proposal of any new idea. This contains only the location and required area of that particular item, and there is no graphics and color get used in the wireframe. On the other hand, the mockup is the static form of the webpage or the application. Getting evaluated from a wireframe with graphics, color, and icons, a mockup has a lot of visual expressions.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649915970341\"><strong class=\"schema-faq-question\"><strong>How can mockup and prototype be differentiated?<\/strong><\/strong> <p class=\"schema-faq-answer\">Where mockups are just static forms of the webpage or application, the prototype is the form of the webpage or the application as the user will use that. This has interactive navigation options for the users to use like the real one.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649915985605\"><strong class=\"schema-faq-question\"><strong>What will be the design cycles for any webpage or application?<\/strong><\/strong> <p class=\"schema-faq-answer\">The design cycles get started with the proposal of an idea, then it comes to the wireframes, once the wireframes got approval, the mockups get ready. After the approval mockup, it comes the prototype. Finally, once the prototype gets the approval, the get gets executed.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649915995005\"><strong class=\"schema-faq-question\"><strong>Which is considered to be the last stage of the design cycle and why?<\/strong><\/strong> <p class=\"schema-faq-answer\">The prototype is considered to be the last stage of the design cycle. Once the prototype gets the approval and the users provide the feedback on the product or the webpage or the application, the design straight away goes to the product management team for execution, this is why the prototype is the last stage of the design cycle.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Some of the common terms that any product design team uses are Wireframe, Mockup, and Prototype. The design team uses these terms to make an illustration of any concept, to gather feedback, and to gain consensus. With the help of these, the team will be able to create the design. These things also help to<\/p>\n","protected":false},"author":35,"featured_media":28364,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[81],"tags":[],"class_list":{"0":"post-28362","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-mobile-app-development"},"jetpack_featured_media_url":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframe-vs.-Mockup-vs.-Prototype.jpg","featured_image_src":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframe-vs.-Mockup-vs.-Prototype-600x400.jpg","featured_image_src_square":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/Wireframe-vs.-Mockup-vs.-Prototype-600x600.jpg","author_info":{"display_name":"Amit Samsukha","author_link":"https:\/\/emizentech.com\/blog\/author\/amit"},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/28362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/comments?post=28362"}],"version-history":[{"count":0,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/28362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media\/28364"}],"wp:attachment":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media?parent=28362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/categories?post=28362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/tags?post=28362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}