Interactive Design - Project 2
26 May 2025 - 16 June 2025 // Week 6 - Week 9
Racheal Tan Tze Rou // 0381005
Interactive Design // Bachelor of Design (Hons) // Creative Media
Project 2: Website Redesign Prototype
LECTURES
Week 7 Box Model
MODULE INFORMATION BOOKLET
TUTORIAL & PRACTICAL
|
| Figure 1.1 ; HTML & CSS |
|
| Figure 1.2 ; Dropdown |
Project 2
Website Redesign Prototype
For project 2, our work is to visualize the interactive elements in Figma,
 |
| Figure 2.1 ; Visual references |
 |
| Figure 2.2 ; Home Page image |
-I used Ps to apply a posterize effect on the homepage image to enhance the retro visual tone and make it feel more vibrant.
-The "Ready to Party" call-to-action is clickable and navigates users to the Visit Us page, encouraging deeper exploration of the site.
Visit Us:
-Added a search bar so users can easily find upcoming events they’re interested in.
-Rules & FAQs are categorized into sections using an accordion-style layout for easier readability and to prevent overwhelming users with too much information at once.
Hours:
-Designed this page with a retro aesthetic to maintain visual consistency with the rest of the site.
-When users hover over a date, the event of the day is revealed, adding a small interactive surprise and helping users plan their visit.
-When users hover over a date, the event of the day is revealed, adding a small interactive surprise and helping users plan their visit.
Contact Us:
-The "Drop us a line" button brings users directly to the contact form, making it easy to reach out.
-I used a fun, engaging header (Can't find the info you need? Ping us anytime.) to attract user attention and encourage interaction.
-At the bottom of the page, a logo button allows users to scroll back to the homepage, maintaining a smooth and continuous navigation flow.
-I used a fun, engaging header (Can't find the info you need? Ping us anytime.) to attract user attention and encourage interaction.
-At the bottom of the page, a logo button allows users to scroll back to the homepage, maintaining a smooth and continuous navigation flow.
Navigation:
-The navigation bar is fixed at the top of the screen to allow quick access to any page from anywhere on the site.
-The logo on the left keeps branding consistent and gives users a way to return home with a single click.
-On the right side, the "Book Tickets" button is styled with stroked text inside a boxed shape, making it a focal point and encouraging users to easily access the ticketing page.
-I also added hover interactions that play with stroke weights, giving subtle but effective feedback that makes the UI feel more dynamic.
-The logo on the left keeps branding consistent and gives users a way to return home with a single click.
-On the right side, the "Book Tickets" button is styled with stroked text inside a boxed shape, making it a focal point and encouraging users to easily access the ticketing page.
-I also added hover interactions that play with stroke weights, giving subtle but effective feedback that makes the UI feel more dynamic.
Footer:
-The footer includes a clickable logo that navigates users back to the homepage, maintaining consistent branding and offering easy access.
-It provides navigation links to all key pages of the website, allowing users to move around without scrolling back up.
-Social media icons are included and linked to the brand’s platforms, helping users stay connected and follow updates.
-A search bar is also placed in the footer for quick access to information, making it easy for users to find what they need without navigating through menus.
-The footer clearly displays the address and contact number, so users can easily locate or reach out to the venue.
-It provides navigation links to all key pages of the website, allowing users to move around without scrolling back up.
-Social media icons are included and linked to the brand’s platforms, helping users stay connected and follow updates.
-A search bar is also placed in the footer for quick access to information, making it easy for users to find what they need without navigating through menus.
-The footer clearly displays the address and contact number, so users can easily locate or reach out to the venue.
FINAL PROTOTYPE
Prototype
by Racheal Tan Tze Rou 0381005
Figure 3.1 ; Website Redesign Prototype video walkthrough
REFLECTION
At the beginning of this project, I faced several challenges as it was my first time using Figma. I struggled especially with creating interactive components like dropdown menus, and it took me about three days to finally figure it out. Thankfully, I was given a due date extension, which allowed me to slow down, explore the tools properly, and understand how Figma works. With time and practice, I gradually became more comfortable with its functions and started enjoying the design process. I chose a retro style for my website redesign, and although it was a learning curve, I found the project fun and rewarding. In the end, I felt a strong sense of accomplishment from successfully designing my very first website prototype.
Comments
Post a Comment