Interactive Design | Final Project
Interactive Design | Final Project: Final Working Website
- June 18, 2025
25/6/25 - 23/7/25 (Week 10 - Week 14)
Hu Yao Ping| 0376768
Bachelor of Design (Honours) in Creative Media | Taylor's University
Interactive Design
Final Project: Final Working Website
[Table of Contents]
1. Instructions
2.Final Project
3. Feedback
4. Reflection
5. Quick Links
[Instructions]
[Final Project]
You are required to develop a fully functional and interactive website
based on the prototype you designed in the previous stage.
This website should demonstrate your comprehensive skills in design, user experience (UX), and front-end development.
This website should demonstrate your comprehensive skills in design, user experience (UX), and front-end development.
The final product must be professional, consistent, and offer a strong user experience.
Core Requirements:
1. Website Development (Technical Implementation):
- Use HTML, CSS, JavaScript, and optionally frameworks like Bootstrap or others.
- Convert your prototype into a real, working website while maintaining design consistency (typography, color scheme, layout, imagery, etc.).
- Ensure the website is fully responsive, adapting to mobile phones, tablets, and desktop screens.
- Ensure cross-browser compatibility (e.g., Chrome, Firefox, Safari, Edge).
2. Core Features:
Process Work：
- A clear and user-friendly navigation system.
- Include interactive elements such as forms, buttons, and dynamic content.
- Performance optimization: Reduce file sizes, use caching, compression, and clean coding practices.
- Basic SEO optimization: Use appropriate meta tags, alt text for images, and clean, semantic URLs.
- Conduct thorough testing: usability testing, cross-browser testing, and responsive checks.
- Deploy your website online using a public platform (e.g., GitHub Pages, Netlify, or a custom domain).
- Submit a valid public URL to your live website.
Based on the design of the previous project in Figma, I added two more
pages, a total of five pages are designed as follows：
Fig 1.2 Page 1
Fig 1.6 Page 5
Next, write the code in VS code for each page, as follows：
Fig 2.1 Page 1 Home Page
Purpose:
The homepage welcomes visitors with an introduction to the author, an
overview of featured works, and the latest news, serving as the main entry
point to the website.
Implementation Strategy:
2. Audio Books Page
Purpose:
This page highlights available audiobook editions, featuring book covers, information about the voice actors, and buttons for previews or downloads.
Implementation Strategy:
3. About Page
Purpose:
To introduce Suzanne Collins’ background, including her writing career, accomplishments, and the adaptation of her work into other media.
Implementation Strategy:
4. Contact Page
Purpose:
To provide a contact form where users can submit inquiries and to list external links to related platforms or collaborators.
Implementation Strategy:
5. HG Illustrated Page
Purpose:
To showcase illustrated works related to The Hunger Games, offering a visual gallery that complements the text-heavy pages.
Implementation Strategy:
Final Outcome：
Implementation Strategy:
- A <header> contains the navigation bar built with a <nav> element linking to pages like Home, Audio Books, About, etc.
- The welcome section is structured with a <section> element that includes an author image (<img>), a heading (<h1>), and a short introduction (<p>).
- A list of books is presented using repeated <article> or <div> elements, each with a title (<h3>) and a brief description or rating (<p>).
- The news section follows a similar pattern, using a card or list layout. Basic interactivity, like a slider or “Load More” button, can be implemented with JavaScript if needed.
Fig 2.1 Page 2 Audio Books Page
Purpose:
This page highlights available audiobook editions, featuring book covers, information about the voice actors, and buttons for previews or downloads.
Implementation Strategy:
- The navigation bar is reused from the homepage to maintain visual and functional consistency.
- Content is divided into clear sections: one for audiobook covers (<img> with titles), one for voice actor details (<p> with short bios or interview links), and another for audio previews.
- Preview buttons are built with <a> or <button> elements, connected to embedded <audio> players or JavaScript logic for dynamic playback.
- JavaScript may also be used to load additional audio samples or open modals upon click.
Fig 2.3 Page 3 About Page
Purpose:
To introduce Suzanne Collins’ background, including her writing career, accomplishments, and the adaptation of her work into other media.
Implementation Strategy:
- The layout begins with a consistent header, followed by a visually rich hero section that combines a background banner with the author’s portrait.
- The biography is organized chronologically using an <article> structure, with <p> elements for each key milestone—from early work in children’s television to the creation and success of The Hunger Games series.
- Simple CSS animations such as fade-ins or slide-ins can be applied to make the timeline more engaging and dynamic.
Fig 2.4 Page 4 Contact Page
Purpose:
To provide a contact form where users can submit inquiries and to list external links to related platforms or collaborators.
Implementation Strategy:
- The header and navigation are reused. The main content is divided into two sections:
- The form area, built with a <form> element containing <input> fields (for name, phone, email) and a <textarea> for the message. Basic HTML5 validation is enforced using the required attribute.
- The quick links section uses <ul> and <li> elements with <a> tags linking to external sites such as Scholastic.
- The submit button may be enhanced with JavaScript to enable asynchronous submission using the Fetch API, avoiding full page reloads.
Fig 2.5 Page 5 HG Illustrated Page
Purpose:
To showcase illustrated works related to The Hunger Games, offering a visual gallery that complements the text-heavy pages.
Implementation Strategy:
- A themed banner image is placed below the header to set the tone of the page.
- The illustration grid is created using CSS Grid or Flexbox. Each illustration is displayed in an <img> element, optionally accompanied by a <figcaption> describing the artwork.
- For a better user experience, image preview functionality (click-to-zoom or modal view) can be implemented using JavaScript to handle click events and display enlarged images dynamically.
Fig 3.1: Final HTML Page 1 [PDF]
Fig 3.2: Final HTML Page 2 [PDF]
Fig 3.3: Final HTML Page 3 [PDF]
Fig 3.4: Final HTML Page 4 [PDF]
Fig 3.5: Final HTML Page 5 [PDF]
Fig 4.1: Final CSS Compilation [PDF]
Fig 5.1：Final Video
Project Background and Objectives：
This project involved transforming a previously created prototype into a fully functional, visually consistent, and user-friendly responsive website. The design was inspired by the official Suzanne Collins books website and aimed to replicate its clean and elegant style while enhancing usability. The primary goal was to deliver a professional website that provides a seamless user experience across various devices and browsers. The final product has been successfully deployed on GitHub Pages and is accessible online at the provided URL.
Development Process：
- The website was developed using core front-end technologies, including HTML5, CSS3, and JavaScript. A key focus was placed on creating a semantic HTML structure that enhances accessibility and SEO. CSS Flexbox and media queries were extensively used to build a responsive layout that adapts smoothly to different screen sizes, from large desktop monitors to tablets and smartphones. Google Fonts were integrated to ensure clear and readable typography, with careful attention paid to font sizes, line heights, and spacing to maximize readability.
- From a functionality perspective, a responsive navigation menu was implemented. JavaScript was used to create a hamburger menu that expands and collapses on smaller screens, making navigation intuitive for mobile users. Additionally, interactive elements such as buttons and links were styled with hover effects to enhance engagement and provide clear visual feedback to users.
Performance Optimization and SEO：
Performance optimization was a crucial part of the development. To improve page load speed, images were compressed and resized appropriately, minimizing bandwidth usage without sacrificing visual quality. All images include descriptive alt text, which supports accessibility requirements and improves search engine rankings. The website’s structure uses semantic tags such as <header>, <nav>, <main>, and <footer>, which help search engines better understand the content hierarchy. Meta tags including titles and descriptions were carefully crafted to boost SEO performance, improving the website’s visibility in search results.
Compatibility and Testing：
- Cross-browser and cross-device compatibility were rigorously tested to ensure consistent user experiences. Adjustments were made to CSS code to handle rendering differences across Chrome, Firefox, Safari, and Edge. Browser-specific prefixes and fallback styles were incorporated to address inconsistencies, especially those observed in Safari. The website was tested on various devices and screen resolutions using both simulators and real hardware to verify that responsive layouts functioned correctly.
- Comprehensive functional testing ensured that all interactive features, such as navigation menus and buttons, worked as expected. Performance testing measured loading times and responsiveness, guiding further optimizations to maintain smooth user experiences even on slower connections.
Challenges and Solutions：
- One of the main challenges encountered was the mobile navigation menu. Initially, the horizontal navigation bar did not adapt well to small screens, causing links to wrap awkwardly and making it difficult for users to navigate. This issue was resolved by implementing a hamburger menu using JavaScript and CSS media queries, which allowed the menu to collapse on smaller devices and expand upon user interaction, greatly improving mobile usability.
- Maintaining design consistency across multiple pages and components also posed difficulties. To address this, CSS variables were defined to centralize the management of colors, fonts, and spacing. This approach ensured uniform application of the design language throughout the site and simplified future style adjustments.
- Cross-browser compatibility, particularly with Safari, required targeted fixes. Differences in Flexbox behavior were mitigated by adding vendor prefixes and modifying layout properties. Repeated testing and fine-tuning ensured that the visual and functional integrity of the website was preserved across all supported browsers.
Conclusion：
Week 10 (25/6/25)
General Feedback:
This week, the prototype was converted into a basic HTML and CSS homepage layout, establishing the overall style. The project is on schedule, with initial navigation and page structure set up.
Specific Feedback:
- This project successfully delivered a responsive, accessible, and visually coherent website that closely follows the approved prototype and design inspiration. Throughout the development process, I enhanced my skills in front-end technologies, responsive design, performance optimization, and SEO best practices. The project also deepened my understanding of accessibility standards and cross-browser compatibility challenges.
- The final website offers a polished platform for showcasing Suzanne Collins’ books with smooth navigation and engaging interactivity. It adapts seamlessly to various devices and screen sizes, providing a consistent and enjoyable user experience. This project has not only resulted in a professional website but also strengthened my practical skills and problem-solving abilities, laying a strong foundation for future web development endeavors. （Around 925 words）
[Feedback]
Week 10 (25/6/25)
General Feedback:
This week, the prototype was converted into a basic HTML and CSS homepage layout, establishing the overall style. The project is on schedule, with initial navigation and page structure set up.
Specific Feedback:
The navigation bar has alignment issues on mobile devices and needs media
queries for adjustment.
Week 11 (2/7/25)
General Feedback:
Added About and Services pages, and started implementing interactive elements like forms and buttons. The overall structure is improving and consistent with the prototype.
Specific Feedback:
The form submission button lacks backend functionality and does not respond yet.
General Feedback:
Added About and Services pages, and started implementing interactive elements like forms and buttons. The overall structure is improving and consistent with the prototype.
Specific Feedback:
The form submission button lacks backend functionality and does not respond yet.
Week 12 (9/7/25)
General Feedback:
The website is mostly complete, with responsive design optimizations underway to fit different screen sizes. Testing revealed some layout issues on smaller screens, which are being addressed.
Specific Feedback:
Some text and images overlap on mobile devices and require layout adjustments.
General Feedback:
The website is mostly complete, with responsive design optimizations underway to fit different screen sizes. Testing revealed some layout issues on smaller screens, which are being addressed.
Specific Feedback:
Some text and images overlap on mobile devices and require layout adjustments.
Week 13 (16/7/25)
General Feedback:
Focused on performance optimizations such as image compression and CSS cleanup, while adding meta tags and alt text for better SEO. The site is feature-complete and ready for final testing.
Specific Feedback:
A few images still lack alt attributes and need to be updated.
Week 14 (23/7/25)
General Feedback:
The project was successfully deployed and passed cross-browser and device testing, showing stable performance. Final code cleanup and optimization were completed.
Specific Feedback:
The project was successfully deployed and passed cross-browser and device testing, showing stable performance. Final code cleanup and optimization were completed.
Specific Feedback:
Site loading speed is slightly slow; further compression of CSS and
JavaScript files is recommended.
[Reflection]
In this project, I transformed a static website prototype into a fully
functional, interactive, and responsive live website. I used HTML, CSS,
and JavaScript, and integrated the Bootstrap framework to build the
layout, implement UI components, and ensure responsive behavior. For
development, I worked with Visual Studio Code (VS Code), which greatly
improved my workflow thanks to its powerful extensions and debugging
tools.
I began by constructing the basic semantic structure of the site, then styled it to match the prototype’s visual design. I added interactive elements such as a collapsible navigation bar, hover effects, and a book showcase section. The final website was deployed on GitHub Pages, allowing public access via a live link.
Observation
Throughout development, I encountered several important points that required attention:
- Responsive Layout Adjustments: While Bootstrap provided a solid foundation, I still needed to make custom adjustments to the book grid and footer layout to ensure a clean, user-friendly experience on smaller screens.
- Navigation Usability: I used Bootstrap’s navbar-toggler component to enable a responsive, collapsible menu on mobile devices, which greatly improved the accessibility and usability of the navigation.
- Performance Optimization: I focused on performance by compressing images, simplifying CSS/JS files, and organizing my assets efficiently to reduce loading time and improve the user experience.
- Cross-Browser Compatibility: I tested the website on Chrome, Firefox, Safari, and Edge. Differences in font rendering and spacing required some tweaks, such as consistent use of units and fallback fonts, to ensure visual consistency across platforms.
Findings
- Design Consistency is Key: By strictly following the original prototype's typography, color palette, and layout, I was able to deliver a clean and professional design. Small design decisions—like spacing, shadows, and alignment—had a major impact on the final quality.
- Simple Interactions Make a Difference: Even without complex animations, adding hover feedback, button effects, and responsive elements significantly enhanced user experience and engagement.
- Professional Tools Boost Efficiency: Using VS Code with features like code highlighting, live server previews, and intelligent suggestions helped me work faster and more accurately during development.
- Deployment Highlights the Importance of Detail: Deploying on GitHub Pages taught me that even small errors—such as incorrect file paths or missing assets—can break a live site. Thorough testing and attention to detail are essential before going live.
- Problem-Solving Builds Confidence: Facing and solving challenges like layout inconsistencies and browser-specific issues improved my understanding of front-end development. It also gave me more confidence in tackling real-world web projects.
[Quick Links]
Thank You
Comments
Post a Comment