Name: Liong Xenyi (0383125)
Module: Interactive Design GCD60904
Date: 30/10/2025 - 11/01/2025 (Week 7 - Week 14)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Instructions
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.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or 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, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).
Submission
Final Project Website:
Google Drive Files:
Report
Development Process
When I first started doing this project, I was really lost as I didn't know how to program a whole website with different pages, as I only did small or experimental ones in HTML. It was very overwhelming at first, as I couldn't even start. But after some quick pep talks and energy drinks, I started simple with creating different files for the 5 pages I had based on my proposal plus one for CSS. I added the basic HTML code: the background-color, adding in fonts from Google Fonts, separating the main parts for header, body and footer, and such. Later on, I downloaded some images from the proposal that I wanted to use.
Next, I added the navigation bar first, as I need it to be in all pages. I used Bootstrap's tools from the nav-bar and added my own CSS. Some parts were different compared to my proposal, but I continued to try my best to make it work on HTML. As I'm still pretty new to making websites and all that, I had to constantly change one part and refresh the page to see whether it worked the way I want it to or not. After it worked and looked the way I wanted it to, I copied the entire code and pasted in unto the other pages, which would make it look consistent across the website.
Following that, I programmed the pages in a weird order (it was from easy to hard to easy again): Home page, Login page, About page, Series page and finally Genre page. Because I already did some parts in home and about pages, I could use the same code in the series and genre page (like the posters code or making the text appear in the center). I honestly think the Navigation bar, Series page, and somehow the Login page (the forms), took the most time and were the harder parts for me, as some codes were really confusing me. Along the way, I made some changes to certain parts to make it seem ok and decent. I also removed some parts like the gray block in the About or Login page, as the code was confusing me and causing problems. However, I managed to finish making the website. Yay :D
Challenges Faced
Oh boy, the challenges. Like previously said, I wasn't well versed in the HTML coding business (or coding in general), so this project was like a brick in the wall. I'm very forgetful, so even simple codes were hard for me to remember or understand. Some codes included JavaScript (which I have not learned a single thing about), so I needed extra help by searching the internet for answers and even asking ChatGPT for help. I never use A.I in general, unless in dire situations (like research or coding), so I never even thought about using it until I really got stuck and lost because I had no idea what to do. And actually, when not used to make "art" or whatever, it helped me to understand the code or tell me where I went wrong.
The coding of HTML was a pain, yes, but I think honestly, I had a worse case with CSS. Because it is all in one file, sometimes it gets so confusing with too much information, which again overwhelmed me (also partially my fault because I don't label certain things because I forgot to). Sometimes I added unnecessary code or some that I didn't fully understand, which causes my design to fly all over the place. Sometimes I'd get so frustrated, I'm forced to leave my chair and do something else instead. This was a journey, as I tried to do it in one go because if I do it bit by bit, I'd lose my rhythm and forgot certain codes or names, but I still needed to take many breaks as it was too much for me. To back up my previous statement in the developmental process section, I removed some parts because I couldn't get the code right, and it would take me much longer to figure out. I couldn't include everything inside that I wanted to beforehand, but I think I tried my best with this.
Final Step
I managed to not give up and continued on. Even though I'm a perfectionist, I tried to ignore certain mistakes or things I want to add on, so that I can finally work through this and finish it. Even though it is not the best, I would say it is pretty cool that this is my first website that I have programmed before, with pages and certain functions I didn't know how to add beforehand. Because of the repetition of some coding and styling, I realised that I needed to just keep on practising coding to understand it better, while adding more variety to my knowledge and skill.
Comments
Post a Comment