Interactive Design - Final Project


|| 28/11/2025 – 11/1/2025 (Week 11 – Week 14)
|| Yang Shumeng 0378848
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Final Project 

TABLE OF CONTENTS

1. Instructions
2. Process Work
3. Final Outcome
4. Reflection

1. Instructions：

2. Process Work：

1. Overview

This section documents the key technical challenges encountered during the development of my final website and explains how each issue was identified, analysed, and resolved. The main problems involved CSS files not loading correctly and layout issues when adapting the website for mobile devices. By addressing these challenges, I was able to significantly improve both the functionality and responsiveness of the final website.

2. Issue 1: CSS File Not Applying Correctly

2.1 Problem Description

During the early stage of development, I encountered a major issue where the external CSS file was not being applied to the HTML pages. As a result, the website displayed only default browser styles, and none of the designed layouts, colours, or typography were visible. This made it difficult to continue development, as visual feedback is essential when implementing design decisions.


At first, I assumed the issue was caused by browser caching or temporary loading errors. However, after refreshing the page and clearing the cache, the problem still persisted.

2.2 Investigation Process

To identify the root cause, I carefully checked the following aspects:

  • The <link> tag in the HTML file

  • The file name and extension of the CSS file

  • The directory structure of the project

Despite these checks, the issue was not immediately resolved. I then decided to learn more about common CSS loading problems by watching online tutorial videos and reviewing web development documentation. Through this learning process, I discovered that incorrect relative paths are one of the most frequent causes of CSS not loading properly.

2.3 Solution

After reviewing my project structure, I realised that the file path in the <link> tag did not match the actual location of the CSS file. Once I corrected the path and ensured that the folder structure was consistent across all pages, the CSS was successfully applied.

[


This experience improved my understanding of how browsers load external resources and highlighted the importance of maintaining a clear and organised file structure throughout the development process.

3. Issue 2: Responsive Design Problems on Mobile Devices

3.1 Problem Description

After completing the desktop version of the website, I tested it on mobile devices and discovered several layout issues. Although the website looked visually correct on larger screens, the mobile version showed serious usability problems, including:

  • Text overlapping with images

  • Navigation items being too small to tap

  • Content extending beyond the screen width

  • Inconsistent spacing between sections

These issues significantly affected user experience and failed to meet the assignment requirement for responsive design.


3.2 Analysis of the Cause

The main cause of these problems was the use of fixed-width layouts and pixel-based sizing. While this approach worked on desktop screens, it did not adapt well to smaller devices. In addition, the initial CSS did not include any media queries to control layout behaviour across different screen sizes.

To address this, I researched responsive design techniques and studied examples of mobile-first and adaptive layouts. I also analysed how professional websites adjust typography, navigation, and spacing on smaller screens.

3.3 Solution: Creating a Dedicated Responsive CSS

To solve the issue, I developed a separate set of responsive CSS rules using media queries. These rules allowed the website layout to automatically adjust according to screen size.

The key improvements included:

  • Adding breakpoints for tablets and mobile screens

  • Replacing fixed widths with percentage-based and flexible units

  • Increasing line spacing and font size for better readability

  • Adjusting the navigation layout for touch interaction

  • Ensuring all images scale properly using max-width: 100%




After implementing these changes, the website displayed consistently across desktops, tablets, and smartphones. This significantly improved both usability and visual clarity.

4. Testing and Verification

Once the main issues were resolved, I conducted systematic testing to ensure that the solutions worked effectively. This included:

  • Cross-device testing: Checking the website on desktop, tablet, and mobile screens

  • Cross-browser testing: Verifying layout and functionality on Chrome, Edge, and Firefox

  • Functional testing: Ensuring that navigation links and interactive elements worked correctly


Through this testing process, I confirmed that both the CSS loading issue and the responsive layout problem had been fully resolved.

5. Outcome

By overcoming these two major challenges, I was able to deliver a final website that meets professional standards in both design and functionality. The process not only improved the technical quality of the project but also strengthened my ability to diagnose problems, seek learning resources independently, and apply solutions effectively.

The experience demonstrates my growth in front-end development skills, particularly in CSS management and responsive design implementation.

3.Final Outcome




 


Reflection

This project helped me better understand the practical side of web development. During the process, I learned that technical problems such as CSS errors and responsive design issues are a normal part of building a website. Instead of feeling discouraged, I learned to solve problems by checking my code carefully and using online tutorials for support.

Working on the mobile layout also showed me how important it is to think about users on different devices. I realised that a good design is not only about appearance, but also about usability and accessibility.

Overall, this project improved my confidence in handling technical challenges and helped me develop a more positive and independent learning attitude toward web design.









评论

发表评论

此博客中的热门博文

Typography | Task 1: Exercises

图片
  Typography | Task 1: Exercises LIST / JUMPLINK Lectures Instructions Exercises Feedback Reflections Further Readings 21.4.2025 - 26.5.2025（Week 1 - Week 6) Yang Shumeng（0378848） Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1 / Exercises LECTURES Week 1 Typo_0_Introduction During this lecture, we've grasped the significance of typography. Typography is a crucial cornerstone in all design fields. It sharpens our eye for detail and hones our compositional abilities. Widely utilized in web design, app interfaces, logo creations, book layouts, and poster designs, it serves a...
阅读全文

Illustration and Visual Narrative—task1

图片
ILLUSTRATION & VISUAL NARRATIVE | TASK 1: EXERCISES -  April 21, 2025 21/04/25 - 12/05/25 (Week 1 - Week 4)  Yang Shumeng,0378848 Illustration and Visual Narrative Task 1: Exercises TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Task 4. Reflection Lectures Week 1 During our first tutorial, Mr. Hafiz introduced us to Adobe Illustrator , a powerful tool for creating vector graphics. We began by exploring two key types of digital images: Raster Images Made up of individual pixels, these images lose clarity when enlarged. Common file types include JPG and PNG . Vector Images Constructed from mathematical paths, these can be scaled infinitely without quality loss. Typical formats are AI and SVG . A key point discussed was the issue of missing links when importing external images or Illustrator files into a project. Mr. Hafiz explained how to avoid this by properly embedding assets. We also reviewed several important file formats used in Il...
阅读全文

DIGITAL PHOTOGRAPHY AND IMAGINE

图片
  21.4.2025 - 26.5.2025（Week 1 - Week 6) Yang Shumeng（0378848） DPI / Bachelor of Design (Honours) in Creative Media / Taylors University  Exercises LIST / JUMPLINK Lectures Instructions Exercises Feedback Reflections Further Readings LECTURES WEE K1 This class introduced digital photography fundamentals, showing how science and art merge in design. Key points: • Learned Photoshop: A vital tool for designers/photographers, crucial for image editing/manipulation. • Creative techniques discovered: Broadened perspectives, sparked enthusiasm for future learning. • Photoshop’s value: Powerful yet user-friendly, enabling creative ideas in tasks like designing business cards, restoring old photos, and cartoonizing images—offers endless visual expression possibilities. EXERCISES graphic design composition work 1          • Eye - catching composition: Geometric shapes such as circles and squares cut through the picture, breaking the convention. They create a uni...
阅读全文