Prototyping and Wireframing:-
Prototyping is an important process in software development. We need to create a simulation of the desired product to get to know how the real product will work. We can say it is a mock-up or a concept of an idea or a product.
The prototype is used for design feedback of the original product. It is also used for user testing. The prototype can be built very much quickly as compared to original product. It is also very much less expensive as compared to original product therefore it is used for getting feedback and user testing.
As an example here is a prototype of a login page.
What is UI and UX:-
The UI means User Interface so as the name suggests it includes the design and interface which the user will be observing. The UX means User Experience so it is concerned with the experience of the user who is using the product application.
So as to fulfil the desired requirements of UI and UX, prototyping is important so that we can get feedback from the user and get it tested before the finalization of the product.
Wireframe is a representation of interface of a page but it is two-dimensional only. It will help us to focus on space utilization of content and available functions which should be represented on the page. The typical wireframes will not include any sort of colouring, styling and designing.
The wireframing process will allow all the stakeholders to agree upon whether the content and functions are in place according to their requirement before the final development begins.
It should be kept in mind that all wireframes are prototypes but all prototypes are not wireframes because prototypes will demonstrate how a user will interact with feature and wireframe will only give us an idea of how a feature will look.