Web Development Project: Wireframe Model and User Interaction Design

This project focuses on the design of wireframe models for a website, serving as schematic blueprints for the site's structure and configuration. The assignment explores two interactive design models for an e-commerce platform, Local Farm House, considering user interaction, usability, and the integration of e-commerce and m-commerce functionalities. The project includes detailed wireframe diagrams for various pages, such as the home page, login, registration, product listings, individual product details, profile management, payment, and delivery information. The reasoning section compares the advantages and disadvantages of the two interactive design models, evaluating their usability, design principles, and user experience. The project concludes by emphasizing the importance of website design in attracting and retaining users, highlighting the significance of presenting information effectively and catering to user needs. The provided bibliography supports the research and design choices made throughout the project.

Running head: WIREFRAME MODEL DESIGN
User Interaction Model Design
Name of the Student
Name of the University

Subject Code: Subject Name: Semester Number:
Table of Contents
Introduction:....................................................................................................................................3
Interactive Design 1:........................................................................................................................4
Interactive Design 2:......................................................................................................................14
Reasoning:.....................................................................................................................................22
Conclusion:....................................................................................................................................24
Bibliography:.................................................................................................................................25
Student ID: Student Name: Page 2

Subject Code: Subject Name: Semester Number:
Introduction:
Those wireframe of a website alternately otherwise called those schematic blueprints of
the website, may be utilized for speaking to those diagram of the website structure as well as
additional configuration. It will be a functional device for those UX plan likewise this device
around is skilled of giving exceptionally solid Realities regarding website usability for
insignificant exertion. Those website configuration will be a incredulous assignment Likewise
the configuration need to be dependent upon those decisions of the nearby individuals who will
make purchasing from those association.
Those Local Farm House will be a well-known association who may be Intuition from
claiming making e-commerce as well as m-commerce provisions to the Growth for their
business. Those wireframe diagrams need been outlined as stated by those organization’s
Different necessities. Exchange diagrams are likewise in this report.
Student ID: Student Name: Page 3

Subject Code: Subject Name: Semester Number:
Interactive Design 1:
Figure 1: Home Page
(Source: Created by Author)
The home page consist of the offers that organization provides. The customer can see
various products that organization provides. The customer can navigate through the site using the
menu. The products shown in this page will be categorized.
Student ID: Student Name: Page 4

Subject Code: Subject Name: Semester Number:
Figure 2: Login
(Source: Created by Author)
The login page allows the customer to login into the system using the registered user id or
email and password. The user can also login using social media if customer has registered
through social media.
Student ID: Student Name: Page 5

Subject Code: Subject Name: Semester Number:
Figure 3: Registration
(Source: Created by Author)
The user can register into the system using the personal information. The user will
provide address and contact details that will be used in the time of delivery. The user can also
register using social media.
Student ID: Student Name: Page 6

Subject Code: Subject Name: Semester Number:
Figure 4: Products
(Source: Created by Author)
The products page will represent the products based on the category. If the customer
clicks on the category name then a page consist of only the products of those categories will be
shown. The different categories will be consisting of different pages.
Student ID: Student Name: Page 7

Subject Code: Subject Name: Semester Number:
Figure 5: Individual Product
(Source: Created by Author)
This page shows the individual products of the website. The page consist of all the details
of the product. The customer can also check if the product can be delivered to user address using
the Zip Code.
Student ID: Student Name: Page 8

Subject Code: Subject Name: Semester Number:
Figure 6: Profile
(Source: Created by Author)
This page shows the information of the user provided during registration. The user can
update the information by clicking on the “Update profile information”.
Student ID: Student Name: Page 9

Subject Code: Subject Name: Semester Number:
Figure 7: Profile Update
(Source: Created by Author)
The user can update the information by inputting the desired information and clicking on
the update button. The user can also change the profile picture.
Student ID: Student Name: Page 10

Subject Code: Subject Name: Semester Number:
Figure 8: Payment
(Source: Created by Author)
The user location details will be shown in the payment page and there is various ways of
making a payment.
Student ID: Student Name: Page 11

Subject Code: Subject Name: Semester Number:
Figure 9: Delivery Details
(Source: Created by Author)
The user will provide all the required data for delivering a product to this page. If the use
logs in then the user data will be automatically fetched from the database.
Student ID: Student Name: Page 12