Interactive Design Final Project
Interactive Design Final Project
Zhang WanRu /0368214
Interactive Design / Bachelor of Design in Creative Media / Taylors University
Final Project
Instructions
Instructions
Final Task 3
Require：
Objective: The objective of this assignment is to bring your website
redesign to life by developing a fully functional website based
on
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
In my project 1, I chose Lazada, a shopping website we often
use. I have some ideas about the use of this website.
This is the slides of my project1.
https://drive.google.com/file/d/1mWrpVTr56Jj2Ffl8av7_eE_z2gPu-rwO/view?usp=sharing
In project 2, I made a prototype based on the slides of project 1 using the
Figma website, which is very easy to use.
Website Redesign Prototype link:
I started to create my design using Adobe Dreamweaver App, displaying my web page in HTML, and using my Project 2 UI design to display the UX.
Following the steps in Mr Sam's original class, I started by creating a folder and putting all the images and HTML in one folder.
Fig 1.1 Slide
Fig 1.2 process
Final Website Netlify Link:https://ladaza.netlify.app/?authuser=0
Brief report：
As a student, this is the first time I have completed a complete website development project independently. This project not only gave me a comprehensive understanding of the basic process of web development, but also gave me the opportunity to practice the knowledge learned in class, transform theory into practice, and apply Mr. Sha's classroom connections to this project. By developing this webpage, I have improved my technical ability, problem-solving ability, and independent thinking ability, and deeply learned the role of each code.
Development process
Lazada is the shopping platform I use here. After using it, I decided to design a shopping website to simulate a common e-commerce platform in real life. This website includes multiple modules: login page, product search function, shopping cart page, and purchase settlement function. My goal is to make this website not only practical, but also provide a simple and intuitive user interface. It is more conducive to the use of every visually impaired person, including color blind users. According to my project 2 UI design, go to construct. I used HTML to define the content structure of the page, CSS to adjust the layout and style of the page, and JavaScript to implement interactive functions. First, I created the HOME and login interfaces. The homepage is designed with a search bar and a navigation menu, while the login page includes an input box, a password display switch button, and links for "Forgot password" and "Register new account". These basic pages laid the foundation for the development of subsequent functional modules. Next, I developed the shopping cart page, which is the core part of the entire project. Users can view product information, adjust product quantity, and view prices in real time in the shopping cart.
Challenges encountered
During the development of this webpage, I encountered many challenges, which made me deeply realize the difficulty of completing a project independently, and also let me gain valuable experience in the process of overcoming difficulties. First, in terms of layout adjustment, I found that every change in the value will have a huge impact on the overall effect of the page, and the slightest carelessness will cause the page layout to be offset or disordered. As a beginner, I initially felt at a loss as to how to choose the right value. To solve this problem, I consulted a lot of CSS layout documents and tutorials, learned how to use tools such as Flexbox and Grid layout, and gradually mastered how to achieve responsive design through media queries. Although I felt very confused when debugging at the beginning, with continuous attempts, I was gradually able to optimize the page structure in an orderly manner. Secondly, when implementing the page jump function, I encountered the problem of path setting. At first, I was not familiar with the absolute path and relative path of the file, which caused the page jump to fail or link errors. In order to fix these problems, I re-planned the folder structure and carefully adjusted the hyperlink path of each page, and finally achieved smooth jumps between pages. In addition, managing the image format and size in the webpage also made me feel very difficult. Some images took up too much space on the page because they were too large, and some looked strange because of their uncoordinated proportions. I solved these problems by using the CSS `max-width`, `max-height`, and `object-fit` properties, and used online tools to compress the images to optimize loading speed. These attempts made me more aware of the importance of image optimization. In addition, when debugging, I found that the position of elements often changed when the page was loaded or refreshed, causing the entire page to look messy. To solve this problem, I learned the rendering mechanism of HTML and CSS, and greatly improved my development efficiency by fixing layout rules and using browser developer tools for real-time debugging. However, the most difficult moment was when I tried many methods and still couldn't solve the problem. I felt collapsed and wanted to give up. After calming down, I regained my confidence, continued to consult materials, watch tutorials, and seek help from friends. They not only encouraged me, but also personally demonstrated to me how to implement certain functions, which allowed me to gradually find solutions to the problem. I hope that web pages can present consistent and good effects on different devices (such as computers and mobile phones). However, due to the difference in screen size, I need to constantly adjust the CSS style to ensure that the layout and content will not appear messy due to the change in screen size. By using media queries and flexible CSS layout techniques, I finally achieved compatibility of web pages on multiple devices. These experiences made me realize that web development is not only the application of technology, but also a test of patience and perseverance. Through this challenge, I learned how to face complex problems calmly and solve them step by step through analysis and decomposition. These experiences have benefited me a lot and laid a solid foundation for future learning and project development.
How to overcome challenges
During the development process, it is inevitable to encounter problems, but I have successfully overcome these challenges through some effective methods. First, I made full use of online learning resources, such as W3Schools. When I encountered problems, I would first consult relevant materials, learn the concepts, and then debug and experiment with the code, which allowed me to gradually solve many technical problems. Secondly, I adopted a modular development approach, splitting the project into small functional modules and implementing them one by one, such as adjusting the photo format and frame size, and ensuring that each part is running properly before integrating them. This approach allows me to focus on specific problems while improving the clarity and maintainability of the code. In addition, I use the browser's developer tools to view page layout and style issues in real time, quickly locate errors and optimize the code. When faced with more complex problems, I will also record error messages, search for solutions, and seek help from friends or classmates. Their suggestions help me solve problems from a new perspective. Through these efforts, I not only successfully completed the project, but also improved my ability to solve problems independently, while accumulating valuable experience.Finally, I successfully completed the development of this webpage and implemented all core functions. The entire website has a simple interface and practical functions, which can simulate the real shopping process.
Through this independent web development project, I deeply experienced the challenges and fun contained in the whole process from design to implementation. Although I encountered many difficulties in the development process, such as layout adjustment, jump page implementation, and photo format adaptation, I gradually overcame these challenges by consulting materials, modular development, repeated debugging, and asking others for advice. Every time I successfully solve a problem, I feel extremely satisfied, and it also makes me realize the importance of continuous learning and trying new technologies. This development experience not only improves my technical ability, but also enhances my problem-solving ability and independent work ability. I also realize that optimizing user experience and improving web performance are the key points that need to be paid attention to in the future, such as trying to use modern front-end frameworks or adding more practical function modules. As a student, this project has allowed me to accumulate valuable experience and lay a solid foundation for my future career development. I will also take this as a starting point to continue to challenge myself and make continuous progress in the field of technology.
Reflection
Through this independent web development project, I deeply experienced the challenges and fun contained in the whole process from design to implementation. Although I encountered many difficulties in the development process, such as layout adjustment, jump page implementation, and photo format adaptation, I gradually overcame these challenges by consulting materials, modular development, repeated debugging, and asking others for advice. Every time I successfully solve a problem, I feel extremely satisfied, and it also makes me realize the importance of continuous learning and trying new technologies. This development experience not only improves my technical ability, but also enhances my problem-solving ability and independent work ability. I also realize that optimizing user experience and improving web performance are the key points that need to be paid attention to in the future, such as trying to use modern front-end frameworks or adding more practical function modules. As a student, this project has allowed me to accumulate valuable experience and lay a solid foundation for my future career development. I will also take this as a starting point to continue to challenge myself and make continuous progress in the field of technology. Here, I would like to thank Mr. Shamsul for his patient guidance and support during this semester. I have felt Mr. Shamsul's careful teaching and experience sharing during this semester.
Comments
Post a Comment