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