Interactive Design | Final Project Website
|| 26/05/25 – 27/07/25
|| Tee Zi Tong, 0366165
|| Interactive Design
|| Final Project - Final Working Website
LINK TO CHOSEN BAD WEBSITE
https://drive.google.com/drive/folders/12FbIaZ7eg0NUdQf6LJBJXwCHTRaB4yBb?usp=drive_link
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:
-
Homepage
-
Recipes
-
About
-
Teas
-
Contact
https://drive.google.com/drive/folders/12FbIaZ7eg0NUdQf6LJBJXwCHTRaB4yBb?usp=drive_link
REPORT WRITE UP
Development Process
This final assignment was one of the most engaging and rewarding projects I’ve done this semester. It gave me the opportunity to apply what I’ve learned so far and practice building a fully functional website based on a prototype I had previously designed. Although the process was fun, it also required a lot of patience and focus—especially when managing long blocks of code, where one missing symbol could break the entire layout.
To prepare myself before starting, I explored beginner-friendly tutorials online and reached out to a few seniors who are more experienced in coding. Their suggestions helped me better understand how to structure files, write cleaner code, and use Dreamweaver more effectively.
For this assignment, we had to develop a website based on the Figma prototype we created earlier. I chose to redesign the Lipton website, focusing on enhancing layout consistency, simplifying the design, and improving user navigation. The original site had areas that looked cluttered or outdated, so my goal was to modernize the overall look while keeping Lipton’s brand identity intact.
My prototype consisted of five main pages:
-
Home
-
Recipes
-
Tea
-
About
-
Contact
These pages served as the structure of my HTML files. Using Adobe Dreamweaver, I created a project folder that contained all the images, HTML pages, and one shared CSS file. I began by developing the homepage, setting up the base layout using semantic HTML tags like <header>, <section>, <main>, and <footer>.
The header and footer sections were consistent across all five pages. I reused the same code blocks for navigation, the Lipton logo, and footer information to ensure visual consistency. The footer included contact details, social media icons, and links to other pages. I also included hover effects for navigation buttons and other interactive elements to improve the user experience.
My styling was entirely done using CSS, I made sure that the layout remained clean and balanced on a standard desktop view. I adjusted paddings, font sizes, and spacing based on the structure I planned out in my Figma design.
Color-wise, I used yellow, red, and green tones that reflected Lipton’s brand color scheme. I also added hover animations for the call-to-action buttons and text links to enhance the browsing experience.
Challenges Faced and How I Overcame Them
As with any coding project, there were several challenges along the way.
One of the biggest issues I encountered was with the background image completely covering the text, making it invisible. At first, I thought it was a margin or padding issue, but after some inspection, I realized the z-index and positioning were the real problem. The image container was placed above the text layer, causing the text to be hidden behind it. I solved this by changing the CSS position to relative for the text container and assigning it a higher z-index than the image. I also set the background image container to position: absolute or fixed with a lower z-index, so that the text could appear in front. This layering fix helped me control which elements should appear on top visually.
Another challenge was maintaining consistent spacing between elements. Sometimes the margins and paddings wouldn’t behave as expected, especially when switching between pages. I had to go through each section and carefully adjust the spacing using Flexbox until things aligned properly. There were also instances where I accidentally reused class names or duplicated CSS rules, which caused some styles to override others. I had to be extra cautious with naming conventions and clean up the CSS file to avoid conflicts.
The carousel slider and form validation also involved some trial and error. I had to test the JavaScript snippets repeatedly and tweak the code to suit my layout. Although I didn’t write the JavaScript from scratch, modifying it and making it work with my structure helped me understand how scripts interact with HTML and CSS.
Finally, recreating the look of my Figma prototype in HTML/CSS took more time than I expected. Some visual elements like overlapping sections or button placements were trickier to replicate accurately. I had to slightly simplify some parts of the layout while still keeping the core design idea intact.
To overcome these challenges, I made use of online resources like YouTube tutorials, and Stack Overflow. I also referred back to class notes, which helped clarify many of the basic techniques we had learned earlier. Bit by bit, I worked through the issues and found better ways to organize my code.
Final Testing, Deployment, and Reflection
After completing all five pages, I reviewed each section to make sure everything displayed properly and that all links and buttons were functional. I tested the layout on different browsers like Chrome and Edge to ensure consistency. I checked that the layout was aligned and readable throughout.
Once I was happy with the final result, I deployed my website on Netlify. I uploaded my project folder, and Netlify generated a live URL for my site. I made sure all images, fonts, and interactive features were loading correctly. Seeing the full website live on the web felt very fulfilling and made the effort worthwhile.
Overall Conclusion: A Fun and Insightful Learning Experience
This project taught me a lot about the real-world challenges of building a website from scratch. While there were moments of frustration—especially with overlapping layers and small bugs—it was also incredibly satisfying to find solutions and see my design come to life.
I now feel more comfortable using Dreamweaver, organizing folders, and working with HTML/CSS. I also gained hands-on experience with JavaScript for the first time through sliders and form validation. Although I didn’t explore responsiveness in this version, I plan to continue learning how to make websites work across all devices in the future.
Overall, I’m proud of the Lipton website I created. It reflects my ability to take a design from concept to code, and my willingness to solve problems through research and persistence.
Comments
Post a Comment