![\"CN_Blog1_Masthead_09-08-16\"](\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/08\/CN_Blog1_Masthead_09-08-16.png\")
<\/p>\n<\/p>\n
Some people might not click into this piece because they think that it\u2019s not important to know the supposedly \u201cminute\u201d differences between the above mentioned web development jargon. If you have opened this link and are having similar thoughts, we will stop you right there. Let\u2019s get to the why part straight away.<\/span><\/p>\n These terms are often used synonymously and in inter-changeable contexts, though they look different and serve very different purposes. So even if you are a non-technical person, here is a list of reasons of why even you need to know the exact distinction between the terms mentioned above:<\/span><\/p>\n This 4 minute read can help you clear the cloud of confusion between the three terms as simply as possible<\/span><\/p>\n Wireframes are the skeleton or simple structure of the website. They are generally used to describe the rough content heads and flow of the website. The wireframe is also the stage of development where you decide which content goes where.<\/span><\/p>\n The wireframe however does not cover the visual aesthetics of the website.<\/span><\/p>\n A mockup is a static design of the website in which the identity of the website is established through colour, typography, visual style etc. Mockups can be good way of starting your development process after you have thought through your wireframe. They are generally useful for making other people understand your visualization of the website, because they are more understood that abstract wireframe.<\/span><\/p>\n Prototypes are the ultimate representation of how your final website is going to be like. It\u2019s when we take a step further from the mockup and enrich it with UX elements, interactions, view flow, animations etc. The only thing separating a prototype from that of the real website is the lack of functionality. <\/span><\/p>\n Understanding the differences between these terms is even more so important when you are working with a remote team for developing your website, since if the meaning of one term is misconstrued, it can lead to process aberration, misunderstandings and thus affecting your end product.<\/span><\/p>\n\n
Wireframes<\/b><\/span><\/h6>\n
![\"wire](\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/08\/wire-frame.jpg\")
<\/p>\nMockups<\/b><\/span><\/h6>\n
![\"Mock](\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/08\/Mock-up.jpg\")
<\/p>\nPrototypes <\/b><\/span><\/h6>\n
![\"Mock](\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/08\/Mock-Up.jpg\")
<\/p>\n