02.07.2025 - 24.07.2025 ( Week 10 - Week 14)
WANG JINYI / 0374697
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project
Table of Content
Instructions
Final Project
Feedback
Reflection
Links to BlogInteractive Design Project 1| Design Proposal
Interactive Design Project 2 | Website Redesign Prototype
Instructions
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.
Based on the prototype I created in Project 2, I wrote the code using Adobe Dreamweaver. I created five pages: index.html, about.html, events.html, news.html, and contact.html, along with an images folder and a css folder.
Fig 1.1 Final Project folder
At first, writing the html layout was not too difficult. By applying the codes that Mr. Shamsul taught us in class, I was able to see the basic structure of my website take shape quite quickly. Styling with style.css required more time and effort, but at least I managed to achieve the look I had envisioned.
The real challenge began when I had to make the website responsive. Different screen sizes completely changed the layout of my pages.
Large headings were cut off.
Fig 1.2 Heading text cut off in mobile layout
Images became misaligned.
Fig 1.3 Images misaligned in tablet layout
Text shifted out of place or became squeezed.
Fig 1.4 Text squeezed in tablet layout
Sections unexpectedly expanded or overflowed beyond the screen.
Fig 1.5 Issues in mobile layout
Every time I thought I had fixed one problem, another would appear during the next preview. It was a repetitive and time-consuming process that tested my patience.
After multiple rounds of testing, I gradually adjusted:
Heading sizes and positions to prevent cutting.
Fig 1.6 Process in Adobe Dreamweaver
Text alignment and font size for consistency.
Fig 1.7 Refining text alignment and font size
Button design for better visibility and color harmony.
Fig 1.8 Refine button design
I also refined the spacing and layout to ensure visual balance on all screens. Finally, the website could adapt seamlessly to desktop, tablet, and mobile devices, delivering a clean and user-friendly experience regardless of display size.
After completing all the pages and ensuring the layout worked well across devices, I uploaded my project files to Netlify for deployment. The process was straightforward and only took a few minutes.
Fig 1.9 Screenshot of Netlify
Final Website Netlify Link:
Link to Google Drive Final Project main folder:
Feedback
Mr. Shamsul said that my design looks clean and neat, and the image selection was suitable for the theme. He also mentioned that the hover effects and interactions were implemented correctly. He told me to be more careful with text spacing, margins, font size, and alignment. He also asked me to keep the button styles and colors consistent throughout the website.
Reflection
This module has been one of the most challenging yet rewarding experiences for me. Despite the difficulties, I truly enjoyed the design process in Figma—turning my ideas into an actual prototype step by step. From creating layouts to adding hover effects and setting up page navigation, every small interaction felt like a creative accomplishment.
What made it even more intense was the fact that within just 14 weeks, we had to go from zero coding knowledge to building a functional website that balances both aesthetics and usability. Before this, I had only learned the basics of html and css, so the leap felt enormous—almost like teaching a child basic addition and subtraction, then asking them to solve calculus problems, haha!
I started by refining the prototype from Project 2, which gave me a clear structure and saved time in arranging the layout. From there, I worked on the navigation bar first, followed by content and finally the footer. For consistency, I wrote the navigation and footer once and reused them across pages, which was a helpful shortcut.
The most difficult part was ensuring the website worked across different devices. On my laptop, everything looked perfect, but on mobile and tablet screens, the layout would break—text got cut off, and elements were misaligned. Another challenge was managing margins and spacing. Initially, I set fixed margins that looked fine on my laptop, but when tested on smaller screens, everything collapsed. Adjusting margins while keeping elements vertically centered was tricky, but eventually, I figured out that responsive units and breakpoints are the key.
Overall, this project was far from easy, but it pushed me beyond my limits. I learned not just how to build a website but also how to troubleshoot and adapt when I don’t know the answer. Compared to other modules, this one was the toughest and most time-consuming, but also the most transformative. My final website may not be perfect, but I’ve grown so much—from having no idea where to start, to building an actual functioning site. And that’s something I’m really proud of.
Comments
Post a Comment