Designing the Prototype!!
Task 1.2) App wireframe/prototype
Welcome back fellow readers!!! This is the second blog about the Hasura internship which is based on the design of the prototype. We basically started by selecting a topic for our 3 screen app which has been stated in the first blog (link :- Here). After a successful selection of the topic for the 3 screen app by the 2 member group (Sayali Jawre and Sarvesh Narkar), our next task was to design a prototype i.e a look alike of our main project.
Design is a very aspect of any project. It is the design with which a website or an app can create a very good first impression and win the users. It helps us in knowing what will be the websites limitations in advance paving our way to improve them.
As we have used two very not well known terms(Not well known to even me before :D) in our subtitle, wiz ‘wireframe’ and ‘prototype’, lets describe them first.
Wireframe
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
Prototype
A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is generally used to evaluate a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one. In simple terms, a prototype is a look alike of the real model.
A prototype for an app or website can be created using various tools like Origami Studio , Webflow,Framer,etc. But we were recommended to use Proto.io . Without any ambiguity about the choice of the tool(as it was suggested by ‘Hasura’ :D),we started to get accustomed to the tool by watching some videos on YouTube. Proto.io has offered an exclusive 30 day, free trial only for Hasura interns thus making us avail all the features of Proto.io .
The link to our Prototype is : My Calorie Tracker
Various Screens of our Prototype are
- Personal Info Screen
The user will enter his Physical details like Height in mtrs and Weight in kgs. This screen will be displayed to the user after he signs up. In the Result section a message will be displayed describing the current status of the user(eg. Overweight,Underweight) and the goal weight required for him to attain ‘Normal(healthy weight)’ status along with the daily maximum calorie intake allowed for him/her as per the goal weight.
2. Daily Intake Screen
In this screen the user has to select the options provided like Breakfast, Lunch,etc and once he selects an option he will be redirected to the ‘Intake Count’ Screen. After entering all the relevant details and clicking on the ‘SUBMIT’ button, a box will appear containing the total calorie intake for the day with a message saying how is the attempt to match the goal weight is proceeding.
3. Intake Count Screen
After clicking the ‘SUBMIT’ button from the ‘Daily Intake’ Screen, the user is redirected to this screen. In this screen, the user will be prompted to enter the food item he had during his meal and if this item is available for evaluation the calorie amount will be generated besides the box. He has to enter the quantity of the food item and then press ‘Submit’. The user will be asked if any further quantity to be added and then the same process follows.
The next blog will be about setting up the local development. Till then Ciao!!!
