Interactive Design - Project 3: Final Working Website
24/06/2025 - 27/07/2025 (Week 10 - Week 14)
Chang Wing / 0367807
Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
Project 3: Final Working Website
TABLE OF CONTENTS
1. Lectures
LECTURES
Week 10
Home Page
- The homepage must be named index.html; otherwise, accessing the site may result in a 404 error, other pages can be named freely, such as about.html
- All image files should have a maximum resolution of 72 DPI and be saved in JPG format
Figure 1.1 Coded homepage
Figure 1.2 HTML Coding
Figure 1.3 CSS Coding
unless the styles:
-Naturally inherit (like font-family, color)
-Or you explicitly target the child elements
Figure 1.4 HTML Coding
Figure 1.5 CSS Coding
img {
width: 17rem;
max-width: 100%;
}
and
img {
width: 100%;
max-width: 17rem;
}
Figure 1.6 ChatGPT's answer
justify-content VS align-items
- Main axis vs cross axis
justify-content → aligns items along the main axis (horizontal if flex-direction: row, vertical if flex-direction: column).
align-items → aligns items along the cross axis (perpendicular to the main axis).
align-items → aligns items along the cross axis (perpendicular to the main axis).
Figure 1.7 Example
INSTRUCTIONS
Project 3: Final Working Website
Required to turn previously designed prototype into a fully functional, polished website. The final product should reflect the design choices and demonstrate understanding of web development, UX, and accessibility.
Required to turn previously designed prototype into a fully functional, polished website. The final product should reflect the design choices and demonstrate understanding of web development, 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.
Project 3: Final Working Website
Recap
Redesigning website for: Kumon North America
Figure 2.1 Task 1 - Website Redesign Proposal (Final) (PDF)
Task 2 Prototype Link: https://www.figma.com/proto/6iXxlCqKyuzTO1nZxPphG4?node-id=0-1&t=FXBUGbUypU5dS4Qn-6
Figure 2.2 Task 2 Figma Prototype Final Layouts
Process
I translated the font system developed earlier on in Figma into reusable CSS code.
Figure 2.3 Font System
Figure 2.4 Figma Dev mode
In Figma, I use a frame rather than a group because makes it easier to obtain accurate spacing values, as frames allow direct measurement relative to their boundaries
Figure 2.5 Button frame
Home Page
Figure 2.6 Attempt to trace the background layout
Once the overall layout was set up, I began creating individual sections for the webpage. The first was the hero section, which introduces the core message of the site with a headline, subtext, and a call-to-action button.
The homepage hero section is divided into two main parts:
- .hero for all textual content
- .hero-image for the visual element on the right
Here's the HTML and CSS code made:
Figure 2.7 Hero Section HTML
Figure 2.8 Hero Section CSS
Once the section structure was complete and responsive, I replicated the same layout logic for the remaining sections that has similar structure, changing only the content and adjusting positions or image sizes as needed.
As part of designing a more dynamic user interface for a tuition, I wanted to include a card carousel, a horizontally scrollable section that displays cards, complete with arrows and dot indicators. Initially, I thought it would be a purely HTML/CSS solution but soon I realised that features like scroll behavior, arrow visibility and dot navigation requires JavaScript.
I started by laying out the carousel with HTML. It consists of:
- A container (.slider-wrapper) holding the arrow buttons and scrollable card list
- The card slider (.card-slider), where each .card is a flex item
- A set of dot indicators (.slider-dots) representing different scroll pages
Figure 2.9 Card Carousel HTML
Figure 2.10 Card Carousel Javascript
The Javascript added several features for the carousel:
1. Scrolling on Arrow Click
The scrollSlider() function enables horizontal movement when either arrow is clicked. It calculates the width of a single card along with any gap between cards, then scrolls the container accordingly, ensuring each click aligns perfectly with the next card.
2. Smart Arrow Visibility
The updateArrows() function enables the left arrow disappears when the user reaches the beginning of the slider and the right arrow is hidden when the user scrolls to the end. This feature prevent unnecessary navigation and keeps the interface clean.
3. Responsive Dot Indicator
Dot indicators update based on scroll position. As the user navigates through the cards, the function calculates which section is in view and highlights the corresponding dot, letting users know where they are and how many sections remain.
Then, I styled my card carousel with CSS code:
Figure 2.11 Card Carousel before styling
Figure 2.12 Card Carousel after styling
To ensure that the image maintains its original proportion but shrinks smoothly based on screen size, I made two key changes, one to the image itself and one to the image container:
1. Changed the image’s width and height values:
Before (In CSS):
.hero-image img {
width: 39.3125rem;
height: 39.3125rem;
}
After (In CSS):
.hero-image img {
width: 100%;
max-width: 39.3125rem;
height: auto;
display: block;
}
- width: 100%; makes the image take up the full width of its parent container.
- max-width: 39.3125rem; ensures it never exceeds its intended size on large screens.
- height: auto; keeps the original aspect ratio as the image resizes.
- display: block; eliminates unwanted bottom spacing caused by inline images.
2. Added a wrapping container with responsive constraints:
Added (In CSS):
.hero-image {
width: 39.3125rem;
max-width: 100%;
flex-shrink: 1;
}
- width: 39.3125rem; defines the image’s default size on desktop.
- max-width: 100%; allows the container to scale down on smaller screens.
- flex-shrink: 1; ensures that the container can reduce in width if needed inside a flexbox layout.
Added flex-shrink: 1; to the other containers (e.g., text containers) as well.
Figure 2.14 CSS code (Before)
Figure 2.15 CSS code (After)
This allows the root font size to shrink slightly on smaller screens (down to 14px) and grow fluidly with the viewport width, while capping at 16px on larger screens. All rem-based typography throughout the site now scales proportionately (Figure 1.15).
Figure 2.16 Image and text do not shrink based on screen size (Before)
Figure 2.17 Image and text shrinks based on screen size (After)
I made sure to include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the <head> of all the pages' HTML to ensure that the website displays correctly on all screen sizes as this tag allows the page to scale according to the device’s screen width. Without it, the layout appeared zoomed out or off-centered on mobile devices and when deployed on Netlify.
Figure 2.18 Using the viewport meta tag to control layout on mobile browsers
Figure 2.19 Cursor before hovering over button
Figure 2.20 Cursor change to pointer after hovering over button
About Us Page
Due to the complex spacings, coding the Kumon milestone timeline was nearly impractical. Instead, I designed the timeline layout in Figma, exported it as an SVG, and embedded it directly into the website.
Figure 2.21 Kumon's milestone layout design completed in figma
Careers Page
Due to time constraints, I decided not to include the Careers page, as it holds less priority compared to the main tuition enrolment sections. Since the requirement was to complete a minimum of five pages, I focused on the core pages that contribute more directly to the site's primary purpose.
Contact Us Page
Figure 2.22 Originally proposed drop down menu
Figure 2.23 Native style drop down menu in the final working website
Figure 2.24 Contact form not scaling in mobile view
After asking chatgpt to review my code, the problem turned out to be a the max-width value that was originally set for desktop layout. Even though I was updating the width in mobile view, this max-width was still limiting how wide the form could actually grow:
Figure 2.25 ChatGPT review of the CSS issue
To fix this, I added max-width: none; to remove the constraint and allows the contact form to stretch across width of the screen on smaller devices:
Figure 2.26 Addition of 'max-width: non;' to CSS mobile media enquiry
Figure 2.27 Final responsive layout with properly scaled contact form
Book Free Assessment Page
I originally wanted to build a search bar that could suggest the nearest Kumon centre based on where the users are, but it turned out to be more complicated to execute than expected. The official Kumon North America site doesn't provide a public list of all centre coordinates, and implementing a proper nearest-location feature would require using services like the Google Maps Places API. This API needs a billing-enabled account to access essential features like autocomplete and geolocation-based suggestions. Since it involves setting up a free trial with credit card details, I decided not to proceed with that direction. Instead, I built a simplified version using Google Maps that allows users to manually search for locations.
Figure 2.28 Initial plan for nearest location finder
Figure 2.29 Final Find Nearest Centre section
When users enter their address into the search bar and click ‘Search’, they’ll be redirected to Google Maps to complete their search there.
Figure 2.30 Nearest location search bar
Working Process (Sped Up Snippets)
Figure 2.31 Programs Page: Kumon Reading & Math section working process (Snippet)
Figure 2.32 About Us page working process (Snippet)
Final Working Website
Netlify Link: wing-final.netlify.app
Google Drive Link:
Figure 3.1 Redesigned Kumon Website
FEEDBACK
Project 3: Final Working Website
Week 10 (24/06/2025)
Feedback: -
Week 11 (01/07/2025)
Feedback: -
Week 12 (08/07/2025)
Feedback: -
Week 13 (15/07/2025)
Feedback: -
Week 14 (22/07/2025)
Feedback: -
REFLECTION
While working on this project, time limitations and my lack of coding experience were definitely the biggest challenges. One of the main hurdles I faced was dealing with JavaScript. Since it wasn't covered in this module, I struggled to fully understand how it worked. Due to the tight timeline, I didn’t have the opportunity to properly learn it on my own, and ended up spending most of my time troubleshooting display issues without knowing exactly what caused them.
That said, this project turned out to be incredibly valuable. Building a functioning website helped me become much more comfortable with HTML and CSS in a short period of time. Moving forward, I aim to deepen my coding knowledge, especially in JavaScript, Python, CSS, and HTML. I believe these skills will be essential as I continue pursuing my goal of becoming a professional UI/UX designer
-03.png)
Comments
Post a Comment