Interactive Design - Final Project

INTERACTIVE DESIGN - Final Project

|| 28/11/2025 – 11/1/2025 (Week 11 – Week 14)
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Final Project

1. Instructions
2. Process Work
3. Reflection

1. Instructions：

2. Process Work：

Below is a screenshot of my Figma project. I created a homepage, a contact page, an about us page, a product page, a catalog page, and four product detail pages.

First, I created HTML and CSS files for each page in Dreamweaver, and also created a `style.css` file for the entire website. I personally felt that modifying `style.css` would be quite complex, as it affects the overall website layout and formatting.

Throughout the website design, I used interactive design elements such as hover effects, navigation elements, form fields, and visual effects to enhance the user experience and provide convenience.

After converting the Figma mockups into code, many minor issues arose, such as uneven image sizes and a misaligned top navigation bar. These small details were bothersome and difficult to fix.

The most complex and tedious part was the responsive layout design, which needed to adapt to various devices and browsers. Especially since my website contains many tables and images, they sometimes appeared to overflow or obscure on different screens. Fortunately, my website adapted very well, requiring very few modifications.

After resolving all these issues, I uploaded the website to Netlify and checked it multiple times on different browsers and devices to ensure there were no compatibility problems.

3. Reflections on Interactive Website Development:

Developing a website from scratch has been one of the most challenging yet rewarding learning experiences I've ever had. Unlike theoretical exercises, this project required me to transform abstract ideas into a fully functional, clearly visible, and easy-to-use product. Every design choice and every line of code directly impacted how the website performed on different devices. Through this process, I gained a deeper understanding of front-end development and learned how to solve problems systematically, rather than relying on guesswork.

Initial Planning and Setup:

Before writing any code, I spent time planning the overall structure of the website. I broke the website down into multiple pages, each with a clear purpose, such as a homepage, content sections, and information pages. I also refined the interactive design of the pages, such as hover effects, redirects, and form fields. This planning phase helped me envision how users would navigate the website and how to logically group content.

With a clear structure, I began building the website using HTML. I focused on creating a clean and organized document structure, dividing the content into clear sections. At this stage, my goal was not visual perfection, but ensuring the website content was correctly laid out and easy to read, without requiring any style settings. This step taught me that a solid foundation in HTML is crucial before tackling CSS.

Styling and Visual Development:

After completing the HTML structure, I began designing CSS styles. At this point, the website was starting to take shape, but it also presented many challenges. Initially, I struggled to control spacing, alignment, and proportions. Small changes in padding or margins could sometimes cause unexpected layout shifts, making the page look inconsistent.

To address this, instead of arbitrarily changing spacing values across different parts of the website, I started using the same spacing values throughout. Instead of styling each element individually, I created simple, reusable classes and applied them where needed. This made the layout look more consistent and made code modifications easier when adjustments were required later.

Responsive Design Challenges:

One of the most difficult parts of the project was implementing a responsive design for the website. While the layout looked good on a computer screen, it frequently caused problems when viewed on tablets or mobile devices. Images would overflow containers, text blocks would become too narrow, and certain sections would appear crowded or unbalanced. The presence of many tables on my website exacerbated the adaptation difficulties.

Over time, I realized that responsive design requires flexible layouts, not fixed values. I started using percentage-based widths, flex containers, and other techniques to adapt the layout to different screen sizes.

By testing the website at multiple breakpoints, I was able to identify problem areas and adjust the layout accordingly. For example, on smaller screens, a multi-column layout was changed to a vertical layout to improve readability. This process taught me to think from the user's perspective and focus on accessibility rather than just aesthetics.

Debugging and Troubleshooting:

Debugging played a crucial role throughout the development process. Many problems weren't immediately obvious, and a key lesson I learned was to avoid overcomplicating solutions. In many cases, layout issues stemmed from unnecessary CSS rules or conflicting properties. Removing or simplifying these rules was often more effective than adding more code. This taught me that concise code is often more efficient than complex solutions.

Cross-Browser Testing:

After testing the website on different browsers, I discovered some new challenges. Certain elements displayed differently across browsers, especially regarding spacing, images, and tables. These inconsistencies forced me to improve the CSS and ensure consistent style application.

Through this process, I realized the importance of regular testing, rather than waiting until development is complete. Early testing helped me identify problems before they became deeply ingrained in the layout, saving time and reducing larger errors later.

Project Outcomes and Personal Growth:

By the end of the project, I had developed a fully functional multi-page website that adapted well to different devices and screen sizes. More importantly, I gained confidence in solving technical problems independently. Each challenge forced me to research, experiment, and reflect on my decisions, which greatly improved my learning efficiency.

This project also changed my perspective on website development. I now understand that website building is not about achieving perfection the first time, but a continuous improvement process. Testing, adjusting, and refining are integral parts of the development process, not signs of failure.

Summary:

In conclusion, this website development project was a valuable practical experience that improved my technical skills and problem-solving abilities. It taught me how to approach challenges logically, how to balance flexibility in design, and how to give equal importance to usability and visual appeal. While there is still much to learn, this project has laid a solid foundation and inspires me to continue improving my front-end design and development skills.

4. Website page display: