A prototype is a first or preliminary version of a device or vehicle from which other forms are developed. As to start our development process for the Hecnet, there is a need to design a prototype that explains the functionality Hecnet would be providing. I had made my prototype using proto.io which provides a great UI to design prototypes.
The app itself consist of 3 screens.
#Screen 1-Login Screen
On the upper left corner, there is the name of the Web app. The students would need to the login by entering their e-mail id and password. Students who are not registered would have to register themselves by providing necessary information. I choose various text and rectangles(to display text area) from the tools provided. I also choose a password tool so to display that we have entered a password. Putting the picture of the college makes the app a bit more attractive.
#Screen 2-User Profile
The next screen shows the information about the user. There is also an option to put a picture of the user. The user can edit or modify the information by clicking on edit profile hypertext. There is also an option provided to change the photo. I have used text and horizontal lines mainly for this screen. I have used task pane tool to show on which screen the user is active on. Also, I have displayed date and time along with a navigation button to change the screen. The user would be able to change the screen by clicking on the navigation arrow or clicking on the other screens in the task pane.
I have used task pane in this screen also to let the user know that he is currently on downloads screen. In this screen, the user would be able to choose the semester according to which the user can download relevant content to the course. The content would be further categorized. A navigation button and date-time are displayed on upper right corner same as on the previous screen. There is also a label tool used to display various news related to the college that would expand when the user would bring the cursor over them.