{"id":478,"date":"2017-09-16T06:54:03","date_gmt":"2017-09-16T06:54:03","guid":{"rendered":"http:\/\/mansainfotech.com\/blog\/?p=478"},"modified":"2017-09-16T06:54:03","modified_gmt":"2017-09-16T06:54:03","slug":"wireframe-mockup-prototype-all-you-need-know","status":"publish","type":"post","link":"https:\/\/mansainfotech.com\/blog\/wireframe-mockup-prototype-all-you-need-know\/","title":{"rendered":"Wireframe, Mockup & Prototype \u2013 All you need know!"},"content":{"rendered":"

\u2018Wireframe => Mockup => Prototype\u2019<\/span><\/span><\/p>\n

Differentiating between various design tools-of-trade can be quite confusing. So, learning their inside outs is important. They look different, work differently and communicate different things. <\/span><\/p>\n

Let\u2019s get started by discussing each design process in more details: <\/span><\/p>\n

Wireframing \u2013 What are wireframes and how can they serve us better? <\/b><\/span><\/p>\n

\n

A wireframe is low fidelity representation of design. It represents What? Where? & How? Of your design. <\/span><\/p>\n

? What, main groups of content<\/span><\/p>\n

? Where, structure of information<\/span><\/p>\n

? How, the interface interaction<\/span><\/p>\n

Wireframes are the backbone of your design. They represent every important piece of information for your final product (They are not a meaningless set of grey boxes like they look). <\/span><\/p>\n

With Wireframes, you are setting path for the whole project and for the people you\u2019re working with \u2013 developers, copywriters, project managers. <\/span><\/p>\n

Various methods of building Wireframes include: <\/span><\/p>\n

– Sketching<\/span><\/p>\n

– Graphic design software<\/span><\/p>\n

– Presentation software<\/span><\/p>\n

– Design software <\/span><\/p>\n

And, here is the list of various wireframing tools: <\/span><\/p>\n

– Wireframe.cc<\/span><\/p>\n

– Moqups<\/span><\/p>\n

– UXPin<\/span><\/p>\n

– Fluid UI<\/span><\/p>\n

– Balsamiq Mockups<\/span><\/p>\n

And so on…<\/span><\/p>\n

Prototypes \u2013 What is prototype and when to use it? <\/b><\/span><\/p>\n

\n

A prototype is often confused with wireframe. <\/span><\/p>\n

The prototype is middle to high-fidelity representation of a final product. It allows users:<\/span><\/p>\n

~ to experience interaction with interface<\/span><\/p>\n

~ test main interaction similar to final product<\/span><\/p>\n

Thus, Prototypes provide a high degree of interactivity. But, it is not a final product!<\/span><\/p>\n

How are Prototypes Created? <\/i><\/span>They can be created in two ways, namely: <\/span><\/p>\n

1. Paper-based prototypes \u2013 paper, pencil, sticky notes, index cards.<\/span><\/p>\n

2. Click through prototypes \u2013 Adobe Fireworks.<\/span><\/p>\n

Both have their own set of advantages and disadvantages. <\/span><\/p>\n

Mockups (Mock-ups)<\/b><\/span><\/p>\n

\n

They are alive pictures and more visually appealing with colours, fonts, themes and buttons. A mockup shows how your final product will look like. <\/span><\/p>\n

The mockup is middle to high-fidelity design representation. A well-crafted mockup: <\/span><\/p>\n

~ represents information\u2019s structure<\/span><\/p>\n

~ encourage people to view visual side of project<\/span><\/p>\n

Mockups are often confused with wireframes by many companies. They are quick to build and are good feedback gatherers. They can be a great chapter of documentation.<\/span><\/p>\n

Sum \u2013 Up<\/b><\/span><\/p>\n

\n

Wireframes creates the product blueprint, mockups show the look and feel of design and it is prototyping which brings design to life. <\/span><\/p>\n

So, Before choosing or picking any design process, consider things such as \u2013 specification of problem you\u2019re trying to solve, getting to know your target audience, having a look on competitors and setting the overall requirement of the product. <\/span><\/p>\n

Hope, now, you\u2019ve got quick glance of what Wireframes, Mockups and Prototype are and how they can better serve us.<\/span><\/strong><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

\u2018Wireframe => Mockup => Prototype\u2019 Differentiating between various design tools-of-trade can be quite confusing. So, learning their inside outs is important. They look different, work differently and communicate different things. Let\u2019s get started by discussing each design process in more details: Wireframing \u2013 What are wireframes and how can they … Continue reading Wireframe, Mockup & Prototype \u2013 All you need know!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,33],"tags":[],"class_list":["post-478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux-development","category-web-design-and-development"],"_links":{"self":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=478"}],"version-history":[{"count":0,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media\/480"}],"wp:attachment":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}