Website and design portfolio

Learning Outcomes Assessed

1. Demonstrate knowledge and understanding of current technologies of the Internet and World Wide Web
2. Implement web pages and control the presentation/appearance
3. Demonstrate an understanding of website design principles and accessibility issues

Due: Monday 9th January 2023 3pm

Design Report

Word limit: 1500 words (Flexible)

1. The url of the website
2. An introduction to the purpose of the website, saying why I chose the topic
3. Wireframes of the...
   1. Home Page
   2. Shop Page
   3. Product Page
   4. Checkout Page
   5. Contact Page
4. HTML structure diagram for...
   1. Home Page
   2. Shop Page
   3. Product Page
   4. Checkout Page
   5. Contact Page
5. Structure Chart of the...
   1. Navigation Bar
      1. Include placeholder pages
   2. Linking Pages
6. Documented colour scheme
   1. Comparisons of more than one
7. Font examples
   1. Comparisons of more than one
8. Media examples
   1. Reason for choices of file format
   2. Reason for choices of size
9. Testing documentation
10. How the website design was aligned to web design theory
    1. Include references from books
    2. Include references from websites
    3. Include screenshots of similar websites that present inspiration

Artefact

11. Home Page
    1. Design Page
    2. Implement Page
12. Menu Structure
    1. Design Page
    2. Implement Page
13. Gallery Page
    1. Design Page
    2. Implement Page
14. Product Page
    1. Design Page
    2. Implement Page
15. Checkout Page
    1. Design Page
    2. Implement Page
16. Contact Page
    1. Design Page
    2. Include a contact form
    3. Implement Page
17. The website must be structured using HTML5 semantic elements such as...
    1. Header
    2. Footer
    3. Body
    4. Section
    5. Nav
    6. Article
18. Home page should be...
    1. Attractive
    2. Easy to navigate
    3. Include features such as...
       1. Images
       2. Video
       3. Relevant Links
       4. Colour
       5. Branding
       6. Social Media Icons
    4. Look at other landing pages for inspiration
19. Shopping page must include a minimum of 8 products including...
    1. Brief product descriptions
    2. Price
    3. Add to cart button
       1. Does not need to be functional
       2. Can be left as a site
20. Product page must be well structured and include...
    1. Product Image
    2. Product Variations
    3. Pricing
    4. Product Information
    5. Shipping Information
    6. Product Reviews
21. Checkout page must include form elements for the user's...
    1. Full name
    2. Email address
    3. Shipping address
       1. Include City
       2. Include State as an optional field - "(If Applicable)"
       3. Include Postcode/ZIP Code
    4. Payment Information
       1. Accepted Cards
       2. Name on card
       3. Card number
       4. Expiry Month
       5. Expiry Year
       6. CVV
22. The menu must work for the following links... (Placeholders allowed)
    1. Home Page
    2. Contact Page
    3. Shopping Page
    4. Product Page
23. Website must be designed in line with web design guidelines
    1. Access the literature available in the resources tab on Blackboard and apply aspects of design theory
24. Website must be coded using HTML5 and CSS compliant code
    1. JavaScript not necessary
25. Usage of Third party libraries must be referenced
    1. Must be customised to your own requirements (No copy and pasting)
26. Cross browser testing in the major browsers such as...
    1. Chrome
    2. Firefox
    3. Safari
    4. Edge
    5. Opera
27. All third party items (images, videos, audios, etc) must be...
    1. Attributed within the website
    2. Referenced within the design report
    3. Used only where there are clear permissions
       1. e.g. Creative Commons
28. Code must be annotated
29. Website files must be uploaded to the WBS server and a URL generated
30. URL must be included at the top of the design report
31. Files must also be zipped up and uploaded to blackboard along with the design report
32. Web files must be organised using folder names such as...
    1. html
    2. css
    3. media
    4. design_report
33. Design report should include:
    1. Cover page
    2. Page numbers
    3. Headed sections
    4. References