Download Website Design & Development(1633) asm2 and more Thesis Web Design and Development 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 Trần Đăng Khoa Student ID GBD Class GCD1104 Assessor name Phyo Min Tun 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 D
❒ Summative^ Feedback:^ ❒ Resubmission^ Feedback:
Grade: Assessor Signature: Date: Signature & Date:
- A. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE(P5)...............................................................
- I. User’s Requirements.....................................................................................................................................
- II. Review Accessibility Standards and Guidelines.................................................................................
- III. Website Design Principles (Laja, 2019)...............................................................................................
- Visual Hierarchy.............................................................................................................................................................................................................
- Divine Proportions......................................................................................................................................................................................................
- Hick’s Law.......................................................................................................................................................................................................................
- Fitt’s Law........................................................................................................................................................................................................................
- Rule of Thirds................................................................................................................................................................................................................
- Gestalt Design Laws...................................................................................................................................................................................................
- White space and clean design................................................................................................................................................................................
- Occam’s Razor...............................................................................................................................................................................................................
- IV. Use cases diagram.....................................................................................................................................
- V. Wireframes...................................................................................................................................................
- VI. Sitemap.........................................................................................................................................................
- B. IMPLEMENTATION..........................................................................................................................................
- I. Screenshots of webpages kpoand source code..................................................................................
- Home page.....................................................................................................................................................................................................................
- II. Compare the website to the original design and draw conclusions...........................................
- C. TEST....................................................................................................................................................................
- I. Test cases........................................................................................................................................................
- II. Actual Test Result.......................................................................................................................................
- D. Reference..........................................................................................................................................................
- Figure 1: Sketch Ideas Table of Fingures
- Figure 2: Wireframe for website design
- Figure 3: Style tiles _
- Figure 4: Prototyle
- Figure 5: Víual herarchy
- Figure 6: The golden ratio
- Figure 7: Hick's Law
- Figure 8: Fitts's Law
- Figure 9: Rule of thirds
- Figure 10: Gestal 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 contact page
- Figure 16: Wireframe of Policies page
- Figure 17: Wireframe of About Us page
- Figure 18: Wireframe of Login page
- Figure 19: Wireframe of Register page
- Figure 20: Site Map of my Website
- Figure 21: Home page of my website
- Figure 22: Homepage header code __
- Figure 23: Homepage CSS code (1)
- Figure 24: Homepage CSS code (2)
- Figure 25: Homepage CSS code (3)
- Figure 26: Homepage CSS code (4)
- Figure 27: Homepage CSS code (5)
- Figure 28: Homepage CSS code (6)
- Figure 29: Categories of my website
- Figure 30: Categories header code _
- Figure 31: Find products of my website
- Figure 32: Find products header code
- Figure 33: Product detail page
- Figure 34: Code product detail page
- Figure 35: Login page
- Figure 36: Code login page
- Figure 37: Profile Register page
- Figure 38: Code profile Register page
- Figure 39: Register page
- Figure 40: Code Register page (1)
- Figure 41:Code Register page(2)
- Figure 42:Code Register page(3)
- Figure 43: Polices page
- Figure 44: Code Polices page
- Figure 45: About us page
- Figure 46: Code About us
- Figure 47: Contact us page
- Figure 48: Code contact us (1)
- Figure 49: Code Conatct us (2)
- Figure 50: My cart page
- Figure 51: My cart page code(1)
- Figure 52: My cart page code (2)
- Figure 53: My cart page code (3)
- Figure 54: Entire site
- Figure 55: Wireframe of Homepage _
- Figure 56: Actual result of my website
- Figure 57: Table test cases
- Figure 58: Screenshot No.1
- Figure 59: Screenshot No.2
- Figure 60: Screenshot No.3
- Figure 61: Screenshot No.4
- Figure 62: Screenshot No.6
Figure 63: Screenshot No.7 45 Figure 64: Screenshot No.8 45 Figure 65: Screenshot No.9 46 Figure 66: Screenshot No.10 46 A. DESIGN DOCUMENT FOR THE E-COMMERCE WEBSITE(P5)
I. User’s Requirements
Situation: A luxury brand women's handbag store wishes to open a website to support the sale of women's handbags as well as introduce handbag fashion and brand to everyone. On the website there will be five pages: The homepage, The login or registration area, Policies, About us and finally Contact us. The website was built on the needs of the online platform and the explosion of technology as everyone has their own website to fulfill their needs. User story: As a customer, I'd like to see everything accessible on the website so that I can easily decide what to buy. As a customer, I'd like to create an account on the site so that I can save my personal information and make transactions more quickly. As a customer, I want to be able to manage my account information easily by viewing and amending the account information I've entered on the website; As a customer, I want the website to have a design that is simple, modern, and appealing to improve my shopping experience. As a customer, I'd like to be able to view the items page to see what is currently available in the store. As a customer, I want to be able to add products from product pages to my shopping cart so that I may purchase the items I've previously added
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.
- Compile your inspiration 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.
- Know your competitors 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 3: Style tiles Consider a style tile to be a half-step toward complete design. It might feel dangerous as the project owner to request a restricted number of design proposals for your new website. What if none of them is correct? When it comes to the design process, style tiles decrease the sensation of danger. They are, in essence, mood boards for digital settings. Style tiles contribute to the formation of a shared visual language between the designer and the client stakeholders. Consider them to be the paint chips and fabric samples that an interior designer would use before to constructing an actual room. PROTOTYPE (Anon., 2017) A website prototype is any mock-up or demo of how a website will seem when it goes live. It can range from a pencil drawing to an interactive HTML prototype. However, when people talk about a prototype, they usually mean an interactive prototype of some kind that allows users to browse from page to page and use features like drop-down menus.
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
4. Fitt’s Law
Fitt's law states that the time required to move to a target area (e.g., click a button) is a function of the target's distance and size. In other words, the larger and closer an object is, the easier it is to use. Figure 8: Fitts's Law
5. Rule of Thirds
The rule of thirds dictates that an image be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines. Important compositional elements should be placed along or at the intersections of these lines. Figure 9: Rule of thirds
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 V. Wireframes LANDING PAGE :
CONTACT PAGE
Figure 14: Wireframe of landing page
LOGIN PAGE :
Figure 17: Wireframe of About Us page REGISTER PAGE: Figure 18: Wireframe of Login page
Figure 19: Wireframe of Register page
Figure 21: Home page of my website Figure 22: Homepage header code This is the code to display each element of the Main Menu including: Home Page, My Account, Policies, About Us, Contact Us.
Figure 23: Homepage CSS code (1)
