ASSIGNMENT 2 WEBSITE DESIGN AND DEVELOPMENT, Thesis of Web Design and Development

Download ASSIGNMENT 2 WEBSITE DESIGN AND DEVELOPMENT and more Thesis Web Design and Development in PDF only on Docsity!

ASSIGNMENT 2

WEBSITE DESIGN AND

DEVELOPMENT

Student: Le Quoc Huy

ID: GCS

Class: GCS1003a

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 Student ID Class Assessor name 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

Assignment Brief 2 (RQF)

Higher National Certificate/Diploma in Computing Student Name/ID Number: Unit Number and Title: Unit 10: Website Design & Development Academic Year: 2021 – 2022 Unit Assessor: Hoang Nhu Vinh Assignment Title: Website Design and Implementation Issue Date: 01 April 2021 Submission Date: Internal Verifier Name: Date: Submission Format:

Format:

1. A report document including below sections o Section 1: A review of appreciate web design principles, standards and guidelines. o Section 2: Design document for online shopping website. o Section 3: Implementation of website design. o Section 4: Test plan and test evaluation.
2. A compressed file that encapsulates all source code and particular necessary resources including files of images, style sheets, java script and other files to support to install multipage website such as sql script and installation guide. Submission

• Students are compulsory to submit the assignment in due date and in a way requested by the Tutor.
• The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/.
• Remember to convert the word file into PDF file before the submission on CMS. Note:
• The individual Assignment must be your own work, and not copied by or from another student.
• If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style.
• Make sure that you understand and follow the guidelines to avoid plagiarism. Failure to comply this requirement will result in a failed assignment. Unit Learning Outcomes: LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website. LO4 Create and use a Test Plan to review the performance and design of a multipage website. Assignment Brief and Guidance:

Contents

• Introduction...................................................................................................................................................................
• PART I. WEB DESIGN PRINCIPLES, STANDARDS AND GUIDELINES
  • 1. Website design principles
  • 2. Website standards and guidelines
• PART II. IDEAS & DESIGN
  • 1. Client & User requirements
    • 1.1. User requirements
    • 1.2. User case diagrams
    • 1.3. Data Flow Diagrams
    • 1.4. Entity Relationship Diagram
  • 2. Website wireframes
    • 2.1. Index wireframes
    • 2.2. Login wireframes
    • 2.3. List wireframes
    • 2.4. Product Detail wireframes
    • 2.5. Shopping cart wireframes
• PART III. WEBSITE IMPLEMENTATION
  • 1. Tools and techniques
    • 1.1. Draw.io
    • 1.2. Pencil
    • 1.3. Balsamiq
    • 1.4. Adobe Photoshop
    • 1.5. Visual Studio Code
    • 1.6. Chromium & firefox
    • 1.7. LAMP stack
    • 1.8. Bootstrap framework
    • 1.9. Font Awesome and icons toolkit
    • 1.10. Fabia website template
    • 2. Development processes
    • 2.1. Index webpage
    • 2.2. Product Detail page
    • 2.3. Login page
    • 2.4. List page
    • 2.5. Shopping Cart page
    • 2.6. Delivery page
    • 2.7. Compare page
    • 2.8. Admin page
    • 2.8.1. Admin page login................................................................................................................................
    • 2.8.2. Admin page index
• PART IV. TESTING
• PART V. WEBSITE EVALUATION
  • 1. Quality Assurance processes
  • 2. Comparison between created website and designed website wireframes
  • 3. Website evaluation, technical challenges and improvement recommendations
    • 3.1. Website evaluation
    • 3.2. Technical challenges
    • 3.3. Improvement recommendations
• CONCLUSION
• References...................................................................................................................................................................

PART I. WEB DESIGN PRINCIPLES, STANDARDS AND

GUIDELINES

1. Website design principles

Any website's or online business's success is entirely dependent on its website design. The majority of your potential consumers or visitors always browse your website before going to your actual store. As a result, you must ensure that the design of your website is flawless and appropriate for your business needs. Contrary to popular belief, web design is more important for leads or conversions. In actuality, website design refers more to how it functions than to how it appears or feels. To create leads or conversions, even a straightforward website and well-organized design are sufficient. An experienced individual who is familiar with the designing processes and web design principles is also necessary for good website design. The design guidelines we'll go over will assist you in making a flawless website that will increase leads or conversions for your company. (Xenex, undated) Simplicity is best Overdesigning is ineffective. Adding too many things to your website could divert visitors. visitors who are away from your site's primary objective. In order to provide efficient, hygienic, andupdated layouts that will attract users to your website and encourage them to explore additional pagesof your website's pages. Essentially, this will assist you in producing leads or conversions for your consistently and successfully with a website. Remember to keep your design straightforward and user-friendly so that.Your website's users may effortlessly navigate through and visit different pages. Consistency

