Interactive Design - Final Project

日期：

 26/11/2025 - 4 /1/2026 / week 11- week14 

YANG SHUO / 0384037

Bachelor of Design (Hons) in Creative Media

Interactive Design / Final Project

LIST


EXERCISE

1. Instruction

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.

Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.

Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).

Core Features:

Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.

Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.

Technical Considerations:

Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.

Final Testing and Deployment:

Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.

Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.

2. Project Overview

This website is a redesign concept for Penny Juice, positioned as a child-friendly and fresh fruit concentrate brand. The structure follows a clear flow: “Brand introduction, Product highlights, Recipe guidance, Contact and ordering” so users can quickly access key information.

Website Pages 
  • Home
  • About Us (Discover Freshness/Social Media)
  • Products(Popular Picks/Best Sellers)
  • Recipes
  • Contact
3. Visual References

Before designing, I searched for similar websites as references. I focused on clear hierarchy, scannable product cards, bright but controlled color usage, and an interface style that works for both children and parents.

I found a website with a whimsical, childlike style as a reference. It is a personal website introducing Disney cartoon characters Duffy Family.


Fig1.1-1.3 Screenshot of the reference website


4. Moodboard

Typography （fonts）
I chose a friendly and highly readable typography direction to keep the tone playful while still looking clean and professional.

The website primarily uses Open Sans for the main text, Faustina for subtitles, and decorative fonts are Short Stack and Delius Swash Caps.

Fig 1.4 Fonts


Color Matching
The color strategy aims to feel fresh, bright, and clean. The primary colors build brand identity, while accent colors are used for buttons and key actions to improve scanability.
  • Primary ：Light orange 【 #FAEDCD】
  • Accent ：blue【#A3D1CC】
  • Neutral： Light blue【#E1FCF6】/Cream【#F7F7EA】/Light orange【#FAEDCD】

Fig 1.5 Color Platte


5. Coding Process

1. Pages Introduction
Home Page
The Home page follows a clear structure with two main parts:

a top navigation bar (logo + main navigation), and a content area that starts with a visually strong hero banner, followed by three “trust / value” sections. Each section includes an image, a heading, short supporting text, and a “Learn More” button to guide users to deeper pages. The reading flow moves from “first impression” to “key selling points,” building trust before encouraging users to explore About or Products.

Key Module Description
  • Header / Navigation: The logo and brand name appear on the left, while the main navigation links (Home / About Us / Products / Recipes / Contact) are placed on the right. The layout is low-density and scannable, helping users find key pages quickly.
  • Hero Banner: A three-image collage creates a lifestyle-oriented mood. The main slogan is placed in a semi-transparent overlay, which keeps the text readable while maintaining strong visual impact.
  • Three value sections: Each section uses a consistent “image + text + button” structure, while the image position alternates left/right across sections to avoid repetitive scrolling and to keep the layout visually engaging.


Fig 1.6 Home Page


Overall, I treated the Home page as a guided entry point: the hero builds the first brand impression, the three value sections add credibility step by step, and the CTA buttons lead users into deeper pages, creating a complete browsing journey.


About Us Page
The About Us page mainly explains “who the brand is, why it is trustworthy, and how the product can be used.” The reading flow is straightforward:
  • A fruit-themed hero banner at the top, with the short slogan “Discover freshness.” to set the tone;
  • A main content area in the middle: a large brand-introduction card on the left (a strong value statement, a short brand paragraph, and a product-related image), plus a short tagline emphasizing convenience (e.g., no refrigeration needed);
  • A Ways to enjoy section below, using a ticked checklist to provide practical usage ideas;
  • A right sidebar that contains credibility blocks (family-owned background, founding year, industry experience), social media prompts, and small content previews (e.g., recipe preview cards), so this page guides users beyond just reading.

Key Module Description
  • Hero banner: The fruit background with a centered text block immediately communicates a “fresh, fruity, healthy” mood.
  • Core value statement (orange highlight card): A large headline summarizes key selling points (100% real fruit / no sugar added / no fridge needed), functioning as the brand’s one-sentence positioning.
  • Brand paragraph + supporting image: The explanatory paragraph adds context, and the product/fruit imagery supports credibility—creating a “message + proof” combination.
  • Ways to enjoy: A checklist format turns usage ideas into actionable guidance, so users do not need to guess how the product can be used.
  • Right sidebar (info + navigation): Multiple small cards deliver brand background and also guide users toward social media and recipe-related content (e.g., preview cards like Grapefruit soda and Kiwi coconut water).

Fig 1.7 About Us Page

