Interactive Design: Final Project - Final Working Website
11/06/2025 - 23/07/2025 / Week 8 - Week 14
Ye YingYing / 0364398
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
TABLE OF CONTENTS
INSTRUCTION
Report
This project involved the complete redesign and development of the official website for Sabah Chinese High School (SCHS). The goal was to build a fully functional, responsive, and modern website that reflects the school’s identity while improving the user experience (UX) and user interface (UI) across different devices. The final website consists of five key pages: Home, Alumni, Contact, Achievement, and a Development page. Each page is structured to serve both informative and navigational purposes, catering to students, parents, alumni, and the public.
The original SCHS website had major usability and visual design issues, including outdated appearance, poor content hierarchy, and unstructured layout. These problems guided the redesign direction. I created a layout that prioritized clarity, accessibility, and school branding. The color scheme uses the official school colors—blue and yellow—alongside neutral white and gray for better readability and contrast. Typography was carefully selected to establish hierarchy and professionalism. I used two main fonts, ensuring legibility across devices. Layouts were designed with consistent spacing, responsive containers, and visual groupings like cards and sections to make information easier to scan.
For my interactive final project, I need to develop a fully functional website based on the prototype I created for Task 2. The final website will consist of a minimum of five pages.
In Task 2, I already completed the 3 pages of prototype designs, which are the Home Page, Alumni Page, and Contact Page.
In Task 2, I already completed the 3 pages of prototype designs, which are the Home Page, Alumni Page, and Contact Page.
These pages serve as the foundation of my website structure and design system.
Moving forward, I roughly sketched out the drafts for the remaining two content pages, which are "School Profile Page" and "Vision & Mission Page" as well as a "Under Development" page, which will be used for sections that are not yet active.
During development, I referred closely to my prototype to ensure design consistency. I mainly used HTML and CSS, and also incorporated Bootstrap to help with components I wasn’t confident building from scratch — such as navigation bars, grids, and forms. Bootstrap made layout structuring easier and saved time in areas I found challenging.
The website was developed using HTML, CSS, and Bootstrap. I started by setting up a proper folder structure and organizing all images, icons, and fonts. I created separate .html and .css files for each page, making it easier to manage and debug the project.
To structure each page, I relied heavily on the container class from Bootstrap to center and wrap content neatly. Inside these containers, I built each section using flex layouts, which allowed me to align items horizontally or vertically using properties like justify-content, align-items, and gap. I also applied flex-wrap: wrap in areas like the alumni section to make sure content didn’t overflow on smaller screens. For consistent sizing, I used rem and em units as much as possible instead of fixed pixels. This allowed my layout and fonts to scale more smoothly, especially in responsive designs. I adjusted width manually for larger sections and limited the maximum width of text blocks for better readability. To control spacing, I used a combination of padding and margin. I learned that carefully applying outer margins helps prevent visual clutter, while inner padding ensures that content is not cramped inside boxes or buttons. These techniques played an important role in building a balanced and readable layout. Hover effects were applied throughout the website—for example, navigation items and buttons change color or background on hover, providing visual feedback and improving interactivity. I used transitions to make these effects smooth and less abrupt. The header was set to position: sticky; top: 0; so that navigation remains visible while scrolling. However, this caused several responsive issues—especially with flex layouts below the header—which required me to adjust padding and media queries manually.
The most difficult part was definitely making the website fully responsive. I used @media (max-width: 992px) to target tablet and mobile layouts. Even though I adjusted the flex direction from row to column, I still faced issues like misalignment, overlapping, and unexpected spacing. One key problem came from using a sticky header (position: sticky; top: 0), which caused layout shifts and required many manual adjustments in padding, margins, and section spacing to resolve.
Throughout the process, I made sure to test often using browser dev tools and different screen sizes. When I encountered issues I couldn’t solve, I searched for solutions online and also asked for help from friends who study computer science. This helped me better understand the logic behind certain layout behaviors and improved my coding step by step.
Although the process was full of trial and error, building the site from section containers to responsive layout, hover interactions, and unit scaling taught me a lot and helped me develop a deeper understanding of front-end structure and styling.
Header
I used Bootstrap classes like container-fluid, d-flex, justify-content-between, and align-items-center so that the logo is on the left, and the menu is on the right, and everything inside is vertically centered, and it also fits any screen size.
The logo is an <a> tag with an <img> inside, so clicking it will go back to the homepage.
I have a <ul> navigation list. Each <li> is a menu item. Some link directly to a page, and some are dropdown menus, like About, Leadership, and Board. I used custom-dropdown so the submenu only shows when hovering (using display: none → display: block).
For the CSS Style, I referred back to my Figma prototype, and used the same color, typeface, and others. I also applied Hover Effect to enhance interaction.
For the footer, I tried to make it exactly the same as my Figma prototype, which is clean, organized, and easy to read. I divided it into different sections, which are logo and address, school information, quick links, and office hours, so visitors can quickly find what they need. And the dark blue background (#2E3192) with light text colors to make the content stand out, and I highlighted section titles with a gold color (#ffcc66).
The layout is built using flex so each section can sit side-by-side on bigger screens but also wrap into multiple rows if the screen is smaller. I gave each section its own padding so the content doesn’t feel squeezed, and I used gap to add space between columns. The logo box has a fixed width so it stays balanced with the other sections, and I kept all widths in rem or % to make it more responsive.
For links, I kept the font light and clean but added a hover effect that changes the color to red to make it feel interactive. I used flex-direction: column for the link lists so they stack neatly, and I aligned them to the left for readability. The office hours are in a simple <p> with padding and gap for spacing.
At the very bottom, I added a copyright/credit line centered on the page. This section has extra padding on top so it’s visually separated from the main content of the footer.
Footer
The layout is built using flex so each section can sit side-by-side on bigger screens but also wrap into multiple rows if the screen is smaller. I gave each section its own padding so the content doesn’t feel squeezed, and I used gap to add space between columns. The logo box has a fixed width so it stays balanced with the other sections, and I kept all widths in rem or % to make it more responsive.
For links, I kept the font light and clean but added a hover effect that changes the color to red to make it feel interactive. I used flex-direction: column for the link lists so they stack neatly, and I aligned them to the left for readability. The office hours are in a simple <p> with padding and gap for spacing.
At the very bottom, I added a copyright/credit line centered on the page. This section has extra padding on top so it’s visually separated from the main content of the footer.
Home page
Welcome Background
This part shows a full-width image at the top of the homepage. It’s like a banner to greet visitors.
CSS:
CSS:
- .welcomebackground sets the image to take 100% of the screen width, no extra padding.
- .welcomebackground img uses width: 100% and height: auto so the picture scales well on different screen sizes.
Cylinder Menu
This is a horizontal menu that contains quick links to Teacher Recruitment, Student Admissions, and Study Abroad Guide.
Latest News – clickable links to news articles.
Upcoming Events – a list of important dates.
Campus Announcements – important notices.
CSS:
- a:hover changes the link color to red for interaction feedback.
- .news uses display: flex with gap: 30px to place the three boxes side by side.
- .viewmore is positioned absolutely at the bottom right inside each box so it’s always in the same place.
This section introduces the school with a picture of the building on one side and text on the other. There’s also a “Learn More” link for visitors to explore further.
CSS:
- .abouttheschoolbox uses display: flex with justify-content: space-between so the image and text sit side by side.
- .aboutcontentbox has text-align: justify to keep the text edges neat.
This section highlights two main academic strengths of the school, each in its own box with text, an image, and a “View Details” link.
CSS:
- .academiccontentbox uses display: flex with gap so the two boxes are evenly spaced. And flex-wrap: wrap makes them stack on smaller screens.
- .academiccontent1box and .academiccontent2box has a max-width so they don’t get too wide
- Links change color when hovered to give user feedback.
This section displays a map of the campus with pins showing different locations. Hovering over an pin shows a label.
CSS:
- .hover-icon is positioned absolutely over the map so it stays in the right location.
This section is a photo carousel showing different scenes of school life.
CSS:
- .lifebox uses overflow: hidden so images don’t spill outside the container.
- Images in .carousel-item img use width: 100% and height: auto so they scale correctly and keep their aspect ratio.
Alumni page
This section introduces the Alumni Affairs Office. On the left, are the key member from the office. On the right is a short description. This layout helps visitors know where to find alumni-related services and how to get more information.
CSS:
- .alumniaffairsbox uses display: flex to place the left & right content side by side.
- .alumniaffairsimage img is responsive (width: 100%; height: auto;) and has rounded corners.=
- A container (e.g., .stafflist) uses display: flex or display: grid so that member cards line up neatly, wrapping automatically on smaller screens.
- Member titles are inside a text element (<p> or <span>) with text-align: center, so the title sits directly under the photo.
This section encourages alumni and visitors to support the school.
CSS:
- The main wrapper (e.g., .supportschsbox) uses display: flex to arrange its child elements horizontally.
- The left column (image container) takes up about half the available width, often using width: 50% or flex: 1.
- The right column (text container) also takes about half the width, with padding on the left or right to keep the text away from the image.
This section encourages visitors to contribute or participate in supporting the school. The layout is designed to have one main block of content centered in the page, making it easy to focus on the message.
CSS:
Left Content (Contact Form)
This section is the left half of the page and contains the “Contact Us” title, a short description, and the input form. Each form field (Full Name, Email Address, Subject, Message) is wrapped in a .form-group for consistent spacing and label animation. The submit button is placed inside .submit-box so it aligns to the right.
CSS:
Right Content
The right side of the page contains all the school’s contact details, including phone number, email, social network, and physical address. The first part (.first-level) arranges Call Center, Email, and Social Network side-by-side in columns. The second part (.second-level) shows the school’s location with a clickable Google Maps link and an image of the map. This layout allows visitors to quickly find any way to contact or locate the school.
CSS:
School Profile
This section displays the school’s profile with an image on the left and descriptive text on the right.
CSS:
This section introduces the school’s emblem and flag, each with an image and explanation, arranged in two equal columns.
CSS:
This section presents the school’s vision, mission, and strategic plan in a structured two-part layout:
This section is a placeholder page for a feature or part of the site still in development.
.underdevelop contains an image ("Under Development" banner) and a Home button linking back to the index page.
The button is wrapped in an <a> tag so clicking it navigates to the homepage.
CSS:
This final project was quite difficult and challenging for me, especially at the beginning. Every step felt confusing — from setting up the files to figuring out the layout and how to start coding each page. I often felt stuck and unsure of what to do next.
The most frustrating part was making the website responsive. Making sure everything worked well on different screen sizes gave me a lot of headaches. However, as I continued, I slowly got more familiar with the process. Things started to make more sense, and I became more confident in what I was doing.
In the end, even though it was tough, I felt very satisfied and proud to see the final website working. It gave me a real sense of achievement.
- The container (e.g., .yoursupportmattersbox) is set with width: 100% so it spans the page, but the inner content uses max-width or margin: 0 auto to keep it centered.
- Paragraph text has line-height for readability and margin-bottom to separate it from the next element.
Contact page
This section is the left half of the page and contains the “Contact Us” title, a short description, and the input form. Each form field (Full Name, Email Address, Subject, Message) is wrapped in a .form-group for consistent spacing and label animation. The submit button is placed inside .submit-box so it aligns to the right.
CSS:
- .main uses display: flex; flex-direction: row; to create a two-column layout.
- .left-content is given width: 45% and padding on both sides to make it narrower than the right side.
- .form-group uses position: relative; so the label can be absolutely positioned over the input.
- Labels move up and shrink in font size when the input is focused or filled, thanks to the input:focus ~ label and input:valid ~ label selectors.
- .submit-box uses display: flex; justify-content: flex-end; to push the submit button to the right. The .submit class styles the button with a pill shape, background color, and hover effect.
Right Content
The right side of the page contains all the school’s contact details, including phone number, email, social network, and physical address. The first part (.first-level) arranges Call Center, Email, and Social Network side-by-side in columns. The second part (.second-level) shows the school’s location with a clickable Google Maps link and an image of the map. This layout allows visitors to quickly find any way to contact or locate the school.
CSS:
- .main uses display: flex so .right-content naturally sits beside .left-content.
- Inside .right-content, .first-level is set to display: flex; flex-direction: row; with a gap between each contact method, making them spread out evenly in a row.
- .second-level contains the .location section, which is also flex-direction: column; so the label, address link, and map image stack vertically.
This section displays the school’s profile with an image on the left and descriptive text on the right.
CSS:
- .school-profilebox uses display: flex with flex-direction: row to arrange the image and text side by side.
- justify-content: space-between pushes the image to the left and text to the right with space in between.
This section introduces the school’s emblem and flag, each with an image and explanation, arranged in two equal columns.
CSS:
- .identity-content uses display: flex with flex-direction: row to place the emblem on the left and flag on the right.
- .left-identity and .right-identity use flex: 1 so both take equal space.
- Inside each column, flex-direction: column stacks the image above the text.
School Policy
This section lists the school’s policies with the text on the left and an image on the right.
CSS:
This section lists the school’s policies with the text on the left and an image on the right.
CSS:
- .policy-content uses display: flex and flex-direction: row-reverse to reverse the normal order, placing the image on the right and text on the left.
- .policy-content ol sets width: 45% so text doesn’t take up the entire row, keeping balance with the image.
Vision & Mission page
- The top row contains Vision (left) and Mission (right) in two equal columns.
- The bottom row displays Strategic Plan in a single full-width box.
- .main-cotent uses display: flex with flex-direction: column to stack the top-row and right-content vertically, with gap: 2rem spacing between them.
- .top-row uses display: flex and gap: 4rem to place Vision and Mission side by side with space between.
- Mission (.left-bottom-content ol) and Strategic Plan (.right-content ol) use list-style-type: decimal for numbered points, with padding-left: 2rem to indent the numbers.
.underdevelop contains an image ("Under Development" banner) and a Home button linking back to the index page.
The button is wrapped in an <a> tag so clicking it navigates to the homepage.
CSS:
- .main is a vertically stacked flex container (flex-direction: column) centered horizontally and with text-align: center.
- .underdevelop uses position: relative so the button can be absolutely positioned on top of the image.
- .underdevelop img is set to width: 100% and display: block to make it scale to the container width without inline gaps.
.main button:
- position: absolute positions it relative to .underdevelop.
- top: 75% and left: 50% place it near the bottom center of the image.
Responsive Design
Across all pages, responsive behavior is implemented using CSS media queries targeting screen widths of 992px @media (max-width: 992px)- Layout Direction Changes – Flex containers that are horizontal on desktop (flex-direction: row) are switched to vertical (flex-direction: column) to stack elements for narrow screens.
- Spacing Adjustments – Padding and margins are modified to fit content comfortably without overflow, ensuring good readability.
- Style Overrides – !important is used selectively to ensure responsive styles take priority over desktop rules.
REFLECTION
The most frustrating part was making the website responsive. Making sure everything worked well on different screen sizes gave me a lot of headaches. However, as I continued, I slowly got more familiar with the process. Things started to make more sense, and I became more confident in what I was doing.
In the end, even though it was tough, I felt very satisfied and proud to see the final website working. It gave me a real sense of achievement.
Comments
Post a Comment