Wireframe and Prototyping

For any product to be developed, a blueprint is required. Similarly when we develop a website or a web or mobile application we create a blue print which is known as Wireframe. In layman’s terms Wireframe gives us a visual representation of the contents of a website or an application. The process of creating the outline structure is known as Wireframing. It gives the user an understanding of layout, flow of data and information, intended behaviours and details about the architecture. Wireframes are the basic structures and thus are not too fancy. It uses minimum color and graphics and helps to develop the initial draft of the product. Traditionally there were used to be drawn hand sketched but now there are so many tools available Wireframes are drawn digitally. A few most used tools are Balsamiq, Axure, Adobe Xd, Moqups and Lucid Chart just to name a few. Wireframing takes place during the discovery phase. They are developed based on the insights gained  during requirement gathering sessions. They are developed by the UI/UX designers. What features to be included and what not largely depends on whether the Wireframe is low, mid or high fidelity. Because it’s 2-D structure wireframes does not showcase features like dropdown menus, pop ups, hover states etc.

Unlike the wireframes prototypes are the tangible forms of the basic designs. Prototypes are built to test and validate the designs and  to test during pilot project run. Prototypes are continuously built, tested and rebuilt until an acceptable version is created. In other words we can say that it is the basic version of the final product. Each version of the prototype varies in fidelity. Designing a prototype begins during the requirement gathering and analysis stage, once the basic model is ready with continuous development a preliminary design is develop and then an actual prototype is developed which is nothing but a small working model of the actual product. Based on the client’s continuous feedback modifications are made until a final version is achieved. Generally, prototypes are developed when the requirements are unclear. While designing a prototype it should be simple but still flexible. Prototyping invites change requests as the users are actively involved. There are four types of prototyping models rapid throwaway, evolutionary throwaway, incremental prototype and extreme prototype. In order to avoid project delay and going overboard the cost it is essential to conduct regular meetings. It is an iterative approach and based on trial-and-error method. A few commonly used tools are Adobe XD, Sketch, Axure RP ,Balsamiq etc. An important point to remember is that prototypes are not the MVPs but it definitely accelerates the process of MVP development.

Wireframes differs from prototype with the fact that wireframe is a tree diagram or flowchart of the tool whereas prototypes are the mockup or demo of the final product. Wireframe is a plain text 2D version however prototypes are the 3D versions. Wireframes does not contain visual designs and colours whereas prototypes contains rich images and includes interactions and animations and are responsive.