GUI Prototyping Structure
Prototyping is an important part of developing web and mobile applications. Prototypes can help us in determining what our end-users need in the design process. With a prototype, we can create better UX(User Experience) & UI(User Interface) for our application.
Rapid Prototyping is all about revising quickly based on feedback and shifting to multiple prototyping approaches based on the requirements. It is an iterative process to improve prototypes.
Three Important Stages: Prototype, Review, Refine & Iterate (Repeat the process until you find desire output)
The Rapid Prototyping (Borrowed from pick3dprinter.com)
There are three stages to create a prototype for our application:
- Before starting out, Write down the list of requirements for the individual page (For example, "Login Page" Requirements: Should have a logo, should have Contact Us, About Us, Login Form (of course), Footer, logo)
- Rapid, sketched paper prototypes:
In this stage, focus on the Layout and Structure of the page with no functionality. These can be built over and over until some fundamental questions about UX concepts, feature completeness, and high-level page flows are answered. You can use the mobile screen printouts to sketch your ideas (Download from https://uiprint.co/all-printable
- Lo-fi, Low-Stress Wireframes:
Once the desired outcome has established at a low fidelity using paper prototypes, it's time to start transitioning towards a slightly higher level using wireframes. In this stage, we are moving from paper to screen. In this stage focus on functionality, but not in detail. Determine the functionality that is required to have on the page. At the end of this stage, we should have clickable lo-fi wireframe. After this stage, we can conduct usability testing.
- Hi-fi, Clickable Prototypes:
Once we have Lo-fi clickable wireframes, we should now focus on building a higher fidelity prototype to provide a more realistic experience. In this prototype, we need to focus here not only on the user interface (UI) of the application in terms of visuals and aesthetics but also the user experience(UX) aspects in terms of interactions, user flow and behaviour. (Main Focus: Colour Schemes, Visual Design, interactive elements, animations, navigational schemas from one screen to another)
(Resource: https://www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/)
Please look into these useful links as needed: