Download Website Design and Development - Assignment 2 and more Papers Computer Applications in PDF only on Docsity!
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 Hồ Ngọc Khánh Student ID GCS
Class GCD0901 Assessor name Phan Thanh Trà
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 Khanh
Grading grid
P5 P6 P7 M4 M5 D2 D
Summative Feedback: Resubmission Feedback:
Grade: Assessor Signature: Date:
Signature & Date:
- A. DESIGN PLAN (P5)
- I. Users’ Requirements.........................................................................................................................................
- II. Review accessibility standards and guidelines
- III. Website Design Principles (Laja, 2019)
- IV. Use cases diagram
- V. Wireframes
- VI. Sitemap
- B. IMPLEMENTATION (P6 – M4)...................................................................................................................
- I. Source code samples of the website
- II. Screenshots of final website with explanation
- III. Compare the website to the original design and draw conclusions
- C. TESTING (P7 – M5)
- I. Test cases
- II. Actual Test Result
- III. QA (Quality Assurance)
- D. References
- Figure 1: SKETCH IDEAS FIGURES AND TABLES
- Figure 2: WIREFRAME FOR WEBSITE DESIGN
- Figure 3: STYLE TILES
- Figure 4: PROTOTYPE
- Figure 5: VISUAL HIERARCHY
- Figure 6: THE GOLDEN RATIO
- Figure 7: HICK'S LAW.....................................................................................................................................................
- Figure 8: FITTS'S LAW..................................................................................................................................................
- Figure 9: RULE OF THIRDS
- Figure 10: GESTALT DESIGN LAWS..............................................................................................................................
- Figure 11: WHITE SPACE AND CLEAN DESIGN
- Figure 12: OCCAM’S RAZOR
- Figure 13: USE CASE DIAGRAM
- Figure 14: WIREFRAME OF LANDING PAGE
- Figure 15: WIREFRAME OF SHOPPING PAGE
- Figure 16: WIREFRAME OF MY BASKET PAGE
- Figure 17: WIREFRAME OF CONTACT PAGE
- Figure 18: WIREFRAME OF PROFILE PAGE..................................................................................................................
- Figure 19: WIREFRAME OF LOGIN PAGE.....................................................................................................................
- Figure 20: WIREFRAME OF REGISTER PAGE
- Figure 21: SITE MAP OF MY WEBSITE
- Figure 22: LANDING PAGE: HERO IMAGE
- Figure 23: SOURCE CODE OF LANDING PAGE: HERO IMAGE......................................................................................
- Figure 24: LANDING PAGE: GENRES SHOWCASE
- Figure 25: SOURCE CODE OF LANDING PAGE: GENRES SHOWCASE
- Figure 26: NAVIGATION BAR
- Figure 27: SOURCE CODE OF NAVIGATION BAR
- Figure 28: SHOPPING PAGE
- Figure 29: SOURCE CODE OF SHOPPING PAGE
- Figure 30: ADDITIONAL SOURCE CODE FOR SHOPPING PAGE
- Figure 31: MY BASKET PAGE
- Figure 32: SOURCE CODE OF MY BASKET PAGE: PRODUCTS SHOWCASE
- Figure 33: SOURCE CODE OF MY BASKET PAGE: TOTAL PRICE SECTION
- Figure 34: ADDITIONAL CODE FOR MY BASKET PAGE
- Figure 35: CONTACT INFORMATION PAGE
- Figure 36: SOURCE CODE OF CONTACT INFORMATION PAGE
- Figure 37: PROFILE PAGE
- Figure 38: SOURCE CODE OF PROFILE PAGE
- Figure 39: LOGIN PAGE
- Figure 40: SOURCE CODE FOR LOGIN PAGE
- Figure 41: REGISTER PAGE
- Figure 42: SOURCE CODE OF REGISTER PAGE
- Figure 43: CSS FOR HTML AND BODY
- Figure 44: NAVIGATION BAR
- Figure 45: CSS FOR NAVIGATION BAR
- Figure 46: HERO IMAGE
- Figure 47: CSS OF HERO IMAGE
- Figure 48: GENRES SHOWCASE
- Figure 49: CSS FOR GENRES SHOWCASE
- Figure 50: SHOPPING PAGE
- Figure 51: SHOPPING BASKET
- Figure 52: LOGIN PAGE
- Figure 53: CSS FOR LOGIN PAGE
- Figure 54: REGISTER PAGE
- Figure 55: CSS FOR REGISTER PAGE
- Figure 56: WIREFRAME OF LANDING PAGE
- Figure 57: WIREFRAME OF SHOPPING PAGE
- Figure 58: ACTUAL RESULT OF MY WEBSITE
- Figure 59: SHOPPING PAGE
- Figure 60: SCREENSHOT NO.1
- Figure 61: SCREENSHOT NO.2
- Figure 62: SCREENSHOT NO.3
- Figure 63: SCREENSHOT NO.4
- Figure 64: SCREENSHOT NO.6
- Figure 65: SCREENSHOT NO.5
- Figure 66: SCREENSHOT NO.7
- Figure 67: SCREENSHOT NO.8
- Figure 68: SCREENSHOT NO.9
- Figure 69: SCREENSHOT NO.10
- Figure 70: PROCESS OF QA
- Table 1: TEST CASES
Figure 1 : SKETCH IDEAS
When it comes to any activity that includes brainstorming, writing down your thoughts using a pen
and paper is the most effective method. Spend some time drawing any ideas that come to mind. You do
not need to be able to draw. You may begin with a circle, and your ideas will flow easily from there.
Find your best-looking websites and layouts depending on the demands of your clients, and then
seek for other websites in the same industry. Make a list of what you like and dislike about them. Layouts,
colors, forms, motions, and so forth. Anything that can provide you with ideas and motivation for your
next move.
Examine your competitors' websites closely. Examine all rivals, both locally and worldwide, and
learn from their content. What do they all have in common? It should be on your website. What exactly
are they missing? That is what you should do to improve your website.
WIREFRAMES (Anon., 2015)
Figure 2 : WIREFRAME FOR WEBSITE DESIGN
A wireframe is a web page layout that shows what interface components will be present on
important pages. It is an essential component of the interface design process.
A wireframe's purpose is to offer a visual overview of a page early in a project in order to gain
stakeholder and project team agreement before the creative process begins. Wireframes may also be used
to build global and secondary navigation to verify that the site's language and structure satisfy user
expectations.
STYLE TILES (Netmag, 2014)
Style tiles are a design planning tool comprised of fonts, colors, and interface components that
express the essence of a visual identity for the web.
Figure 4 : PROTOTYPE
III. Website Design Principles (Laja, 2019)
1. Visual Hierarchy
Squeaky wheels get grease, and eye-catching visuals get attention. One of the most important
principles of good web design is visual hierarchy. It is the sequence in which the human eye perceives what
it sees.
Figure 5 : VISUAL HIERARCHY
2. Divine Proportions
The Golden Ratio is represented by the magical number 1.618 (). It is thought that designs that use
proportions defined by the golden ratio are aesthetically pleasing.
Figure 6 : THE GOLDEN RATIO
3. Hick’s Law
According to Hick's Law, each additional choice increases the time required to decide. You've seen
it countless times in restaurants. Menus with a plethora of options make it difficult to decide what to eat
for dinner. Deciding would be much faster if it provided two options. This is similar to the Choice Paradox—
the more options you provide, the easier it is to choose nothing. When it comes to web design, both
principles come into play.
Figure 7 : HICK'S LAW
6. Gestalt Design Laws
Gestalt psychology is a mind-and-brain theory. The human eye sees objects in their entirety before
perceiving their individual parts, according to this principle.
Figure 10 : GESTALT DESIGN LAWS
7. White space and clean design
White space (also known as "negative space") is the area of a web page that is "empty." It refers to
the space between graphics, margins, gutters, columns, lines of type, or visuals.
Figure 11 : WHITE SPACE AND CLEAN DESIGN
8. Occam’s Razor
When presented with several competing hypotheses, Occam's razor encourages you to select the
one that makes the fewest assumptions and thus provides the simplest explanation. In the context of web
design, Occam's Razor contends that the simplest solution is usually the best.
Figure 12 : OCCAM’S RAZOR
IV. Use cases diagram
Figure 13 : USE CASE DIAGRAM
SHOPPING PAGE:
Figure 15 : WIREFRAME OF SHOPPING PAGE
MY BASKET PAGE:
Figure 16 : WIREFRAME OF MY BASKET PAGE
CONTACT PAGE :
Figure 17 : WIREFRAME OF CONTACT PAGE
REGISTER PAGE:
Figure 20 : WIREFRAME OF REGISTER PAGE
VI. Sitemap
Figure 21 : SITE MAP OF MY WEBSITE
B. IMPLEMENTATION (P6 – M4)
I. Source code samples of the website
LANDING PAGE: This is the page where it shows the slogan or the motto of the whole website as
well as the genres showcase so that the customers can get to know what kind of records they can buy.
- Hero Image : This section contains the slogan of the landing page and the picture to show
what kind of products we are selling.
Figure 22 : LANDING PAGE: HERO IMAGE Figure 23 : SOURCE CODE OF LANDING PAGE: HERO IMAGE
This part is basically HTML and CSS, so there will be a title of the website and the button which leads
users to the shopping page
- Genres Showcase : This is the section where we show the genres of music
