Interactive Design - Final Project
23 June 2025 - 14 July 2025 // Week 10 - Week 14
Racheal Tan Tze Rou // 0381005
Interactive Design // Bachelor of Design (Hons) // Creative Media
Final Project
MODULE INFORMATION BOOKLET
PROCESS WORK
This redesign project is a continuation of my Project 2 prototype, and the final deliverable required a fully functional website consisting of five web pages:
1. Homepage
Google Drive Project Link: https://drive.google.com/drive/folders/18xeWh8b8ljHAz-1qXeSu-e9hubb_mRfD?usp=sharing
Early in working on prototype, I experimented with bold, stylized text effects such as strokes and outlines to create a visually striking layout. For example, I applied a stroked text style to the main titles and buttons using CSS properties like
text-stroke and -webkit-text-stroke. However, during a feedback session, Mr. Shamsul advised me to simplify the visual style. He pointed out that the use of strokes could make the text appear outdated or overly decorative.Following his suggestion, I removed the stroke effect from the main headings and buttons and instead opted for solid color fills. This not only made the text more readable but also gave the entire layout a cleaner and more modern appearance. I learned that sometimes less is more, removing complex styling can actually strengthen the visual impact and improve accessibility.
Navigation Bar:
The navigation bar underwent similar simplification. Initially, the "Ticket" button had a stroked design to help it stand out, but Mr. Shamsul suggested maintaining a consistent and minimalist approach. I replaced the stroke with a standard text color and kept the navigation links clean by removing underlines (
text-decoration: none;), which contributed to a more refined and uncluttered user interface.I also focused on spacing and padding to ensure that the navbar looked balanced on both desktop and mobile devices. Using
flexbox helped me maintain alignment and spacing, especially when testing responsiveness later on.Footer:
The footer gave me the most trouble since the beginning. No matter how many times I adjusted the padding and margin, it consistently had awkward gaps on both sides of the container (refer to Figure 2.1). Fortunately, I found the bug when I was about to give up, I discovered the issue was related to how I structured the HTML.
The real culprit turned out to be the placement of a closing
</div> tag. It was prematurely placed before the footer, causing the layout to break. Once I moved the closing tag after the event section and just before the footer, everything snapped into place perfectly.  |
| Figure 2.1 ; Footer type choice |
To maintain typographic consistency in the footer, I also changed the copyright text to Roboto Slab, aligning it with the other footer elements.
This fix was first implemented on my homepage (
index.html). Once everything displayed correctly, I copied the updated structure and styling to all other pages. Thankfully, I didn’t need to reapply the CSS separately for each page since the styling was already centralized in the external stylesheet.I first did it in my index.html which is homepage. Once everything displayed correctly, I copied the updated structure and styling to all other pages. One good thing is that I didn’t need to reapply the CSS separately for each page since the styling was already centralized in the external stylesheet.
Homepage
My homepage includes an engaging hero section, site navigation, a brief introduction, and links to upcoming events. Visually, the homepage adopts the retro-skating vibe established in my prototype, but with a cleaner, more modern execution.
Visit Us
The most challenging part of developing the “Visit Us” page was implementing the rules accordion. It required JavaScript functionality to toggle open/close behavior.
 |
| Figure 2.2 ; JavaScript for accordion |
I manually added each FAQ question and answer into the accordion code, ensuring clear wording and a consistent layout. Each question was wrapped inside a button element, while the answer was placed inside a hidden panel that toggled visibility when clicked.
Hours
The "Hours" page was visually and technically the most complex.
 |
| Figure 2.3 ; Adding graphic elements |
Initially, I intended to use multiple decorative graphic elements to create a retro vibe (refer to Figure 2.3) like my prototype. However, after experimenting, I found that too many elements made the layout feel cluttered, especially around the calendar.
Instead, I decided to keep only the essential components: the calendar and a simple search bar. This minimalist approach made the layout feel neater and easier to read.
 |
