Interactive Design: Final Project
22/04/25 - 22/07/25 (Week 1- Week 14)
Katherine Alexandra Sutanto / 0373585
Interactive Design / Creative Media / School of Design
Final Project
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflection
LECTURES
Refer to Exercise 1, Exercise 2, Project 1, Project 2
INSTRUCTIONS
TASK
RECAP:
We are assigned to bring our website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES) based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Prototype:
https://www.figma.com/design/QPeQEqBB1bueZ0kvJcQJ5B/The-Room?node-id=0-1&t=zr6hYrJgj5WxlZrY-1
Fig 3.1 Prototype Recap
Image file:
Fig 3.2 Image File
Establishing the Navigation Bar:
The website required a clear and distinct navigation bar at the top of every page. This involved using display: flex with justify-content: space-around to evenly distribute the navigation links (Home, Abouts, Reviews, Contacts, Tour). Hover effects were added to change text color to black, providing visual feedback.
Fig 3.3 Source code and CSS of Navigation Bar
Footer:
The website's footer was designed as a consistent element appearing across every page, serving as a hub for supplementary information and external links. Visually, it was anchored by a large, impactful title, often either "THE ROOM IS ON" or "VISIT US!", which featured a striking outlined text effect. Below this, a set of social media icons provided quick access to the movie's online presence, subtly animating upon interaction. The core information was organized into three distinct columns, offering links for additional movie ratings, merchandise, and ticketing options.
Fig 3.6-3.8 CSS code of Footer
Home Page:
The Home page, served by index.html, was designed to immediately convey the film's unique atmosphere. In the 1st section, it featured a primary background image as the whole section. This section then flowed into an informational area containing three paragraphs. However, i coded it in <h3> instead of <p> . After that section, it follows by a prominent call-to-action button was placed strategically, inviting user interaction.
Fig 3.9 Source code of Home Page
For the third section, I'd add another background image as a whole section, then create another section beneath to create space for the button.
Abouts Page:
The Abouts page keeps that visual journey going. It kicks off with a bold red section, then flows into another striking background with the movie's cast. Over this image, those same informational paragraphs are carefully placed to the bottom right, just like on the home page, so you can read them without blocking the picture. After that, there's a simpler black section before you hit the interactive part: a slideshow. This slideshow has a cool frame around it, and you can easily click the big arrows on the sides to flip through the images. There's even a special triangular "play" button, just in case there's a video there.
Fig 3.13 Source Code of Abouts Page
Fig 3.14 CSS of Abouts Page (1st Section)
Fig 3.15 CSS of Abouts Page (2nd Section)
Reviews:
For the Reviews page, the goal was to make all those comments and critiques easy to read and visually appealing. Then, for each review, I created these distinct blocks. Each block has a large, circular first letter of the reviewer's name on the left, then the actual review text in the middle (title, paragraph, and who wrote it), and sometimes another initial on the right just for balance. I tried to make these review boxes somewhat square-shaped and spread out horizontally on the page so they filled the space nicely, making it easy to scan through all the feedback. For the first section, I'd also use a background image as a whole section, then, insert an empty section just for the fade transition in color. For the final section aka the core of the page, I'd use the standard red background color.
Fig 3.16-3.20 Source Code of Reviews Page
Fig 3.21 CSS Code of Reviews Page
The Contacts page is pretty straightforward. Front and center, there's a big "REACH OUT TO US!" heading and a friendly message encouraging people to connect. Below that, a clear "Here!" button. In the first section, I'd use a background image, to showcase the contents, however this time for the buttons, i just keep it in the same section unlike the about page and home page button. Then, specifically for the footer, I'd merge into one page since this page is all about contacting or have a direct link to communication, so I'd change the footer title on this page into "Visit Us!"
Fig 3.22 Source Code of Contacts Page
Fig 3.23 CSS of Contacts Page
Tour:
The Tour page needed to clearly present all the upcoming event dates. It started with a large, stylized title, "LOVE IS BLIND 2025 TOUR," that stood out with a red glow and unique underlines that stretched out from the text. Below that, all the tour dates and their locations were listed out. Each item in the list was set up so the date was on one side and the location details on the other. Dates that were still "Coming Soon" were shown in a slightly faded color. And there was an "RSVP" button at the bottom. Unlike the other pages, I'd immediately go with one section only for the whole long page, I'd set the height to around 300vh to fit the whole content, including the button.
Fig 3.24 Source code of Tour Page
Fig 3.25 CSS of Tour Page
Responsiveness (Hamburger navigation menu):
When it comes to devices such as tablets and phone, i made a hamburger menu which is often referred as the side bar with 3 lines icon. On those smaller devices, all those links disappear, and just the hamburger icon shows up. When you tap it, the full menu slides smoothly into view, usually from the side of the screen, revealing all the navigation options in a list.
Fig 3.27 CSS of Hamburger Menu
Fig 3.28 Testing phone layout
Fig 3.29 Testing Tablet layout
Fig 3.30 Testing Desktop Browsers layout
Website Deploy Link: https://theroomtommywiseau.netlify.app/
Google Drive: https://drive.google.com/drive/folders/15lwRzUyT5mYRrQLUhq-7G4tFONorvRId
Fig 3.26 Source Code of Hamburger Menu
Fig 3.27 CSS of Hamburger Menu
FINAL OUTCOME
Fig 3.29 Testing Tablet layout
Website Deploy Link: https://theroomtommywiseau.netlify.app/
Google Drive: https://drive.google.com/drive/folders/15lwRzUyT5mYRrQLUhq-7G4tFONorvRId
FEEDBACK
At first, I was confused on how to do each sections of pages the right way, i even attempted to put an image or text on top on an image without making it as a background image. So Sir Shamsul immediately taught me on how to fix that mistake.
REFLECTION
Observation
Starting this website project, my immediate observation was how specific and detailed the design for "The Room" website needed to be. Each of the five original pages had its own distinct character, with unique background images, custom text placements, and specific button styles. It wasn't just about getting content onto a page; it was about ensuring every visual element contributed to that distinct "The Room" aesthetic. The biggest hurdle I saw from the start was figuring out how to keep this exact look consistent and perfect when viewed on everything from a large desktop monitor to a tiny phone screen, especially since some early attempts showed things getting a bit jumbled or not quite where they should be.
Findings
Throughout this assignment, I had some significant "aha!" moments. One major finding was realizing that not all web development tools are equally up-to-date. Another key learning was truly understanding how to make background images and section heights flexible. I realized that using vh units for height, combined with adjusting those values in different screen sizes through media queries, was essential to ensure the dramatic full-screen backgrounds looked great without making the page super long on a phone.
Experience:
My experience working through this assignment was a fantastic hands-on lesson in practical web development. It wasn't just about coding; it was a constant cycle of trying something, seeing how it looked, and then refining it. The back-and-forth process, where I'd adjust a margin here or a flex property there to get the exact alignment right, really showed me the iterative nature of design and development. Every time an element finally snapped into place perfectly across desktop, tablet, and mobile, it felt like a small victory. This project truly taught me the importance of paying close attention to detail, being adaptable when encountering unexpected issues (like software compatibility), and how rewarding it is to see a complex design vision successfully come to life as a fully functional and responsive website.
Komentar
Posting Komentar