INTERACTIVE DESIGN | Final Project

__

02 December 2025 - 11 January 2026

Aishath Eshal Shihab (0381863)
Interactive Design | Bachelor of Design (Honours) in Creative Media | 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).

Website Link

Netlify Link

Google Drive Link

Report

Designing the website was the easier part of the final project. I decided on the final design font and colour palette during Project 1: Website Redesign Proposal and Project 2: Website Redesign Prototype. For project 2’s submission I had only designed 3 webpages for the submission as the instructions for the project stated that a minimum of 3 webpages were required. As such, before I started on this final project, I made and designed the prototype of the next two webpages because this final project requires a minimum of five working webpages.

After designing I found that using figma, you could see all the containers with the height, width, padding, position, etc.. in the prototype. This made coding the website a lot easier since I wouldn’t have to guess the elements and sizes. Naturally, I started with the main page. The most difficult part of coding all this was the navigation bar in the header. I think this was because the background was blurred and before I figured out that I had to use the blur element, I was turning down the opacity because that made the background look similar, but this was also turning down the opacity of the texts in the navigation bar. Thankfully, after I figured it out, I could copy and paste the code into the other webpages so I would not have to deal with it again. However, If you see my prototype, the headers other than the one on the main page are shorter but I decided that it does not affect the overall design if I just leave it the same.

The next main issue I faced was positioning all the elements on the webpage. Not a specific part, positioning everything was just difficult and I didn’t really find an answer to the problem, I just messed with the position, width, height, top, bottom, and left until it looked the way I wanted it to. I think this might cause issues with scrolling if you use any other device other than a desktop but I could not find out the actual issue. Most of the elements are positioned absolute and manually positioned with html top, left, bottom, and right.

For the about us page, there is a picture of the team where it looks like it is a browser tab with the image on there. The tab bar is brown, except it is not. There is a separate element I made for the tab, but it refused to stay in place even when I added the position absolute attribute, in the end I added a background colour to the container to see if it looked right and left it like that. I could have just removed the tab bar but I felt like it would look really boring if I took that element out. I also remembered to add hyperlinks to the buttons and link texts so that the cursor would change when hovering on top of it but they do not redirect you to any links.

The page I spent the least time on was the contact page because the form used in it is from typeforms, a website to make forms and collect responses. I found this on Figma and learned how to use it. This is embedded in the webpage and so is the interactive map. The button next to the map redirects the user to the Google Maps page for Zoo Negara. The contacts listed on that page are also real contacts from the actual Zoo Negara website.

All the images used in this website, including the header, all the images of animals, and the profile pictures on the membership page, are taken from pexels.com except for the Zoo Negara logo. The logo I used in the website is the logo that the actual Zoo Negara uses. At first I thought about redesigning the logo but their website explains what every stroke on their logo means and why their logo is the way it is. I felt that this was very meaningful and decided not to change it.
To test the website, after I deployed it on Netlify, I entered the link into Page Speed Insights and it says that on desktop the website has a performance score of 95, an accessibility score of 71 because some of the text does not contrast well enough with the background, a best practices score of 95 because some of the images have an incorrect aspect ratio, and a search engine optimization score of 91. Personally, the text that this site says does not contrast well enough with the background are the “learn more” hyperlink texts on the Tickets webpage and I believe that it is not important information and the text is big enough to read. On mobile the scores are; 85 for performance, 71 for accessibility for the same reason as desktop, 82 for best practices for the same reason as before and the images have lower resolution, and 91 for search engine optimization.

Aishath Eshal Shihab (0381863)

Search This Blog