Interactive Design - Final Project Website
Interactive Design - Final Project Website
02/07/25 - 27/07/25 (Week 10 - Week 14)
PAN RUINING (0378138)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project: Final Working Website
CONTENT LIST
· LECTURES
· FEEDBACK
LECTURES
Refer to lectures from:
INSTRUCTION
PROCESS WORK
Before getting started, in addition to what Mr. Shamsul taught in class, I also watched many tutorials online, such as on YouTube and W3Schools, as well as the Bootstrap demonstrations shown by Sir during lessons. These resources explained and provided the HTML and CSS code for all the elements I planned to add. This is the website I intend to redesign: https://www.sparkella.com/
Recap of prototype (Project 2 previously):
In Project 2, I previously created a 6 page website prototype using Figma.
Navigation bar section:
I created six pages: home.html, buyA.html, buyB.html, buyC.html, about.html, and shop.html, as well as an images folder.
Next, I started by trying to write the navigation menu bar code.
In the CSS, I added a light gray effect when a navigation item is clicked, as well as a hover effect. When the mouse hovers over any of the navigation menu items, they also turn light gray.
Hero section:
After several attempts, I finally found that changing the styles to be responsive for mobile devices solved the problem.
FINAL OUTCOME
Final Website Link:
https://sparkella-bypanruining.netlify.app/
Choose a Website to Redesign:
Drive Project File:
https://drive.google.com/drive/u/1/folders/1utzLy1uCVEqyqyWQXFzI40DgEWciL-mM
Brief report:
For this website design project, I used Adobe Dreamweaver as my main development tool, along with HTML, CSS, and some JavaScript to build the structure and interactive functions of the site. The project includes multiple pages such as the Homepage, Shop, and About sections. My goal was to create a clean layout, smooth user interaction, and visually appealing design to provide a great user experience.
During development, I paid close attention to clarity in structure and natural interaction. This was especially important for the Hero Section on the homepage, the responsive navigation bar, and accurate linking between pages. I made continuous improvements in layout, animation, and color schemes to build a website that is both functional and aesthetically pleasing.
Throughout the project, I encountered several technical and design-related challenges. The first major issue was on the homepage. Initially, all the Hero Section content appeared squished together when previewed. I thought it was a screen size or browser compatibility issue, but after testing on different computers and getting feedback from my friends, I realized it was due to my CSS layout. The section had fixed heights and lacked a responsive structure, causing the content to be forced into a limited space. To fix this, I removed the fixed height, adjusted padding and width, and applied media queries to make the section adapt well across different screen sizes.
Another challenge was managing the large number of links in the Shop and About pages. Each product or resource had its own link, and I had to make sure every one of them was accurately connected. It was easy to get confused or make small mistakes, so I made a checklist of all links and tested them one by one before publishing the site. This process was time-consuming but necessary to ensure a clean and user-friendly experience.
The responsive navigation bar was also a tough part. On mobile devices, the navigation menu wasn’t showing at all, making it impossible to switch between pages. After researching tutorials and guides online, I learned how to implement a hamburger menu. I used media queries to hide the default navigation on smaller screens and built a toggle function using JavaScript to show or hide the menu when the icon was clicked. This solved the issue and made the site fully functional on mobile devices.
In addition, I struggled with CSS animations, layout inconsistencies, and browser compatibility. My understanding of CSS properties like transform, opacity, and grid-template-columns wasn’t strong at first, which made animations feel unnatural and some sections messy. I spent a lot of time learning from W3Schools, Bootstrap, and YouTube tutorials, and even ChatGPT to figure out the proper ways to use these properties. Gradually, my CSS skills improved and I was able to polish the layout and animation effects.
To tackle these problems, I adopted a strategy of continuous learning and hands-on experimentation. Dreamweaver’s Live Preview and Chrome’s Developer Tools helped me test my code changes in real-time, which was very efficient in identifying and fixing bugs. This was especially useful when debugging layout problems in the homepage and navigation bar. I also developed my website in a modular structure, dividing it into separate components like navigation, footer, and content sections. This made it easier to update specific parts without affecting the whole page. For the complex link management in the Shop and About sections, I created a detailed mapping system to ensure every button or link pointed to the correct page.
Once the desktop view was done, I moved on to developing the mobile version. This part was relatively straightforward but still required attention. To make the site work well on small screens, I converted many layouts into block-style formats. While some sections were easily handled using responsive classes, others required manual CSS adjustments. I used the browser’s Inspect Tool to simulate different screen sizes and refined spacing, alignment, and layout accordingly. After several rounds of testing and refining, I successfully completed the mobile view.
Overall, this project has greatly improved my understanding of HTML, CSS, and JavaScript, and also strengthened my ability to use Dreamweaver for front-end development. I learned how to debug and adapt designs for various screen sizes, and how to solve real-life coding problems using online resources and tools. Although there were many challenges, the process was highly rewarding. I experienced the full workflow of designing and coding a website from scratch, and this has boosted my confidence in pursuing further learning in UI/UX design and front-end development. Finally, I would like to express my sincere thanks to Mr. Shamsul for his guidance and support throughout this course. His teachings provided a strong foundation for this project, and I am truly grateful for the knowledge I gained.
FEEDBACK
REFLECTION
In summary, this module taught me a lot and helped me learn about web design and development. Before taking this module, I was always curious about the design and development of different websites, but I never thought I would be able to create one myself. Everything about this experience was so interesting to me. From designing the prototype to writing the code using HTML and CSS, the whole process was full of challenges. I even broke down during the production process, but finishing everything gave me a strong sense of satisfaction. Through this project, I kept using Chrome developer tools and the live preview function in Dreamweaver to test and improve my work. This process improved my problem-solving skills and deepened my understanding of responsive design, animation effects, and browser compatibility. Although I faced many difficulties, I managed to overcome them through multiple attempts. In the end, I am very thankful for Mr Shamsul’s patient guidance. He helped me build a solid foundation in this field and provided great support throughout.
Comments
Post a Comment