| Figure ; Misaligned Search Bar |
Solution: To fix this, I wrapped the search bar in a
<div class="search-container"> and placed it inside the <main> tag, immediately after the calendar table. This allowed me to control its spacing better using margin and padding.Mr. Shamsul advised me to use a table layout for the calendar. He also warned that managing multiple months and implementing hover events would be complex. Still, I wanted to give it a try.
I tested using
overflow-y: scroll to display all events, but the result was a long, unwieldy page.Instead, I discovered a cleaner method: using an event tooltip system. This allowed me to display event details on hover using
position: absolute and a combination of CSS hover states and JavaScript. |
| Figure ; overflow |
Bookings
The Bookings page wasn’t included in my original prototype, so I first designed the "Contact Us" page and then followed a similar layout structure to build the Bookings page.
 |
| Figure ; Bookings page reference |
I added a subtitle directing users to the Rules/FAQs page, reducing the need to overcrowd the booking form with too much information. I also included a clear and well-structured pricing table so users wouldn’t have to scroll endlessly to find the right prices.
To avoid confusion or invalid inputs, I added date and time selection fields using
input type="date" and input type="time" with the required attribute. This ensures that the form cannot be submitted unless those fields are completed, reducing the chance of users entering irrelevant or blank content. |
| Figure ; JavaScript for Bookings |
Initially, I inserted the JavaScript directly into the HTML using a
<script> tag at the bottom of the page. But as I added more scripts for this "Bookings" page, I created a new external file named moonlight.js and placed all my JavaScript code there. This made the code more maintainable and allowed me to keep each HTML file clean and organized. I then included the external file in each page using: <script src="moonlight.js"></script>Contact Us
I created the “Contact Us” page before the Bookings page and used it as a style reference. Like with the “Hours” page, I removed all non-essential graphic elements to maintain consistency and clarity. I focused on user accessibility, mobile responsiveness, and ensuring that the contact form was easy to fill out.
Responsiveness
 |
| Figure ; Responsive CSS |
After finalizing all desktop layouts, I moved on to making the site responsive. I added media queries in my CSS to support tablet and mobile views, targeting each major page section.
Netlify Deploying
 |
| Figure ; Deploying the website in Netlify |
FINAL Website Link:
https://moonlightrollerwaybyrachealtantzerou.netlify.app
FEEDBACK
Week 11
-Showed Mr. Shamsul my final prototype, even though it was already submitted, i want to make sure the layout didn’t have major issues, since I hadn’t shown him the final version yet.
-also shown Homepage, "Visit Us" page
-Mr. Shamsul advised to simplify the design further.
-Mr. Shamsul advised to simplify the design further.
Week 14
-Suggested including Bootstrap so I can use its components and customize them based on my prototype.
-Mentioned the homepage looked unbalanced due to inconsistent element sizing.
-Recommended using a container to wrap all page elements, including the navbar and footer, instead of a page-wrapper. This makes it easier to control responsiveness by adjusting the container size only.
-Advised setting element widths to 100% and avoiding fixed sizes.
-For the "Hours" page, recommended using a table layout and said there's no need to add hover effects for events, as it’s easy in Figma but harder to implement in code.
REFLECTION
Experience
This project taught me a lot about the gap between design and development. One of the biggest challenges was sizing. In Figma, I didn’t consider how hard some layouts would be to code, which led to several changes during development. I also struggled when Live Preview wouldn’t reflect my code changes, making it difficult to test or debug in real-time.
Observation
I realized that designing with code in mind is essential. Some effects that looked good in the prototype like strokes and overlapping graphics were either hard to implement or hurt readability. Simplifying these based on feedback improved the overall design.
Findings
-Not all design ideas are practical for coding.
-Clean, modular code (using external CSS/JS) saves time.
-Small structural errors can break a layout.
-Clean, modular code (using external CSS/JS) saves time.
-Small structural errors can break a layout.
Comments
Post a Comment