Interactive Design：Final Project

June 20, 2025

Interactive Design：Final Project

SUN JIAYUE (0376224)

GCD60904 / Interactive Design / Bachelor of Design ( Hons) in Creative Media /Taylor's University

Final Project

INSTRUCTION：

Final Website Redesign Assignment：

Objective:

Transform your previous prototype into a fully functional, professional website with at least 5 pages, demonstrating consistency in design, strong user experience, and solid front-end development skills.

Development Requirements:

Implementation:
Use HTML, CSS, JavaScript (or frameworks like Bootstrap) to build the website based on your prototype.

Design Consistency:
Maintain consistent typography, color schemes, imagery, and layout as outlined in the approved prototype.

Responsive Design:
Ensure the website works smoothly across all screen sizes—desktops, tablets, and mobile devices.

Cross-Browser Compatibility:
Make sure the website functions properly in all major browsers (Chrome, Firefox, Safari, Edge, etc.).

Core Features:

Navigation System:
Provide a clear and user-friendly navigation system for easy access to all pages.

Interactive Elements:
Include forms, buttons, or other interactive features to increase user engagement.

Technical & Deployment:

Performance Optimization:
Optimize file sizes, streamline code, and implement caching and compression for faster load times.

Testing & Deployment:
Conduct thorough testing for responsiveness, usability, and browser compatibility. Document any issues and how they were fixed.
Deploy the website using platforms like GitHub Pages, Netlify, or your own domain and provide a public URL.

Final Project：

The Final Project I made was edited in DW. It is a website for the Sparkella children's picture book series. The goal is to display the book content, user reviews, and provide a purchase function ina simple and attractive way for children and parents. The website consists of 7 main pages: the home page, the Books display page, the Testimonials user feedback page, three purchase pages Buy1 / Buy2 / Buy3, the Cart page (CART), and the overall jump structure.

Main page (index.html) :

The home page mainly consists of three books, a parent reading interface, author introductions and a bottom navigation. At first, I encountered the problem of misalignment between images and text in the layout. Later, I unified the vertical alignment of images and text by setting the relevant CSS code. Initially, the <button> element of the button could not jump normally. Eventually, it was modified to <a href> to switch between pages.

Book display page (Books.html)

The Books page displays all the covers of picture books and uses CSS Grid to achieve a neat layout. At first, the page was severely overflowed on mobile devices due to the use of a fixed width. Then, the size and position of the images were incorrect. I adjusted it by modifying the CSS. In addition, to avoid slow loading of images, all images are compressed and referenced locally.

User Testimonials page

This page adopts a card-style layout, displaying the user's avatar, evaluation content and identity. To enhance visual consistency, box-shadow and border-radius were used to beautify the cards. Initially, the spacing of the cards was inconsistent across different browsers. Later, the separation distances were clearly defined through gap and padding to maintain a uniform style. Ensure neat layout.

Purchase page (Buy1, Buy2, Buy3)

The three Buy pages have the same structure, respectively displaying different book covers, introductions and the "Add to Cart" button. The problems encountered during development include difficulty in alging text and images and excessive paragraph spacing. There were also issues such as inconsistent photo positions and large photo positions. These adjustments were made in CSS. Meanwhile, the "Buy" button uses a pseudo-class hover to provide click feedback, enhancing the user interaction experience.

Cart page

The Cart page is used to simulate the state of the shopping cart after adding products, including product images, names, prices, and delete buttons. Initially, when dealing with the layout of the delete button, there was a misalignment. I modified the CSS, but the page placed in the CSS might still contain the total checkout amount column. I used CSS to set a uniform font and alignment to enhance the overall aesthetic appeal.

Initially, using <button> to implement the jump was ineffective. It needs to be changed to <a href="xxx.html"> to implement the jump between HTML pages. Initially, separate navigation bars are written for each page. Later, the bottom navigation code is extracted as a unified template and copied and pasted to keep the button positions consistent and avoid jump errors. If you want to design several pages, design several html files and then correspond them respectively to the corresponding CSS

Through this development, not only has a visually consistent, functionally complete and interactively friendly multi-page static website been achieved, but also the application capabilities of HTML and CSS in structure, layout and responsive design have been enhanced. Although the project has a static structure, the page response speed is fast, the access experience is good, and it can be stably displayed on various devices. The project has achieved its expected goals.