Design & Development of Website Design & Development

1
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing
Unit number and title 10: Website Design & Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Do Sy Long Student ID GCD18337
Class GCD0824 Assessor name Srikanth Raju Kandukuri
Student declaration
I certify that the assignment submission is entirely my own work, and I fully understand the consequences of plagiarism. I understand
that making a false declaration is a form of malpractice.
Student’s signature
Grading grid
P5 P6 P7 M4 M5 D2 D3

2
 Summative Feedback:  Resubmission Feedback:
Grade: Assessor Signature: Date:
Signature & Date:

3
WEB DESIGN AND DEVELOPMENTS
ASSIGNMENT 2
Đỗ Sỹ Long | GCD0824 | 8/21/2019

4
Contents
Chapter 0: Introduction............................................................................................................................................6
Chapter 1: Website Design Principles, Standards and Guidelines........................................................................7
1. Principles of Good Website Design.................................................................................................................7
a. Simple is the best.........................................................................................................................................7
b. Consistency..................................................................................................................................................7
c. Typography & Readability...........................................................................................................................7
d. Mobile Compatibility...................................................................................................................................7
e. Colour Palette and Imagery..........................................................................................................................7
f. Easy Loading...............................................................................................................................................8
g. Easy Navigation...........................................................................................................................................8
h. Communication............................................................................................................................................8
2. Web Design Standards and Guidelines............................................................................................................8
Chapter 2: Website Design Documents....................................................................................................................9
1. User and Client requirement............................................................................................................................9
a. User requirement.........................................................................................................................................9
b. Client requirement.......................................................................................................................................9
2. Website Wireframes........................................................................................................................................9
Chapter 3: Website Implementation......................................................................................................................15
1. Tools and Techniques for Develop a Website................................................................................................15
a. Mockflow.com...........................................................................................................................................15
b. Google Chrome..........................................................................................................................................15
c. XAMPP.....................................................................................................................................................15
2. Development Processes.................................................................................................................................16
a. Homepage Development............................................................................................................................16
b. Product Development.................................................................................................................................18
c. Checkout Development..............................................................................................................................20
d. Login Development...................................................................................................................................22
e. About us Development..............................................................................................................................23
Chapter 4: Testing...................................................................................................................................................25
1. User Experience Test.....................................................................................................................................25
2. User Interface Test.........................................................................................................................................25
Chapter 5: Reference.................................................................................................................................................26

5
Figure 1: Homepage Design.....................................................................................................................................10
Figure 2: Product Design..........................................................................................................................................11
Figure 3: Checkout Design.......................................................................................................................................12
Figure 4: Login Design.............................................................................................................................................13
Figure 5: About Us Design.......................................................................................................................................14
Figure 6: Homepage Development...........................................................................................................................16
Figure 7: Index(Homepage).html..............................................................................................................................17
Figure 8: Product Development................................................................................................................................18
Figure 9: Product.html Development........................................................................................................................19
Figure 10: Checkout Development...........................................................................................................................20
Figure 11: Checkout.html Development...................................................................................................................21
Figure 12: Login Development.................................................................................................................................22
Figure 13: About us Development............................................................................................................................23
Figure 14: About.html Development........................................................................................................................24

6
Chapter 0: Introduction
This report aims to develop Women’s Fashion, an online shopping website. The report contains steps-by-
steps design of this multi-pages website.