Even though I’ve been learning design for years, till now, I still don’t have a clear view of what’s the difference of wireframe and prototype. So I decided to end it this time.
In Moule’s book, he mentioned:
A wireframe is a basic skeleton for the design you are creating. It is intended to show structure, information hierarchy, functions and content, while communicating through the lack of color and polish that it is still very much a work-in-progress. Its main purpose lies in helping you to better realize the functionality, behaviors, and content you need for different areas of your design. Creating wireframes is the first step towards understanding the transitions between states in your design, and they are a great way to progress your problem-solving beyond sketching.
When it comes to user-testing your product, your prototype should ideally simulate the experience of using your product in a much more realistic manner than sketches. Hi-fi prototypes result in more useful feedback from user tests.
Basic wireframes are great for exploring the arrangement of features on a page, as well as how the overall sequencing and flow of screens might occur, helping the internal team understand and explore a particular approach quickly.
Hi-fi visual with light interactions are best for exploring user reactions.