Interactive Design - Final Project
24/6/2025 - 23/7/2025 / Week 9 - Week 14
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Final Project
TABLE OF CONTENTS
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1ZboslTwWd0VcBq-AuI1L_iQSMfel1WbL/preview" width="640" height="480" allow="autoplay"></iframe>
LECTURES
FINAL PROJECT
Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES) 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.
Chosen Website:Gatesnfences
 |
| Fig. 1.1.1, Designing in Figma,week 9 (2025/06/19) |
Before starting the final task, I designed three pages for the final web page. After determining that the navigation bar and footer can be reused, each page is regular.
 |
| Fig. 1.1.2, Local deployment, week 11 (2025/07/03) |
 |
| Fig. 1.1.3, homepage process, week 11 (2025/07/03) |
 |
| Fig. 1.1.4, Product Interface 1, week 11 (2025/07/04) |
 |
| Fig. 1.1.5, Contact Us page, week 11 (2025/07/04) |
After making these three pages that were close to the design drawings, I roughly understood the overall design ideas, so the next step was mostly the creation of rules.
 |
| Fig. 1.2.1, Product Interface 2, week 11 (2025/07/06) |
 |
| Fig. 1.2.2, Product Interface 3, week 11 (2025/07/06) |
 |
| Fig. 1.2.3, About us, week 11 (2025/07/06) |
After creating the important pages on the navigation bar, I started to make some statements.
 |
| Fig. 1.3.1, Cookie Policy, Week 12 (2025/07/11) |
 |
| Fig. 1.3.2, Privacy Policy, Week 12 (2025/07/11) |
 |
| Fig. 1.3.3, Service Areas, Week 12 (2025/07/12) |
 |
| Fig. 1.3.4, Terms & Conditions, Week 12 (2025/07/12) |
 |
| Fig. 1.3.5, Testimonials, Week 13 (2025/07/18) |
Final Outcome
Each step before creating this complete website is indispensable. From understanding the basic structure of the website, finding excellent website examples, to trying to modify the problematic website by myself, drawing sketches and practicing, it is linked together. It is these steps that make me more confident to complete this task.
The beginning is always the most difficult. Fortunately, the professor took us to practice a lot in class. When I encountered something I didn’t understand, I would look up the previous cases. When making the homepage, the navigation bar bothered me the most, because its design will run through the whole process, so I spent a lot of energy to improve and study the settings of the navigation bar. In the initial version, I set its font color to change as the mouse hovers, but more colors will make the interface confusing, so I changed it to underline. And, an interesting point is that the terms and conditions are usually placed at the end of the page, but if you find them from the end of the page and enter their page, the name of the page will also appear in the navigation bar, so it is convenient for users to find their location.
Another problem that bothers me is that because the CSS styles are universal, it may be possible to modify the CSS code on different pages to affect other pages, which reminds me that I must be careful. Because I encountered the problem of changing the format, the positions of the four pictures on the homepage were completely changed, from side by side to top and bottom, and because of the adaptive code, they were pulled into a very exaggerated shape. In order to prevent this from happening, I was very careful every time I deleted them. What frustrates me is that my code is piling up, but I am afraid that it will not work if I delete it.
Finally, when making different layouts, I need to try many possibilities. This is not a difficult one, because the most boring coding stage has passed. Now all I need to do is to improve all my codes, check whether the pictures are loaded smoothly, whether there are any problems that cannot jump, etc.
In short, this is a challenging and fun activity. Because after making this complete webpage, I feel very accomplished. I can now understand a little bit of the field that I have never touched before, and I have lived up to my efforts in class and my expectations.
REFLECTION
Experiences:
I needed to create a smooth, complete, and mostly functional website, starting from a design sketch, deploying it through coding, and making it work.
Observations:
I can understand why people say that programmers tend to go bald. Because if the code is wrong, it is wrong. You need to start from scratch for any small problem, because it may just be a letter you typed wrong. This makes me realize that I am not careful and patient enough. Every time I can't find the error, I will let it go and look for it again after a while.
Findings:
The biggest gain is that I am no longer a code novice. This is a brand new field, brand new knowledge, and nothing makes me more excited than learning about a new field. I like this class very much because if I don’t understand something, the professor will answer it with practical actions and show me the code directly. I am very happy to learn, no doubt about it.
Comments
Post a Comment