Interactive Design : Final Project

 

Interactive Design | Final Project

Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honors) in Creative Media

Interactive Design / Taylor's University

 INSTRUCTION

MIB April 2025

The main goal of this final project is to turn our finished Figma prototype into a fully coded, working website. This ambitious project entails painstakingly converting the user experience and design elements created in Figma into dynamic, live web pages. Five fully functional sections will be the end result of the project: an engaging Home page, a thorough Menu, an interesting News & Promotion section, an educational About Us page that tells the story of our brand, and a useful Contact Us page (formerly known as "Location") that allows us to communicate directly with our audience.

I made certain design decisions for this project based on both functional and aesthetic considerations. Because prominent hero sections have been shown to be effective at capturing users' attention right away and providing a strong visual introduction to the page's main message, I chose to use them on every page. In keeping with this, a subtle pink gradient design was used consistently throughout the website as a conscious artistic choice. In addition to offering a contemporary and aesthetically pleasing background, this gradient gives the website a unique, enduring, and soft look that strives to produce a warm and interesting user experience.

In addition to the basic hero layout, I've been attempting to make both hero sections visually consistent. Specifically, I want Hero Section 2 in Homepage to mirror Hero Section 1's "content left, image right" layout by utilising pre-existing HTML classes and CSS order properties to visually rearrange elements without changing the HTML structure. The "Explore Our Menu" section has also received attention, with the goal of creating a responsive grid that displays several columns on large screens and elegantly stacks into one column on smaller screens. In order to guarantee a clear and intuitive design, controlling spacing, padding, and text alignment for both wide and narrow viewports has been a constant area of improvement throughout this.

I've been working on improving my website's responsiveness and layout thus far, paying special attention to the hero sections and the general horizontal scrolling functionality. Initially, I wanted to make sure that the hero sections, which prominently display images and content, always showed elements next to each other on larger screens instead of stacking into columns. This required a thorough back-and-forth regarding flexbox properties such as flex-direction: row;, flex-wrap: nowrap; and the meticulous modification of flex-basis and min-width values for the image and content containers. Eliminating unnecessary horizontal scrollbars has been a recurring problem, which I have mostly resolved by applying overflow-x: hidden; to the body and html elements as well as to specific sections to clip any content that is overflowingv.

 REFLECTIONS

Experience :

Embarking on this final project has been a profound coding experience, a culmination of all my practice so far. Transforming our Figma prototype into a functional website has been a rewarding journey. While I know there's always more to explore and learn in web development, this project has been a fantastic opportunity for growth, providing valuable insights and solidifying my skills. Overall, it's been a truly great learning experience.

Observations :

 I consistently observed layout challenges, especially making Hero Section 2 mirror Section 1 with existing CSS classes. The responsive menu grid and persistent horizontal scrollbars also highlighted where content often overflowed, demanding careful attention.

Findings :

Through this, I found overflow properties critical for a clean display. My containers, I realized, needed tighter regulation and neater styling, suggesting I might have over-engineered some sections. This project truly emphasized the importance of concise and controlled CSS for seamless responsiveness.