Overall, I designed the About page as a “brand guide”: the upper section states key selling points clearly, the middle adds credibility through visuals and concise copy, the lower section translates the product into real use cases, and the sidebar guides users to explore more content.


Products Pages – Popular Picks & Best Sellers

For the Products section, I built two pages: Popular  Picks and Best Sellers. They share the same structure: a fruit-collage banner on top (with the title on a semi-transparent label, so it stays readable), followed by a product card area. Each card uses a simple “bottle image + flavor name + one-line description” format, so users can understand the vibe of each flavor without clicking deeper. There is also an Order Now button at the bottom-right, which stays easy to access while browsing.
  • Top navigation: Same site-wide header for switching between pages easily.
  • Banner/title area: Fruit collage background + semi-transparent title label to clearly state the page (Popular or Best Sellers).
  • Product card grid (main content): A consistent card pattern—product image (bottle), flavor name, and one short line; Popular shows 6 flavors, Best Sellers shows 3.
  • Order Now button: A quick ordering entry at the bottom-right, so users can act anytime while browsing.

Fig 1.8 Popular Picks Page

Fig 1.9 Best sellers Page

These two pages are meant to be straightforward: users come in to browse flavors, compare quickly, and decide whether to order. Popular provides variety, while Best Sellers feels like a curated shortlist. Since both pages share the same card system and visual style, the experience stays consistent and easy to follow.


Recipes Page
I designed the Recipes page to feel like a simple directory. On the left, there is a recipe list (Grapefruit Flavored Soda / Kiwi with Coconut Water / Mango Slush / Strawberry Yogurt). On the right, the matching recipe sections are displayed as content cards. Users can click a recipe name on the left and jump directly to the correct section on the right, instead of scrolling and searching. Each recipe block follows the same pattern: an image, a clear title, and a short paragraph—so it stays easy to read.

