Interactive design Final Project / Final Working Website
24.04.2025 - 27.06.2025 (Week 08 – Week 14)
ZHOU YUTONG / 0378676
GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media
Final Project / Final Working Website
TABLE OF CONTENT
I continued with task2's design concepts and designed the remaining three pages of the website design with a cute kids' style as the overall design concept.
Web design on figma
Illustrations used in the design processAdjust the adaption in the css file.
adaptive effect.
Code written in DW
Display of the page in the browser
Forms that can be entered interactively.
With the professor's guidance, he suggested that I change the illustration, but I couldn't find a more suitable image, so I still kept it, but the size of the image in the footer I changed to symmetrical
Image link
FEEDBACK
In terms of design, after I showed the first version to the professor, he was not very satisfied, so I added some details, such as long stripes to enrich the picture, and after getting the professor's approval I continued this style to continue the design
REFLECTION
In this “Penny Juice” website development project, I centered on the visual concept of cute children's style, from visual design, HTML structure writing, CSS responsive layout, interactive forms to the overall site integration, to complete a content-rich, clearly structured and adapted to the multi-device single-page display site.
I. Development Process
Development began with a visual design exploration on Figma, where I established the core visual language of the brand. I chose an upbeat color palette featuring bright pastels and playful illustrative elements to appeal to a younger audience and align with the brand's target market. Typography was standardized using the Bebas Neue font provided by Google Fonts, giving all pages a bold and friendly look.
The site structure was then converted to HTML using Adobe Dreamweaver.I modularized the site into six key sections/pages: Home, Products, About Us, Feedback, Contact, and Submit/Thanks. Each page uses a uniform navigation header and footer to ensure a consistent user experience.
During the actual coding process, I used Dreamweaver to write the HTML pages and clearly divided the structure into header, main content area and footer. The Bebas Neue font provided by Google Fonts was embedded on all pages to maintain a consistent brand style.
II.Challenges and Solutions
Responsive Layout Adaptation Issues
While tweaking the CSS, I realized that the original pixel layout based on the Figma design didn't adapt well to the different screen resolutions of the actual browsers. In particular, some images and text would overlap or scale abnormally when viewed on a cell phone.
Solution: I used the @media query mechanism and made targeted adjustments to image size, padding, font size, and other properties to achieve a more responsive fit.
Page Jumps and Navigation Uniformity Issues
When integrating the various pages, I realized that the top navigation bar had a link jumping failure or duplicate naming problem in some pages.
Solution: I unified the use of relative paths and copied and pasted the navigation bar module to the top of all HTML files to ensure consistent linking and jumping from page to page, and to enhance the user's browsing logic and smoothness.
Overly simple form interactions
Although contact.html and home.html contain a submit form, since this project is a static webpage and lacks a server backend, the data filled in by the user cannot be actually submitted and saved.
Workaround: I linked the submit button to submit.html and simulated the order completion experience with a clean and simple “Thank You” page to compensate for the actual functionality.
Inconsistent loading of image resources
Several pages relied on images to show the brand tone, however, the image sizes were inconsistent and some HD images loaded slowly, affecting the user experience.
Solution: I compressed and optimized the images to ensure that the loading speed was increased without losing image quality, and unified the image size to match the overall page layout.
III.Conclusion
The development of the Penny Juice website provided me with a comprehensive front-end development experience that deepened my skills in HTML, CSS, responsive design, and visual narrative. Each page was designed with uniformity and usability in mind. By tackling layout, visual, and interactivity challenges, I not only refined the site, but also improved the problem-solving process and adapted the design to a dynamic, multi-device platform.
Comments
Post a Comment