Interactive Design: Final Project
Chan Zhi-Ren Zenndan / 0369069
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project
Table of Contents
1. Instructions
Document 1.1 Module Information Booklet (12/07/2025).
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).
2. Final Project
As shown in Fig 2.1, this is the Figma prototype I created for Project 2. My goal is to redesign this website using Dreamweaver for coding and deploy it through Netlify.
Fig 2.1 Figma prototype from Project 2 (25/07/2025).
- About (homepage)
- Athletes
- Athletes information (detailed page about selected athlete)
- Schedule
- Contact
Fig 2.2 Screenshot of landing page (25/07/2025).
Fig 2.3 HTML (top) & CSS (bottom) of the homepage (25/07/2025).
Athletes
Fig 2.4 Screenshot of Athletes page (25/07/2025).
Fig 2.5 HTML (top) & CSS (bottom) of Athletes page (25/07/2025).
3. Relevant Submission Links
Netlify — Please click here to view the website.
Google Drive — Please click here to view the work folder.
4. Reflection
Experience
This project started with a solid idea and a working prototype, but I ran into an unexpected setback right before development. The website I originally chose to redesign went offline just as I was about to begin. It was a worrying moment because I no longer had access to the original structure, layout, or images. At that point, the only reference I had left was my own prototype, which did not contain much real content. I had to improvise from there, making up the missing details as I built the site.
I began building the pages using HTML and CSS, applying what we had learned in class. Bootstrap became especially useful after Mr Shamsul introduced it to us, and it helped form the foundation of the layout and responsive behavior. To get started with the structure and early setup, I also used ChatGPT for basic guidance and code reminders. It helped me work more efficiently during the early stages.
I tried to follow the prototype as closely as possible, but not every design element was practical to replicate exactly. Some parts had to be adjusted or reimagined along the way to suit what was actually achievable in the browser. Despite that, I stayed consistent with the general layout, style, and mood. I kept everything organized in one folder, as recommended, which helped streamline the process and avoid broken links. The navbar and footer were reused across all pages with slight tweaks for each page's active state.
Observations
One of the key parts of this process was getting the navigation to work properly. Although I originally forgot about the drag and drop method we learned in class, I had no major issues setting up functional links between the pages. Once I understood the file paths and reused the same structure, it became manageable.
Getting the site to respond well across different screen sizes took more effort. Bootstrap helped with some of the layout shifts, but it still required me to manually adjust things like spacing, stacking order, and font sizes to make sure everything stayed readable and balanced. I used the inspect tool’s responsive view to test how it looked on mobile, tablet, and desktop.
Aligning images and text was more challenging than I expected. Sometimes the layout looked fine in code but did not render properly in the browser. These visual problems were frustrating, especially when working with padding or centering images. I used ChatGPT again during these stages, but only to help troubleshoot alignment and sizing when I got stuck.
Findings
One of the most valuable things I learned was the difference between design intent and practical output. Even though I followed my chosen color palette and general look, I had to find a replacement font because the one I used in my prototype was not available on Google Fonts. I chose something that felt close in tone to keep the branding consistent.
Responsiveness was a major area of learning for me. Media queries were introduced in class, but I needed more practice to apply them effectively. I had to research how to fine tune layouts for smaller screens, especially for form elements and stacked components. It gave me a better understanding of how flexible a design needs to be when moving from a static prototype to a working website.
I also realized the importance of being adaptable. Since I could not rely on the original website anymore, I had to come up with my own decisions about content, layout, and interactions. This pushed me to be more confident in making creative choices rather than copying something directly. The project became more than just a redesign. It turned into a reinterpretation.
Deployment
Once all five pages were built, including the homepage, athletes page, athlete detail page, schedule, and contact page, I tested each one to make sure the navigation worked, the layout was consistent, and the content displayed correctly. I used the inspect tool again to simulate different devices and screen sizes and made adjustments where needed.
For deployment, I used Netlify as instructed by Mr Shamsul. Uploading the site was straightforward, and the live version worked without major issues. All internal links navigated correctly between pages, and the contact form was functional for users to type and submit, even though it does not send data anywhere. Overall, the deployed site met the assignment expectations and presented a complete and working redesign.
Comments
Post a Comment