E-commerce Website Development: HTML, CSS, and Balsamiq Mockups

Desklib provides past papers and solved assignments. This project details e-commerce website development using HTML, CSS, and Balsamiq.

Introduction
The given assessment is about creating a website which is designed and created by using CSS
and HTML. The designing of the website can be done by using CSS and the functioning can be
added by using HTML. After creating the website, there is a need to create the mockups by using
a wireframe tool named as Balsamiq that will provide the overall user interface or the website
blueprint. After creating the mockups and website there is a need to create the proper
documentation in order to give an overall view of the assessment at one place. In the document,
all the features that are added in the website need to explain. As the website is on online
shopping so the different features includes a Home page, Contact page, Product page, about us
page and feedback. Attach the mockup file as well as the website with the document.
1

Design Documentation
The documentation of the website includes the different part that the website includes along with
every part explanation.
Home page
Browser Home page:
The home page of the website includes different options like Home, Product, Contact Us, About
us and feedback. Moreover, the heading, image and the video player and a label for the option of
Follow us is included. Various icons of Facebook, Instagram, LinkedIn, and Twitter are also
added on the home page.
Figure 1: Browser Home page
2

Smartphone page:
The screen of smartphone of home page given:
Figure 2: Smartphone Home Page
About us page
Browser about page:
The browser about page includes the navigation bar which includes the home, about, product,
feedback and contact. Moreover, a heading, description of the products and a dummy content is
added. The use of icons of social sites like facebook, Instagram and twitter is also added.
3

Figure 3: Browser About Us page
Smartphone page:
The screenshot is given for the smartphone screen of the about us page:
4

Figure 4: Smartphone About Us page
Product Page:
Browser page:
The product page on the browser screen is shown below that contains the images and headings of
the product that is available on the website.
The screenshot for the same is given below:
5

Figure 5: Browser Product page
6

Smart Phone page:
The smartphone page screen of the product page is shown with the help of a screenshot.
Figure 6: Smartphone Product page
Contact Page:
Browser screen
The contact page of the website consists of the navigation bar that have home, about, product,
feedback and contact us and feedback options along with the symbols of Facebook, Instagram,
Twitter and LinkedIn, and a label in order to follow us and an image with the text field for
entering the data is given. A button is also available for sending the feedback is also added.
7

Figure 7: Browser Contact Us page
Smartphone screen:
The screenshots are given.
8

Figure 8: Smartphone Contact Us page
Feedback page:
Browser screen
9

Figure 9: Browser Feedback page
Smartphone screen
Figure 10: Smartphone feedback page
10

Place Order page:
Browser screen
Figure 11: Browser Place Order Page
Smartphone screen
11

Figure 12: Smartphone Place Order Page
12