April 21,2025
ZHANG TIANYAO/0376838
20/06/2025 - 20/07/2024(Week 10 - Week 14)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Final Working Website
LIST
1. Lectures
2. Instructions
3.Final Project / Final Working Website
4. Feedback
5. Reflections
Lectures
Week 10
1. Understanding HTML Page Structure
This week, I explored the fundamental structure of HTML documents. I learned how the <head> section defines metadata, while the <body> holds the actual content visible to users. A clear structure forms the foundation of every webpage.
2. Practicing Common HTML Tags
I became familiar with essential HTML tags such as headings (h1 to h6), paragraphs (p), and both ordered and unordered lists (ol/ul). I also practiced using formatting tags like bold (b) and italic (i), as well as layout elements like line breaks (br) and horizontal rules (hr).
3. Introduction to Responsive Design
I learned how to make web pages adaptable to various devices using media queries in CSS. This ensures that layouts automatically adjust to different screen sizes, enhancing usability on both desktop and mobile platforms.
4. Layout Techniques and Footer Design
I studied how to align images horizontally and manage spacing effectively. In addition, I learned how to build a clean footer layout where elements like copyright and social icons are consistently aligned.
5. Hamburger Menu Interface Design
The hamburger menu button should have a circular appearance, and it must provide visual feedback—such as a color change—when clicked. This interaction detail improves user awareness and interface quality.
6. Attention to Visual Design Details
I noted the importance of avoiding dull backgrounds like grey, which may weaken visual impact. Typography should be scalable and responsive, ensuring readability and consistency across different devices and resolutions.
Instructions
Final Project / Final Working Website
1. Introduction
This report documents the design and development process of my interactive portfolio website, created as part of the Interactive Design course. The objective of this project was to build a clean, user-friendly, and visually engaging platform to showcase my creative works and academic projects. The website was developed using HTML, CSS, and JavaScript, and deployed via GitHub Pages. Throughout the process, I focused not only on the visual aesthetics but also on usability, responsiveness, and interactivity to ensure a comprehensive and professional user experience.
2. Development Process
The project began with the planning phase, during which I created a sitemap and wireframes using Figma to map out the content structure and layout of each section: Home, About, Projects, and Contact.
After finalizing the visual plan, I moved on to coding the website. I wrote semantic HTML to structure the pages and applied CSS for styling, using a modular and organized approach to maintain clarity in the codebase. Reusable components such as the navigation bar and footer were implemented across all pages.
To enhance interactivity, I incorporated JavaScript for features like hover effects, smooth scrolling, and dynamically displayed project information. This layered development approach allowed for efficient troubleshooting and easier future maintenance.
3. Features and Design Choices
The website includes four main sections, each fulfilling a specific purpose:
Home Page: Functions as a welcoming landing page with my name, a brief introduction, and quick navigation buttons. Subtle animations were added to create a more dynamic first impression.
Fig 2.3 Home
About Page: Briefly introduces my personality, interests, and creative mindset using minimal text and graphic icons. A downloadable resume button is also included for quick access.
Fig 2.4 About
Projects Page: Features a card-based layout showcasing selected projects. Hovering over a card reveals a brief description and links to detailed subpages with more information and images.
Fig 2.5 Projects Page
Contact Page: Includes an interactive form as well as direct links to my email and LinkedIn profile.
Fig 2.6 Contact Page
Visually, I chose a monochrome color scheme (mainly black and white) to maintain a minimalist and professional look while keeping the focus on content. I selected clean and modern fonts to reflect a creative yet polished tone. For layout, I implemented a responsive grid system to ensure consistency across different screen sizes and devices.
Fig 2.7
4. Challenges and Solutions
Responsiveness Issues: Some elements initially broke on smaller screens. I resolved this using CSS Flexbox, Grid, and well-structured media queries to ensure smooth adaptation across devices.
Performance vs Animation: I aimed to include interactive transitions, but too many animations affected performance. I optimized the site by limiting animations to essential areas and using lightweight CSS transitions instead of JavaScript where possible.
Deployment Errors: During deployment with GitHub Pages, I encountered image and navigation issues due to incorrect relative file paths. I resolved this by restructuring the file directories and using consistent relative paths.
5. Final Testing and Deployment
Before final deployment, I conducted multiple rounds of testing on different devices (laptop, tablet, phone) and browsers (Chrome, Safari, Edge) to identify bugs such as overlapping text and broken links. I also gathered feedback from classmates, which led me to improve font size, spacing, and add hover states for better user interaction.
After refining the site, I deployed it using GitHub Pages. This platform was chosen for its free hosting, version control, and seamless integration with my development workflow. I double-checked all media and links to ensure a smooth and error-free browsing experience.
6. Reflection
This project has been a valuable and rewarding learning experience. It provided me with hands-on knowledge in front-end development while deepening my understanding of how design decisions affect user experience. I realized that building a website isn’t just about writing clean code—it’s also about storytelling, emotional resonance, and ensuring clarity in communication.
Every layout decision, color selection, and animation effect must contribute meaningfully to both the user experience and the message being conveyed. I now feel more confident in independently building and deploying interactive websites. I’ve also come to appreciate the importance of consistency, accessibility, and user-centered design.
Looking ahead, I plan to enhance the site by adding a blog section, improving accessibility features (like ARIA labels and keyboard navigation), and exploring more complex JavaScript frameworks to extend interactivity.
This portfolio is not just a course assignment—it is an evolving expression of my creative identity and a foundation for future growth as a designer and developer.
To ensure consistent functionality and visual appearance, I tested the website across multiple browsers, including Google Chrome, Mozilla Firefox, and Safari. This cross-browser testing helped verify that the layout, fonts, and interactive elements behaved as intended on each platform. Additionally, I utilized responsive design tools to preview and adjust the interface on various screen sizes, such as tablets and smartphones. This process was essential for confirming that the site maintained usability and aesthetic integrity across devices.The final version of the website has been successfully deployed and is hosted on GitHub Pages. It is accessible at the following link: My website
I also uploaded the full project folder to Google Drive and shared the link in my E-Portfolio as required
https://drive.google.com/drive/folders/1mXetW2tjZngEpePRVE0_lU7oSWfRIzuk
Reflections
Throughout this project, I used Adobe Dreamweaver to build a hiking-themed website using HTML, CSS, and Bootstrap. The process involved coding multiple sections including navigation, hero banner, equipment introduction, and map guidance. I focused on layout design, font consistency, color application, and responsiveness. Dreamweaver’s split view allowed me to write and preview code simultaneously, which was especially helpful when adjusting detailed styles. Although it took time to get used to some Bootstrap class behaviors, the overall workflow became smoother with practice.
Observation
While working on the site, I noticed that clear visual structure and consistent spacing significantly improved readability. For example, aligning sections properly and controlling margin/padding made the content look more balanced. I also observed that using too many font sizes or inconsistent colors would make the page feel messy. Another key observation was that media queries didn’t always perform as expected on different screen sizes, especially when enforcing a desktop-first layout. This made me realize the importance of testing on actual browsers.
Findings
This project helped me understand how crucial a well-organized code structure is for maintainability. Separating content and style (HTML vs CSS) made it easier to debug and improve the layout. I also realized that even small visual elements like font weight or line spacing can affect the overall aesthetic. Most importantly, I found that user experience is not just about appearance—it’s about clarity, navigation, and loading performance. Using Dreamweaver gave me a visual way to check how each change affected the final result in real time, which deepened my understanding of front-end design.
Your project 1,2 and Final project seems different. How is that?
ReplyDelete