Interactive Design | Final Project
.gif)
Taylor's University
Shubashini a/p Subramaniam / 0367697 / Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904)
Table of Content :
1. Lecture Notes
3. Final Project Brief & Instructions
4. Final Project Process
5. Challenges Faced
6. Final Project Submission
7. Final Reflection
Lecture Notes
Final Project Brief & Instructions
Objective: The objective of this assignment is to bring your 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.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public)
Final Project Process
1. Creating Complete Figma Prototype
From the previous tasked we were tasked in making 3 prototype pages in figma for our website, thus to start off this project I created the other two pages in Figma.
2. Creating Header and Footer of the Website and Navigation Bar
I began by selecting suitable fonts from Google Fonts that aligned with the website’s visual style. After embedding them into the HTML, I moved on to designing the header section, which includes the navigation menu, logo, and CTA button. I ensured the layout was responsive and visually consistent across devices.
Designing the hero section was a key part of building the website, as it’s the first thing visitors see and sets the tone for the overall user experience. I aimed to make it visually striking while still being functional and easy to navigate. The hero section for the website which will be help in 3 pages, The Homepage, Specialty page and Event Page.
Figure 10, Hero Section in HomePage 
Figure 11, Hero Section in Speciality Page5. Creating Special Features
- Hamburger Menu
The hamburger menu was an important feature to ensure the website remained user-friendly and navigable on smaller screens. It allows users to access the main navigation links without overwhelming the mobile interface with too much content.
To build it, I started by creating a simple menu icon made up of three horizontal lines, which is widely recognized as a symbol for hidden navigation. I used basic HTML and styled it with CSS to make sure it looked clean and aligned properly with the header.
- Maps
To help users easily locate the bakery, I included a maps section on the Homepage page of the website. This feature improves both accessibility and user convenience, especially for visitors looking for directions or wanting to check the location before visiting.
I used Google Maps Embed to display the bakery’s exact location. After finding the correct address on Google Maps, I generated an embed code and inserted it directly into the HTML. I customized the dimensions to ensure it fit neatly within the layout, keeping it responsive so it adjusts well across desktops, tablets, and mobile devices.
- Youtube Video
To make the website more engaging and informative, I decided to embed a YouTube video that showcases the bakery’s atmosphere and services. This section adds a dynamic visual element and helps visitors connect more personally with the brand.
- Contact Forms
On the Contact Us page, I included two separate contact forms to serve different purposes, one for general questions and another for job inquiries. This clear separation helps improve user experience by guiding visitors to the correct form based on their needs.
6. Making it Responsive
To achieve this, I used a mobile-first approach by setting flexible layouts and applying media queries in my CSS. This allowed the content to adjust dynamically depending on the device’s screen width. I relied on layout techniques like Flexbox and Grid to control alignment, spacing, and stacking of elements, which made it easier to maintain structure across breakpoints.
I also adjusted font sizes, image dimensions, and padding/margins to scale appropriately on smaller screens. For example, navigation links collapsed into a hamburger menu on mobile devices to keep the header clean and accessible, while larger images or text sections were resized to prevent horizontal scrolling.
7. Uploading Filed in Netlifly
Final Project Submission
Google Drive File :
Netlifly Link :
https://glowing-semifreddo-bdfe48.netlify.app/Brief Report :
Development Process
The development of the Meier Bakery website began with translating the original prototype into a fully functional, responsive website. I structured five main pages: Home, About Us, Menu, Events, and Specialties. To maintain design consistency, I used a shared header and footer across all pages, applying a clean layout with intuitive navigation.
Styling was done using custom CSS with some support from frameworks like Bootstrap to ensure responsiveness across various devices. I selected appropriate fonts through Google Fonts and applied a warm, welcoming colour scheme that matched the cozy branding of a family bakery. Hover effects, buttons, and images were carefully implemented to encourage user interaction while keeping the experience smooth and engaging.
Challenges Faced
One of the most difficult parts of the project was creating the carousel image sliders. I had to go through a lot of trial and error. At times, images wouldn't display correctly or the slider wouldn’t function at all and I didn’t always know why it was breaking. That uncertainty was frustrating and slowed down my progress.
To address this, I watched multiple tutorial videos and experimented by combining techniques until I achieved the desired result. JavaScript was also required for the carousel to function properly, so I made sure to include the necessary scripts and test their behavior. In total, I successfully implemented three carousels across the website: on the Homepage, Events page, and Specialties page.
Another challenge was dealing with cross-browser compatibility. The layout looked fine in Chrome but appeared misaligned in Safari and Edge. Fixing these issues required repeated testing and small adjustments to my CSS. Again, I often didn’t know the exact cause of the issue immediately, so I had to research, inspect elements, and test various fixes.
How Challenges Were Overcome
The key to overcoming these challenges was persistence and resourcefulness. When things didn’t work and I didn’t know the reason, I paused to carefully inspect the code and compare it with working examples from trusted sources. Watching detailed tutorials helped fill gaps in my understanding, especially with more complex components like sliders.
To address cross-browser problems, I used developer tools to analyze layout issues and tweaked CSS properties until they rendered correctly on all major browsers. I also used HTML and CSS validation tools to catch syntax errors that may have caused bugs or unexpected behavior.
Conclusion
This project taught me a lot about real-world problem-solving in web development. I learned that it’s okay not to have all the answers at first, what matters is the ability to troubleshoot, research, and improve through iteration. In the end, I created a professional, accessible, and visually appealing website that reflects the brand identity of Meier Bakery, complete with engaging visuals and responsive design.
Final Reflection
Experience :
Developing the final version of my website from the prototype was both challenging and rewarding. This task pushed me to apply everything I had learned about front-end development, design principles, and UX best practices. Starting with my prototype as the foundation, I translated static designs into functional web pages using HTML, CSS, and JavaScript. I also experimented with Bootstrap for responsiveness and layout consistency.
Throughout the process, I encountered multiple technical hurdles, some related to layout behavior on smaller screens, others involving JavaScript functionality. Fixing these required trial and error, research, and lots of testing. Deploying the website using Netflifly was a proud moment, as it was my first time publishing a live site.
Observations :
One of the biggest things I noticed during this task was how much attention needs to be given to consistency and user experience in the transition from design to development. Small changes, like incorrect font sizes or spacing differences, could drastically affect the overall feel of the site. I also observed how different browsers render things slightly differently, this made cross-browser compatibility testing essential.
Responsiveness was another major area of focus. What looked great on a laptop didn’t always translate well to a mobile screen. I had to continuously test on different devices and adjust media queries and flexbox/grid layouts to ensure a smooth user experience across all screen sizes.
Findings :
From this assignment, I gained a much deeper understanding of the connection between visual design and functionality. I learned that a successful website isn’t just about making things look good, but about making them work well, load fast, and feel intuitive to users. I found that optimizing images and compressing files significantly improved load times, and tools like browser developer consoles were crucial for debugging.
I also realized the importance of documentation and tracking bugs. By keeping notes on the problems I encountered and how I fixed them, I was able to work more efficiently and reflect better on my process in the final report.
Comments
Post a Comment