{"id":5893,"date":"2016-08-02T14:08:03","date_gmt":"2016-08-02T14:08:03","guid":{"rendered":"https:\/\/9series-blog.staging9.com\/?p=5893"},"modified":"2026-03-03T10:43:49","modified_gmt":"2026-03-03T10:43:49","slug":"wireframing-prototyping-envisioning-concept","status":"publish","type":"post","link":"https:\/\/www.9series.com\/blog\/wireframing-prototyping-envisioning-concept\/","title":{"rendered":"Wireframing, Prototyping and Envisioning the Concept!"},"content":{"rendered":"<p>The wireframe and prototype are diverse in light of the fact that they utilized correspondingly. They look unequal and are implied for various vital. Occasionally a project will just need a wireframe, while at outstanding it will require a prototype.<\/p>\n<p>In this article, we will talk about wireframe &amp; prototype in a nutshell, so people can get an exact idea of what to use in specific situations.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/Wireframing-Prototyping-Envisioning-the-Concept.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1545\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/Wireframing-Prototyping-Envisioning-the-Concept.jpg\" alt=\"Wireframing,-Prototyping-&amp;-Envisioning-the-Concept!\" width=\"800\" height=\"500\" \/><\/a><\/p>\n<p><span style=\"font-weight: bold\">What is a Wireframe?<\/span><\/p>\n<p>In <a href=\"https:\/\/www.9series.com\/services\/ui-ux-design.html\" target=\"_blank\">UI\/UX design<\/a>, a wireframe refers to a static harbinger to an actual design. It&#8217;s essentially a harsh slashed hand drawing on a bit of paper, that gives you a low-fidelity representation of your app. Basically, it&#8217;s the root of your design. It needs to incorporate imperative bits of your future application or product.<\/p>\n<p>Wireframes reveal enough detail however make a basic representation plan that guides the project and its fellow team members.<\/p>\n<p>A creative wireframe:<\/p>\n<ul>\n<li>Visualize the basic aspect of a web page<\/li>\n<li>Develop and refine quickly<\/li>\n<li>Non interactive<\/li>\n<\/ul>\n<p>It should clearly visualized:<\/p>\n<ul>\n<li>The main groups of content (what?)<\/li>\n<li>Information and basic visualisation of the user \u2013 interface interaction (how?)<\/li>\n<li>The structure of data (where?)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/Wireframe-.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1547\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/Wireframe-.jpeg\" alt=\"wireframe UX\/UI Design\" width=\"763\" height=\"501\" \/><\/a><\/p>\n<p>Wireframes are not just an aimless bunch of grey boxes, though they may look exactly similar. Offer thought to them as the key-stone of your design and remember that wireframes ought to convey a representation of each imperative piece of the final application or product.<\/p>\n<p>Wireframes are generally practiced as the documentation of the project. Once a wireframe starts becoming influencing, it becomes a prototype.<\/p>\n<p><span style=\"font-weight: bold\">What is a Prototype?<\/span><\/p>\n<p>A prototype is next level of implementation compared to wireframe. It encapsulates middle to high fidelity representation of the application or product, which reproduce user interface interaction.<\/p>\n<p>A prototype is a visual layout of website\/application utilizing of colors, type, and images helps to create the final web\/application look and feel. It comprises of creating a user experience of the website\/application in the form of interactivity. It might not look same alike the final application or product, however, can be indistinguishable.<\/p>\n<p>It should permit the user to:<\/p>\n<ul>\n<li>Experience content and interactions with the interface<\/li>\n<li>Check the main interactions in a way similar to the final application or product.<\/li>\n<\/ul>\n<p>A well-done prototype:<\/p>\n<ul>\n<li>Interactive<\/li>\n<li>Model the user experience<\/li>\n<li>Enable extensive user testing<\/li>\n<\/ul>\n<p>A prototype is an impeccable material to test the usability of the interface before the application or product starts, it may or may not contain the real data.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/screens.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1555\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2016\/08\/screens.jpg\" alt=\"screens\" width=\"800\" height=\"970\" \/><\/a><\/p>\n<p>It helps to visualize overall concept in depth; if design &amp; prototyped appropriately, it saves development effort upto 30%.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The wireframe and prototype are diverse in light of the fact that they utilized correspondingly. They look unequal and are implied for various vital. Occasionally a project will just need&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[1437],"tags":[1575,1828,1666,1829,1830,1831],"class_list":["post-5893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uiux-design","tag-creative-graphics-design-services","tag-prototyping","tag-responsive-website-design","tag-uiux-designer","tag-uxui-design","tag-wireframeing"],"_links":{"self":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/comments?post=5893"}],"version-history":[{"count":1,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5893\/revisions"}],"predecessor-version":[{"id":5897,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/5893\/revisions\/5897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media\/5894"}],"wp:attachment":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media?parent=5893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/categories?post=5893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/tags?post=5893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}