Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Theory, practice exercises of web design subject
Typology: Assignments
1 / 31
This page cannot be seen from the preview
Don't miss anything!
Student: NGUYEN TAN TRUONG Class: BD-AF- 1901 - 01 Student ID: BDA Supervisor: TRINH THI NGOC LINH Danang, June 2020
Qualification BTEC Levels 4 and 5 Higher Nationals in Computing Unit number and title Unit 9: website design & development Assignment due Assignment submitted
Learnerās name
Assessor name
Learner declaration: I certify that the work submitted for this assignment is my own and research sources are fully acknowledged. Learner signature Date Grading grid P5 P6 P7 M 4 M5 D 2 D 3
Summative feedback: Assessorās signature Date
In the process of completing my report, I am sincerely grateful to the people who helped me. First of all, I would like to thank Ms. Linh who is a lecturer at FPT International College. She gave me clear and detailed instructions for completing the assigned tasks. Besides, I also want to thank my classmates for helping me and giving me appropriate comments so I can accomplish the task better. Thanks everyone. Danang, June 2020 Who perform Nguyen Tan Truong
1 LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website
1.1.1 Web design principles Relevance to the purpose of the website: The website must be specific and clearly provide useful information for customers to use, such as your website for the purpose of selling products or sharing experiences. individual .... Any visitor who accesses the site can understand what the site is about just by looking at it. Avoid the case of building websites with unclear purposes that do not suit the needs of users Build clear site navigation: Keep visitors interested when they visit the site. Intuitive, convenient and clear website design to guide visitors conveniently. The website must have an easy-to-understand structure whereby important categories are presented in the main navigation and subcategories are presented in drop-down menus. The drop down menu must be clearly separated. This type of navigation makes it easier for visitors to understand the site. To ensure viewers can immediately find what they are looking for. Web page load time: up to 3 seconds is the standard that a website needs to start appearing on page elements. Users do not have the patience to wait for more than 10 seconds per site. If the site loads too slowly, it will eventually lose potential customers. There is a need to limit the overuse of images, videos and audio. Or optimizing the size and image size to the minimum that users can still see the information clearly. Optimizing web page loading speed not only helps the user but also the system. server is softer, saves resources and bandwidth, increases the ability to provide traffic at the same time more. Conventional website convention: There is a main navigation section at the top (or right) of a page. Logo in the upper left corner (or center) of a page. It is clickable so that it always leads the viewer back to the homepage. There are paths that change color / appearance when you hover over them. If you abandon all design conventions for the purpose of being unique, this can be a mistake that confuses people. Take advantage of the fact to be able to understand what kind of website experience users are already familiar with. This information can be used to make your site easier for users to access. Compatible with all devices: The website must be designed to be suitable for use on laptops and phones or must be compatible with web browsers. Factors of screen resolution corresponding to the browser also affect the website, maybe even damage the website layout. Therefore, it is important to consider that a well designed website needs to be compatible with many different screen resolutions.
1.1.2 Web design standards Logos: Almost every website has a logo placed in the upper left corner of the homepage. This is what sets the standard. Contact button: Nearly 50% of websites have a contact button in the upper right corner. Going through these statistics, we can conclude that despite this fact as well, this is not considered part of the standard design. Main navigation at the top: Approximately 10% of the websites do not have top-level navigation. The remaining 90% follows a top-level navigation approach that makes it a design standard. On The Fold Message: About 80% of marketing websites keep their intended information on the fold. It sets a standard that a good design should focus on using to convey the intended message. Priority to call to action: Nearly 80% of websites prioritize their calls to action by displaying them on the front page of the website, which can also be considered a standard in the design of a marketing website.. Search options: About 50% of all websites have a search bar in their title. However, it cannot be considered as a standard because it does not need a search bar unless it owns great content on its site. Registration button: About 20% of websites have a subscribe button on the footer. But it is not a standard. Common content for the footer is the āterms and conditions, copyright. Social media icons: This is part of the footer. However, there is no standard for social media icons. Good approach includes small social media icons and enlarging its size Responsive design: About 70% of websites follow responsive and mobile- friendly design methods. It is not part of the standard design The bottom line: both the standards described above in general, a common practice being followed by the majority of designers. It only ensures that your website follows a standard, but to take website design development to new heights, it is necessary to incorporate new ideas and techniques.
Figure 2. Web design standards 1.1.3 Web design guidelines. Concept: It means a set of pre-designed elements, graphics and rules that designers or developers should follow to ensure that individual web page sections will be consistent and will create an experience. mount at the end. Therefore, when many designers are working on a large website or web application it is possible to ensure that they are not interpreting too much and not changing or adjusting styles based on personal preferences. Help developers easily reuse these elements. Elements guide web design Brand research: First, brand research is needed to understand what it stands for. Identify the story behind the brand, observe the team and find the vision, mission and value for the company. If you're not a designer who can't code, just open Photoshop and give your document a title and a short description of what the document is and what it is for. If you can write code, it is better to create an html document with pre-coded assets so that they can easily be reused.
Figure 3. web design guidelines
1.2.1 Design document for online shopping website Administrators
1.2.3 Design the theme Homepage interface Figure 5. Homepage interface
Product portfolio Figure 6. Product portfolio
Figure 9. Admin table in the database Figure 10. Table indexes admin Figure 11. Brands table in the database Figure 12. Table indexes brands
Figure 13. Cart table in the database Figure 14. Table indexes cart Figure 15. Categories table in the database Figure 16. Orders table in the database