Key Module Description
    • Top navigation: Same site-wide nav for quick switching between pages.
    • Left recipe list: A 4-item directory for quick access (click to jump to the recipe).
    • Right content area: Each recipe uses the same layout: image + title + short description, keeping reading consistent.

    Fig 1.10 Recipes Page

    For the Recipes page, my main goal was to make it easy to find and easy to read. The left directory helps users locate a recipe fast, and the right-side content cards keep a consistent reading pattern. It’s basically “choose on the left, read on the right,” with less unnecessary scrolling.


    Contact Page
    I treated the Contact page as the “final step” page. After users browse the brand and products, they can contact the company or place an order here. It’s not meant to be flashy—just clear and easy to fill in.

    Key Module Description
        • Top nav + banner image: Keeps the same site style and visual consistency.
        • Contact info block: Company details (address, email, phone, etc.) are placed near the top for quick access.
        • Order form: A centered form with fields arranged in a realistic order flow (name, email, address, city/state, postcode, phone, order message).
        • Pricing/order notes: Extra ordering details below the form so users can confirm terms right away.
        Fig 1.11 Contact Page



        2.Challenges

        Challenge 1: The copyright footer ended up inside the sidebar

        On my About page, the copyright text was supposed to stay at the bottom as a normal footer. However, it suddenly appeared inside the sidebar area, which made the layout look broken and confusing. At first it looked like a CSS problem (maybe the sidebar was floating or overlapping), but the real issue was more basic.

        Fix: This usually happens when the HTML structure is not properly closed. If a wrapper div or the <aside> tag is missing a closing tag, the browser will try to “auto-fix” the structure, and it may accidentally nest the footer inside the sidebar container. I solved it by checking the page layout section carefully, making sure every wrapper opened and closed correctly, especially around .page-content-wrapper, .main-content, and <aside class="sidebar">. I also ensured the footer section is placed outside the main layout container so it cannot be pulled into the sidebar accidentally. After correcting the HTML structure, the footer returned to the correct position at the bottom.


        Challenge 2: Mobile navigation was unclear and hard to tap (sometimes overflowing)

        The navigation looked fine on desktop, but on mobile it became crowded very quickly. The text felt tight, some items looked like they might overflow, and the spacing between links was too small. This also made it harder to tap accurately, especially for longer labels like “CONTACT” or dropdown items under “PRODUCTS”. Even when the menu technically “fit,” it still didn’t feel comfortable to use.

        Fig 1.12-13 Layout before adjustment: overlap and confusion


        Fix: I treated mobile navigation as a different layout instead of shrinking the desktop menu. My goal became: readable text + clear structure + easy tapping. I adjusted the responsive CSS so the nav items don’t fight for horizontal space. I used a more mobile-friendly layout (two-column or stacked layout depending on screen width), increased padding so each link feels like a button, and allowed text to wrap instead of forcing everything into one line. I also reduced the font size slightly, but I prioritized spacing and tap targets over making the text smaller. After these changes, the menu became much easier to read and click on mobile, and it looked more intentional instead of “squeezed.”


        Fig 1.14 Mobile navigation bar layout after adjustment
         


        Fig 1.15-16 Responsive design in CSS



        Challenge 3: Fonts looked correct in local preview but were wrong after deployment (only on one page)

        This was the most confusing issue because everything looked correct in Dreamweaver preview, but after deploying to Netlify, one page suddenly showed fallback fonts. It looked like the page “didn’t apply typography,” even though the CSS and Google Fonts links were present in my local file. The strange part was that it only happened on one page, not the whole site, which made it harder to diagnose.

        To troubleshoot, I searched on the Interact and opened the deployed page and used the browser developer tools:
        1. I pressed F12 to open DevTools.
        2. I went to the Network tab and refreshed the page.
        3. I tried to search for the font requests (Google Fonts) to see whether the browser was loading the font files correctly.
        4. I also checked whether the CSS files were loading (to confirm the page was not missing styles completely).
        5. This helped me separate two possibilities: either the page was failing to load fonts online, or the deployed page was not the same file I was previewing locally.


        Fig 1.17 Incorrect font 'Popular Juice Picks'

        Fig 1.18 Correct font 'Popular Juice Picks'


        Fig 1.19 Screenshot of the inspection process

        Fix: The real cause was not CSS at all—it was a file/version mistake. I accidentally saved duplicate files with the same name, so I had more than one version of the same page. During deployment, I selected the wrong path/version, meaning Netlify published a different copy from the one I was editing and previewing locally. As a result, the deployed page did not match my local preview file, and it used different or missing font settings. To fix it, I cleaned up the project folder by removing or renaming duplicate files, made sure each page had one clear, unique version, and double-checked the correct project directory before deploying again. After redeploying the correct version, the fonts displayed normally. This taught me that deployment problems can look like styling bugs, but sometimes the problem is simply publishing the wrong file.



        3. Process Summary

        I built the Penny Juice website page by page in Dreamweaver, starting with a shared base layout so every page stayed consistent. I set up the header/logo area, the navigation (including dropdown menus), a hero section, and the bottom footer, then reused the same structure across About, Products (Popular/Bestsellers), Recipes, and Contact.

        For styling, I used a global style.css to control common elements such as the header, navigation, hero, and footer. Then I created separate page CSS files (for example, about.css and popular.css) to handle layouts that only appear on specific pages, such as the About sidebar, content blocks, and product card grids.

        After the main pages were working, I focused on layout refinement and responsiveness. I adjusted spacing, alignment, and grid/flex behavior to keep the design clean, and I spent extra time improving the mobile navigation so items would not overflow and links would be easier to tap on a small screen.

        I also built an order form section using CSS grid. The goal was to place most input fields into two columns, while keeping the large “Order” text area full-width at the bottom. This required checking which selectors were actually applied and making sure the grid rules were not being overridden by other CSS.

        Near the end, I deployed the site to Netlify and compared the live version with my local preview. When something looked different online, I used browser DevTools (F12 → Network) to confirm whether the CSS and font resources were loading. This helped me identify real causes, such as an HTML structure issue that pushed the footer into the sidebar, and a deployment mistake where I had duplicate files with the same name and accidentally deployed the wrong path/version.

        REFLECTIONS

        Strengths

        I think my biggest strength in this task was problem-solving. When the layout broke (like the copyright sliding into the sidebar), I didn’t just keep tweaking random CSS. I went back to the HTML structure, checked my wrappers, and fixed the missing closing tags. I also spent time improving the mobile navigation so it didn’t feel cramped and the buttons were easier to tap.

        Weaknesses

        One weakness is that I sometimes rely too much on trial and error when I’m stressed. The font issue took me a while because the preview looked fine, so I kept thinking it was a styling problem. Another weakness was file management. I accidentally saved duplicate files with the same name, then deployed the wrong one, which created a problem that wasn’t even related to the code itself.

        Reflection

        At the beginning, I thought this task was mainly about making the pages look consistent. But while working on it, I realised web development is also about being careful and systematic. Small issues like missing tags, messy file versions, or inconsistent page setups can cause problems that only show up later. This task reminded me to slow down, check things step by step, and keep my project files organised so the final website matches what I intended.



        评论

        发表评论