INTERACTIVE DESIGN FINAL PROJECT

on

INTERACTIVE DESIGN

|| Leong Hui Xuan 0365793
|| 10/06/2025- 25/07/2025 (Week 08   - Week 14 )
|| Bachelor of Design in Creative Media 
|| Final Project & Report
Table of Content

LECTURE NOTES
INSTRUCTION




LINK FOR FINAL WEBSITE

Link for Final Website:



Link for chosen website to redesign:


Google Drive Project File Link:

https://drive.google.com/drive/folders/17qnvKp3BBcYYIs2geiDvLEMEwcD3l3jb?usp=sharing




PROCESS WORK

In this final task, we need to turn our previous website prototype that we made in Figma into a complete and functional website with Dreamweaver. The website should include at least 5 different pages and represent the design decisions, structure, and user experience. The goal is to create a polished and quality website that brings your redesign concept to life and showcases the web development skills.


Figure 1.0, Website Prototype

Before start coding in Dreamweaver, I refer back to my Prototype in Figma. In the prototype I done 3 pages, which are the home page, the ticket page and the contact page. My idea for this final project was to create 5 pages: Homepage, Menu page, Ticket page, Contact page and Login page.

HTML &CSS Process in Dreamweaver

Then I start to build the HTML and CSS code in Dreamweaver.


Figure 1.1, Imaes Folder

First, I create a folder for my final project website, then I put all the images into a images folder for later use. 

Figure 1.2, Manage file

Then, I manage to put all the pages html & css file in same folder.


NAVIGATION BAR

Figrue 1.3, Navibar 

In the HTML code, I create the navigation bar first to place it at the top of the website. To make the navigation between different pages of the website, I added <href> links in the navigation bar with using anchor <a> tahs to allows users to click on the navbar.

HERO SECTION

Figure 1.4, Hero Section
Figure 1.5, Hero Section HTML code

For the Hero section that I placed in About, Ticket and Contact page, I used a similar structure but changed the background image and tile to separate them.  I used <section> and give a different hero class name to them.


CAROUSEL SECTION

Figure 1.6, All Attraction section

Figure 1.7, All Attraction section HTML code

To showcase the theme park in The Ice-cream Farm, I used carousel to create a scrolling effect to all my theme park images. I created a <div>  with multiple images to place my images in the carousel.

Figure 1.8, CSS for All Attraction Section

In CSS style I gave the carousel a soft background and used flexbox to display the card elements in a row with gap spacing. To hide the horizontal scrolling bar, I used (-webkit-scrollbar) and {display:none} to hide the scrollbar in browsers like Chrome, Safari, and Edge.


FOOTER

Figure 1.9, Footer 

Figure, 1.10, HTML and CSS code for Footer

I used the same footer for all pages and include logo, opening hour information, contact info, social media icons & link and some other info that show in the original website footer. 


HOVER EFFECT

 code for 
Figure 1.11, Hover effect

Figure 1.12, Hover CSS code

The hover effect I added different effects to different sections. For "What we have"
 section, I added a background blur that appears behind the card when hovered. In the "All Attractions" section, I made the card scale up slightly and changed the background color blend mode to multiple to not affect the images. 

For the buttons in the Navbar, I make the background colour appear on hover and scale a bit with shadow. The Ticket Date button, I hovered it with the show selection border and background colour change, then the selected date stayed highlighted. Lastly, I add scales hovering on social media icons in my footer to show viewers that this icon can be clicked and linked to another page.

FORM & INPUT

Figure 1.13, Form & Input

Figure 1.14, HTML of Form & Input

I put input and a form section in the Contact and Login Page to allow users to send a message or get in touch with the Ice-Cream Farm. For form structure, I used the ⁣form> tag to wrap all input elements, such as text input for name and email, the textarea for the message, and also a submit or login button.

Figure 1.15, "requiered" of Form & Input

If the user tries to submit the form withiut typing anything, the browser will show a popup message like "Please fill out this field" It is a browser's build-in form validation using the require attribute.

INTERACTIVE CART

Figure 1.16, Interactive Card and Pop-up window

Figure 1.17, JavaScript of Interactve Cart

