Table of Contents
interactive design final project website redesign
Instructions
Module Information Booklet
Figure 1.1 Module Information Booklet. (Week 1 22/04/25)
Lectures
Class Activity
Week 10 (24/06/25)
Figure 2.1 Week 10 Class Activity. (Week 10 21/04/25)
Class Activity
- Manage site > Add folder > Add files in folder (e.g., images, index.html, about.html).
- Add responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
- How to add links? Use Insert hyperlink.
- Example CSS code for styling:
body {
padding: 10;
margin: 10;
font-family: "Roboto", sans-serif;
background-color: honeydew;
}
h1, h2, h3 {
font-family: "Roboto", sans-serif;
}
header {
display: flex;
flex-direction: row;
flex: 1;
justify-content: center;
align-items: center;
padding: 0.5rem 1rem;
}
nav {
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
nav a {
padding: 1rem;
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
border-bottom: 1px;
}
nav a:hover {
background-color: lightpink;
transition: 0.9s;
}
.container {
width: 90%;
margin: 0 auto;
}
.contatiner {
width: 80%;
margins: 0 auto;
}
.aside-left {
width: 60%;
padding: 1rem;
}
.aside-right {
width: 40%;
padding: 1rem;
}
.aside-left img {
width: 100%;
height: auto;
}
.main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 2rem;
}
.left-side img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 12px;
}
.right-side {
flex: 1;
padding-left: 20px;
}
.call-button {
padding: 12px 24px;
background-color: cornflowerblue;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.call-button:hover {
background-color: lightpink;
color: black;
}
.navbar {
display: flex;
gap: 20px;
}
.navbar a {
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
padding: 10px 15px;
transition: background-color 0.3s;
border-radius: 6px;
}
.navbar a:hover {
background-color: lightpink;
}
button {
background-color: cornflowerblue;
color: white;
padding: 12px 24px;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: lightpink;
color: black;
}
Appendix
The website folder contains all the necessary files used to build the website, including the HTML file, CSS file, and images. You can access the folder using the link below:
Website Link: https://melodic-gaufre-275ac4.netlify.app/
Feedback from Mr Shamsul
Mr Shamsul guide us to:
- Learn how to make a navigation bar.
- Learn how to press the logo to go back to the main page.
- Learn how to make columns for images.
- Learn how to insert the folder into Netlify.
- Learn how to modify the layout for mobile view in Figma.
Lectures
Class Activity
Week 10 (24/06/25)
Figure 2.1 Week 10 Class Activity. (Week 10 21/04/25)
Class Activity
- Manage site > Add folder > Add files in folder (e.g., images, index.html, about.html).
- Add responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
- How to add links? Use Insert hyperlink.
- Example CSS code for styling:
body {
padding: 10;
margin: 10;
font-family: "Roboto", sans-serif;
background-color: honeydew;
}
h1, h2, h3 {
font-family: "Roboto", sans-serif;
}
header {
display: flex;
flex-direction: row;
flex: 1;
justify-content: center;
align-items: center;
padding: 0.5rem 1rem;
}
nav {
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
nav a {
padding: 1rem;
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
border-bottom: 1px;
}
nav a:hover {
background-color: lightpink;
transition: 0.9s;
}
.container {
width: 90%;
margin: 0 auto;
}
.contatiner {
width: 80%;
margins: 0 auto;
}
.aside-left {
width: 60%;
padding: 1rem;
}
.aside-right {
width: 40%;
padding: 1rem;
}
.aside-left img {
width: 100%;
height: auto;
}
.main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 2rem;
}
.left-side img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 12px;
}
.right-side {
flex: 1;
padding-left: 20px;
}
.call-button {
padding: 12px 24px;
background-color: cornflowerblue;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.call-button:hover {
background-color: lightpink;
color: black;
}
.navbar {
display: flex;
gap: 20px;
}
.navbar a {
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
padding: 10px 15px;
transition: background-color 0.3s;
border-radius: 6px;
}
.navbar a:hover {
background-color: lightpink;
}
button {
background-color: cornflowerblue;
color: white;
padding: 12px 24px;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: lightpink;
color: black;
}
Appendix
The website folder contains all the necessary files used to build the website, including the HTML file, CSS file, and images. You can access the folder using the link below:
Website Link: https://melodic-gaufre-275ac4.netlify.app/
Feedback from Mr Shamsul
Mr Shamsul guide us to:
- Learn how to make a navigation bar.
- Learn how to press the logo to go back to the main page.
- Learn how to make columns for images.
- Learn how to insert the folder into Netlify.
- Learn how to modify the layout for mobile view in Figma.
Week 10 (24/06/25)
Figure 2.1 Week 10 Class Activity. (Week 10 21/04/25)
Class Activity
- Manage site > Add folder > Add files in folder (e.g., images, index.html, about.html).
- Add responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">. - How to add links? Use Insert hyperlink.
- Example CSS code for styling:
body {
padding: 10;
margin: 10;
font-family: "Roboto", sans-serif;
background-color: honeydew;
}
h1, h2, h3 {
font-family: "Roboto", sans-serif;
}
header {
display: flex;
flex-direction: row;
flex: 1;
justify-content: center;
align-items: center;
padding: 0.5rem 1rem;
}
nav {
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
nav a {
padding: 1rem;
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
border-bottom: 1px;
}
nav a:hover {
background-color: lightpink;
transition: 0.9s;
}
.container {
width: 90%;
margin: 0 auto;
}
.contatiner {
width: 80%;
margins: 0 auto;
}
.aside-left {
width: 60%;
padding: 1rem;
}
.aside-right {
width: 40%;
padding: 1rem;
}
.aside-left img {
width: 100%;
height: auto;
}
.main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 2rem;
}
.left-side img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 12px;
}
.right-side {
flex: 1;
padding-left: 20px;
}
.call-button {
padding: 12px 24px;
background-color: cornflowerblue;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.call-button:hover {
background-color: lightpink;
color: black;
}
.navbar {
display: flex;
gap: 20px;
}
.navbar a {
text-decoration: none;
color: cornflowerblue;
font-weight: 500;
padding: 10px 15px;
transition: background-color 0.3s;
border-radius: 6px;
}
.navbar a:hover {
background-color: lightpink;
}
button {
background-color: cornflowerblue;
color: white;
padding: 12px 24px;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: lightpink;
color: black;
}
Appendix
Feedback from Mr Shamsul
- Learn how to make a navigation bar.
- Learn how to press the logo to go back to the main page.
- Learn how to make columns for images.
- Learn how to insert the folder into Netlify.
- Learn how to modify the layout for mobile view in Figma.
Final Project
Website Redesign
Task need to be Completed
Final Project: Website Redesigned (url)
1. A live URL to the fully functional website. upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).ms
2. A brief report (800–1,000 words) documenting the development process, any challenges faced.
3. Final project main folder into Google Drive
4. Link in your e-portfolio (set the access to public)
Brief Report
Introduction
This website project was developed to showcase a redesigned and improved version of Zoo Negara’s official website. The goal was to enhance the user experience, improve responsiveness, and maintain visual consistency across all pages and devices. The site was coded in Dreamweaver using HTML, CSS, and JavaScript, and is publicly hosted on Netlify. It consists of five main pages: Home, About, Visit Us, Buy Tickets, and Contact Us.
Design Consistency
The website closely matches the approved Figma prototype in both layout and style. For typography, I used a consistent type scale throughout the website, with Arial fonts applied to headers and body text for brand consistency and readability.
For the colour scheme, I used mostly green (#43A047), orange (#FF7043), yellow (#FFB300), and white (#FFFFFF) — carried over directly from the prototype — and applied consistently across all pages to represent nature, warmth, and clarity.
Besides that, a uniform layout structure was maintained with consistent header, footer, spacing, and alignment using a flexible grid system.
Responsive Design
The website was developed using a desktop-first approach, focusing initially on larger screens for an optimal layout and design experience. I then applied media queries to ensure it adapts well across smaller devices. Breakpoints were implemented at max-width: 768px for tablets and smaller desktops, and max-width: 480px for mobile phones. On smaller screens, the navigation bar transforms into a hamburger menu, content stacks vertically, and both text and buttons are scaled appropriately. Cards and images also adjust to fit the width of the viewport. This ensures users have a smooth and user-friendly browsing experience whether they are on desktop, tablet, or mobile.
Figure 2.3 Responsive Design in Website Redesign. (Week 14 25/07/25)
Navigation and Interactive Elements
The website features a sticky navigation bar that remains visible while scrolling, ensuring users can access key pages at any time. On desktop, the “Visit Us” section includes a dropdown menu for easier access to related pages. On mobile, it is simplified into a single link that directs users to a combined page for better usability on smaller screens.
Interactive Elements
- Modal popups for Terms & Conditions and ticket information
- Animated hover effects on buttons for visual feedback
- An embedded Google Map and custom contact form in the Contact Us page
One of the most challenging parts was developing the step-by-step progress bar in the Buy Tickets page. This section simulates a multi-step form, where four sections are dynamically shown and hidden within the same page. Managing the transitions, state changes, and visual cues in a single-page flow required careful JavaScript implementation and layout control.
Besides that, I also included a chat with Zoo Negara and included its answer.
Performance Optimization
Components like the navbar and footer were reused across pages to maintain consistency and reduce repetition. On mobile, images were resized and adjusted using media queries to improve loading speed and ensure smoother performance.
Figure 2.6 Performance Optimization in Contact Us Page. (Week 14 25/07/25)
Testing Process
I tested the website across a range of devices, including a MacBook Air, iPhone 14, and iPad Tablet. It was also tested on major browsers such as Chrome, Safari, Firefox, and Edge. Tools like Chrome DevTools, Lighthouse, and the Responsively App helped simulate various screen sizes and audit performance and accessibility. One notable fix involved adjusting padding and widths to prevent layout issues on smaller iPhones. I also resolved unwanted horizontal scrollbars by carefully setting overflow-x and max-width properties.
Challenges
One of the main challenges was maintaining layout proportions across devices without causing horizontal scroll. Getting the dropdown menu to function properly on mobile was also tricky, as it needed to be simplified and repositioned. Another challenge was embedding iframe previews in my portfolio without breaking the design's aspect ratio. To overcome these, I used aspect-ratio with overflow: hidden, separated mobile and desktop navigation using media queries, and performed frequent testing with layout tweaks to ensure everything worked across browsers and devices.
Conclusion
One of the main challenges was maintaining layout proportions across devices without causing horizontal scroll. Getting the dropdown menu to function properly on mobile was also tricky, as it needed to be simplified and repositioned. Another challenge was embedding iframe previews in my portfolio without breaking the design’s aspect ratio. To overcome these, I used aspect-ratio with overflow: hidden, separated mobile and desktop navigation using media queries, and performed frequent testing with layout tweaks to ensure everything worked across browsers and devices.
Appendix
🔗 Live Website: https://zoonegara0365304studentproject.netlify.app/about
📁 Google Drive Project Folder: Google Drive Folder
🎨 Figma Prototype: View on Figma
📝 Canva Slides: View on Canva
Link for Final Website:
Zoo Negara Website Redesign - Desktop View
Figure 3.1 Desktop View of Website Redesign. (Week 14 25/06/25)
Zoo Negara Website Redesign - Mobile View
Reflections
Experience
Working on the website redesign project for Zoo Negara has been an eye-opening experience that allowed me to put my front-end development and design skills into real practice. Throughout the process, I learned how to translate visual design into functional, responsive web pages while maintaining a consistent brand identity. One of the key takeaways was understanding the importance of layout structure and responsive design. Although I started designing with a desktop-first mindset, I later adapted the layout for smaller screens using media queries and flexible units. Implementing a sticky navigation bar, a functional dropdown menu, and embedding interactive features like Google Maps and modals helped me explore how interactivity enhances user experience.
Comments
Post a Comment