{"id":96451,"date":"2024-02-20T10:04:14","date_gmt":"2024-02-20T08:04:14","guid":{"rendered":"https:\/\/happybrain.it\/?p=96451"},"modified":"2024-02-20T10:04:14","modified_gmt":"2024-02-20T08:04:14","slug":"wireframing-prototyping-mockuping-qual-e-la-differenza","status":"publish","type":"post","link":"https:\/\/happybrain.it\/en\/2024\/02\/20\/wireframing-prototyping-mockuping-qual-e-la-differenza\/","title":{"rendered":"Wireframing, prototyping &#038; mockuping: what is the difference?"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column column_width_percent=&#8221;80&#8243; gutter_size=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_empty_space empty_h=&#8221;1&#8243;][vc_column_text uncode_shortcode_id=&#8221;161221&#8243;]Wireframe, mock-up and prototype: how confusing! These terms are closely related to User Experience (UX) and are often used as synonyms thinking they are the same thing, but instead represent different stages in the complex design process. In reality they look different, communicate something different and serve different purposes.<\/p>\n<p>In this article we want to explain the difference between these tools and understand when to use or not to use them for a flawless user experience.<\/p>\n<p>Before analysing each of these tools, let&#8217;s start with the similarities.[\/vc_column_text][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;653631&#8243;]What do these elements have in common?[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;269239&#8243;]Wireframe, mock-up and prototype are different forms of the same project. All three enable the needs and expectations of the project to be assessed with the customer. However, they are different and consecutive phases of design. Let&#8217;s find out how they differentiate![\/vc_column_text][vc_single_image media=&#8221;96455&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;268198&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;262923&#8243;]Wireframe[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;174084&#8243;]A wireframe is a low-fidelity representation of a project, a technical document with the purpose of defining project guidelines. Think of it as the visual skeleton of your project: a draft to put the organisation of the platform&#8217;s contents on paper.<\/p>\n<p><strong>Characteristics<\/strong>: not very detailed in design, it has very poor and simple graphics. It must clearly represent the main content groups, the information structure and a basic description and visualisation of the interaction between the interface and the user.<\/p>\n<p>Black, grey, white are the typical colours to be used (adding blue to specify links). This is precisely because it is a first step in which structural elements count more than design.<\/p>\n<p><strong>When to use them?<\/strong><br \/>\nA wireframe can be used as project documentation to establish the hierarchy of information and site navigation. You can also use them in a less formal way, just pen and paper, as sketches for &#8216;quick&#8217; communication within the team, and then move on to the more advanced stages of design.<\/p>\n<blockquote><p>HappyTips: Wireframes are never (or almost never) used as test material, although they can sometimes be useful for gathering feedback in the initial stages of research.<\/p><\/blockquote>\n<p><strong>Recap<\/strong> wireframes:<\/p>\n<ul>\n<li>initial design phase<\/li>\n<li>non-interactive<\/li>\n<li>lack of aesthetic components (colours, images, animations)<\/li>\n<li>representation and low fidelity<\/li>\n<li>skeleton of the final product (simple structure)<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image media=&#8221;96456&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;934140&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;602075&#8243;]Mockup[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;445083&#8243;]Let\u2019s move on to the mockup, which is a static representation of the project, in this case with medium-high fidelity.<br \/>\nWe can define it as an evolution of the wireframe that tries to show all the details in terms of content and functionality. Very often it is a draft visual design or even the actual visual design.<\/p>\n<p><strong>Features<\/strong>: represents the structure of information, displays content and demonstrates basic functionality in a static manner. Unlike the prototype, it is not clickable but helps you decide on colour combinations, style, typography. It actually shows the visual appearance of the project with visual and graphical details.<\/p>\n<p><strong>When to use them?<\/strong><br \/>\nMockups are much faster to create than prototypes. They are a great collector of feedback and if placed effectively in the project history can make a great documentation chapter.<br \/>\nUse them to get feedback from customers and make changes before development, so you can save time once the interface is created.<\/p>\n<p><strong>Recap<\/strong> mockups:<\/p>\n<ul>\n<li>intermediate design phase<\/li>\n<li>generally non-interactive<\/li>\n<li>characterised by graphic and visual elements<\/li>\n<li>medium\/high fidelity representation<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image media=&#8221;96457&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;377878&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;144426&#8243;]Prototype[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;216859&#8243;]The last but not least important element is the prototype, which is a medium-high fidelity representation of the final product. An interactive schema that simulates interaction with the user interface and must allow the user to:<br \/>\nexperience content and interactions with the interface<br \/>\ntest the interactions in a similar way to the final product<\/p>\n<p><strong>Features<\/strong><br \/>\nPrototypes are an engaging, interactive form of design documentation with lots of visual detail, the interface is tangible and direct. They are actually a fairly expensive form of design communication characterised by long lead times. But if done correctly and combined with user testing it pays for itself!<\/p>\n<p><strong>When to use them?<\/strong><br \/>\nUnlike wireframes, you can exploit the full potential of prototypes in testing to obtain feedback from users, to verify the usability of the interface before development. Users will be able to test the technical feasibility of your design allowing you to identify potential problems and improve the overall user experience.<\/p>\n<p>Prototype <strong>Recap<\/strong>:<\/p>\n<ul>\n<li>final design phase<\/li>\n<li>interactive<\/li>\n<li>characterised by all interactive, graphical and structural elements<\/li>\n<li>high-fidelity representation<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image media=&#8221;96458&#8243; media_width_percent=&#8221;100&#8243; uncode_shortcode_id=&#8221;432852&#8243;][vc_custom_heading text_size=&#8221;h3&#8243; sub_reduced=&#8221;yes&#8221; uncode_shortcode_id=&#8221;564536&#8243;]Conclusions[\/vc_custom_heading][vc_column_text uncode_shortcode_id=&#8221;972646&#8243;]If the wireframe gives you an idea of the structure, information and layout, the mockup allows you to visualise and evaluate the graphic component as well, but the prototype is almost the final design that allows you to interact and ensure the usability of the interface.<\/p>\n<p>Making these mock-ups allows you to follow a more linear creation process with fewer hiccups, saving resources and time. Now you just have to get started![\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wireframe, Mockup and Prototype are the different phases of the design process. Linked to User Experience, they are often confused and\/or treated as synonyms. In this article, we will discover their similarities, differences and how to use them for flawless UX!<\/p>\n","protected":false},"author":13,"featured_media":96454,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[281,406],"tags":[224,235,335],"class_list":["post-96451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-about-web","tag-web-project","tag-web-design","tag-user-experience"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/comments?post=96451"}],"version-history":[{"count":8,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96451\/revisions"}],"predecessor-version":[{"id":96464,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/posts\/96451\/revisions\/96464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media\/96454"}],"wp:attachment":[{"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/media?parent=96451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/categories?post=96451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/happybrain.it\/en\/wp-json\/wp\/v2\/tags?post=96451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}