Basics of Prototyping
Prototype is an early sample of design used to get feedback and rapid experiments with new ideas. We prototype to limit the expenses of development, test design concepts and to test the usability of the application. Prototypes typically created with a mixture of sketches and mock ups. This can use as a tool to get user feedback early and quickly on our design where we can iterate on making our application better.
Sketching is a drawing which we can easily do with a papers and pens with less cost. Most sketching is used in the early stages of the design process to get new ideas for the application as well as use to identify the users pain point. Low fidelity sketches are used to identify user sticking points and get new ideas for the application at early stage. With sketches, we can rapidly iterate the design with low cost to make the application more useable.
Wireframes are representation of layouts and mostly focused on the layout of the content. Mostly use gray scale or black and white. In low fidelity wireframing, we can use tools to create gray scale wireframes which is a richer way than sketching at the beginning of the design process. Mockups is a fully created design including color details, typography, and content. This will more like the final application. Mockups don't represent the interactions.
There are two kinds of prototypes, medium fidelity and high fidelity. Medium fidelity prototypes are a mixture of basic text and some UI elements. Mostly, this is used when we have key elements in place but you need to validate to get better understanding of user needs. High fidelity prototypes are used to validate the prototype when we have a finalize idea, UI and work flow. As a result of the finished design, most of the usability issues at this stage will get caught and we will be able to get the feedback on everything including text fields, labels, content, colors and the general usability of the whole product. Sometimes users aren't going to be as willing to give feedback because our design looks almost the final design.
Sketches, wireframes and mockups are just designs, but to make it more functional we need to add interactions. This will give the user the exact idea of how UI's change according to their actions.