Your business depends greatly on the consistency of your website design. Try to concentrate on the design of your website and establish consistency between it and the other pages of your website. It goes without saying that your website's font style, design, size, subheadings, headings, and button styles all need to be consistent. Complete all of these details in advance, including the information for your website. Typography & Readability No matter how attractive your website may seem, the text still reigns supreme as the content of the website gives users the information they are looking for. Since this information is always taken into account by search engine crawlers, SEO activities now include it. Along with your website's content, sensitive SEO aspects like keywords, meta descriptions, and titles should all be kept readable for your visitors. When developing your website, take into account the readability of the fonts used for the main material, headings, and subheadings. Color Selection & Images If your website's color scheme is flawless, it will assist draw visitors; nevertheless, if it is not, people will be quickly diverted from it. To give your website the desired design, you must choose at least three to four color combinations. The same logic applies to the photos; you must choose images that complement the content and color scheme on each page. Fast/East Loading Websites that take too long to load are disliked by everyone. In order to maximize the speed at which your website loads, you must ensure that the pictures, CSS, JS, and other On-Page components are optimized. Additionally, HTTPS can enable you to do this. Communication Visitors primarily use the website to obtain information. Should your website be. If you interact with your visitors and give them all the information they need, they will stay on your website longer. For your internet business, this will assist you produce more leads or conversions. As a result, always strive to correctly arrange all material, including links and information presented in the form of bullet points, headings, and subheadings.

The contact link or button may be found in the top right corner of 44% of websites. Despite being quite popular and regarded as best practices, this location cannot be regarded as standard. Main navigation across the top Horizontal top-level navigation is now considered to be a standard in web design because 88% of the websites had their main navigation in the header at the top of every page. Home page slideshow A slideshow, commonly referred to as a carousel, is present on the home pages of 32% of the websites. Value proposition high up on the home page 80% of marketing websites prominently display their stated value proposition on the home page. Therefore, the majority of websites "above the fold" communicate their value to users. The value proposition for the remainder was completely unclear. The lack of a uniform pixel height for browsers is something that any web designer will admit. There is no fold as a result. Of course, some design components are prominently displayed and generally accessible to most visitors without the need to scroll. Call to Action high up on the home page On 78% of the websites, the calls to action were clearly visible. It is undoubtedly customary that the percentage went below our level for standard. Search feature in the header On 54% of websites, the header contains a search box. A search capability that is present "globally" on every page, whether as a link, icon, or search box, is absent from almost half of all marketing websites. Signup box in the footer In the footer of 24% of websites, users can register and subscribe to email updates. Therefore, while not a rule or a standard, this is a frequent location to collect email addresses. Social media icons in the footer In the footer of 72% of the webpages, there are icons for social media websites. These are now practically considered standard design elements. Responsive design

Using responsive web design, 68% of websites are accessible on mobile devices. This provides users with a fantastic experience whether they are using a phone, tablet, or laptop. Figure 2: Web Design Standards Additionally, fully designed processes will adhere to the WCAG 2.0 Guideline's requirements for the organization of Web content:  Perceivable: Users must be able to understand the information and User Interface (UI) components.  Operable: Users must be able to operate UI components.  Understandable: Users must be able to understand the information provided about the UI and how it works.  Robust: Content needs to be reliable enough to be understood by a wide range of user agents, such as assistive devices. n.d. (Orbitmedia)

1.2. User case diagrams

Figure 3: User case diagrams

1.3. Data Flow Diagrams

A data-flow diagram (DFD) is a visual representation of how data flows through a system or process (usually an information system) The DFD additionally gives details about each entity's inputs and outputs as well as the process itself. A data-flow diagram lacks loops, decision rules, and control flows. Using a flowchart, certain operations based on the data can be depicted. in Wikipedia A level 0 data flow diagram (DFD), commonly referred to as a context diagram, highlights how a data system interacts with other entities and depicts it as a whole. This DFD level 0 illustration demonstrates how such a system may operate in a normal retail setting. (N.D., Lucidchart)

Figure 4: Data flow diagrams Level 0 Compared to a level 0 data flow diagram (DFD), a level 1 DFD is more thorough, but not as thorough as a level 2 DFD. It separates the primary operations into smaller, more granular processes that may then be examined and improved. (N.D., Lucidchart)

Figure 6 : Data flow diagram level 2

1.4. Entity Relationship Diagram

Figure: Entity Relationship diagram

2. Website wireframes

2.1. Index wireframes

Figure 7 : index wireframe 1