The interactive cart was created through HTML, CSS and JavaScript. First, the cart structure was built using HTML, and CSS was used to style the cart, transitions, and hover effect. The JavaScript added enables users to add items from the ticket section to the cart, updating the cart list, counting, and showing the total price. 

If users didn't add anything in cart and click Check Out button, it will show a pop-up window about "Your cart is empty" to 
preventing users from proceeding to checkout with no selected items. If users add items inside cart and click "Check Out" button, the pop-up window will show "Thank you for your purchase!" to interact with users.


MONILE RESPONSIVE VIEW

Figure 1.18, Mobile View

Figure 1.19, CSS for Mobile View

I used an @media in my CSS to make sure my website is responsive in different screen sizes. I adjusted the layout of the navigation bar, hero section, and footer so they stack on smaller screens. Besides, I also reduced the font sizes and image widths to make sure everything looks neat when viewed on mobile devices.
PUBLISH WEBSITE TO NETLIFY

Figure 1.20, Published to Netlify

Lastly, I published the file in Netlify to create the final website link.




FINAL PROJECT OUTCOME

Link for Final Website:



Link for chosen website to redesign:


Google Drive Project File Link:

https://drive.google.com/drive/folders/17qnvKp3BBcYYIs2geiDvLEMEwcD3l3jb?usp=sharing
Final Website Layout:

Figure 1.21, Final Website Layout





FEEDBACK

Week 10 & 11:
Sir said that the Footer section need to be more bigger and more content and justify the feature cards.

Week 12 & 13:
Sir said the mobile responsive is good.

Week 14:
Make sure every font is the same and teh interactive cart looks cool.

REFLECTION

Experiences

Throughout the process of creating my own interactive website for The Ice Cream Farm, I gained valuable experience in transforming a Figma prototype into a fully functional website using HTML, CSS, and JavaScript. Starting from HTML coding in Dreamweaver, I created five pages, which are the About, Menu, Ticket, Contact, and Login pages, each of which has its own layout and design but mostly looks like a family. I organised my folders and placed my images folder in the web folder, then I started structuring each HTML page for easy navigation. By adding effects like carousels, hover effects, and interactive ticket carts, I was pushed to apply what I learnt in class. Additionally, since our module didn't teach us about JavaScript, I found references and tutorials online and followed their guidelines to create my JavaScripts. Finally, I published my project through Netlify for the first time. I was excited, and it made my work feel more complete and realistic.


Observation

While I was working on the site, I noticed that consistency in layout and design was important to create a smooth user experience. I used the same components, like the navigation bar and footer section, to create a unified interface. Besides, in this project I also observed how small details such as spacing, image alignment, and button responsiveness build the aligned layout design and make a big difference in how the website feels to users. Furthermore, when I was testing the site on different screen sizes, I observed that certain elements like the hero and carousel needed multiple time adjustments to maintain visual appeal. The mobile responsiveness also required careful media query handling, especially for the navigation bars, image scaling, and text sizing or alignment.


Findings

I found that combining simple HTML, CSS, and JavaScript can create interactive functionality if used effectively. For example, I built responsive layouts using @media in CSS, the interactive cart with HTML, CSS, and JavaScript, and the required attribute on the input form simplified the validation process. 

One of the biggest challenges that I faced was creating the interactive cart using JavaScript. I had trouble with getting the cart in real time when users added products at first. I don't know how to display the different messages based on the cart status. After seeking help from online references and tutorials, I learnt to use querySelector, innerHTML, and conditions to display reminders when users click the "Check Out" button without adding anything, like "Your cart is empty." This experience helped me understand the structure and how it is used and made my website more interactive.

Another challenge was managing my CSS structure and class naming. Whenever I designed a new section or feature card, I had to ensure that every element had a different class name, whether it was a box, section, or div. Class names can make it easier to target and style consistently. However, when the project had more content, it became more complex; I sometimes accidentally assigned duplicate class names or the same CSS code for the same section without realising it until I checked my code on the website. But these challenges helped me understand how HTML, CSS, and JavaScript work together to create engaging and functional websites.








Comments

Post a Comment