Interactive Design / FINAL PROJECT: Final Working Website
Daphne Lai Yu Cheng / 0366380
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
- Lectures
- Instructions
- Final Project: Final Working Website (PROCESS)
- Final Project: Final Working Website (LINKS)
- Feedback
- Reflection
LECTURES
Week 10 (24/6/2025):
_ID%2520(SEM%25202)_Layout%2520Tutorial_index.html.png)
Figure 1.1 Basic Website Layout: Desktop Version (24/6/2025)
Figure 1.2 Basic Website Layout: Mobile Version (24/6/2025)
Below are the HTML and CSS codes used for the website layout:
Figure 1.3 HTML Codes (24/6/2025)
Figure 1.4 CSS Codes (24/6/2025)
- Always name your file index.html to avoid unwanted errors.
- Tutorial on how to upload final project to Netlify.
Week 11 (1/7/2025)
For week 11, we were to start/continue on our final project in class.
Week 12-14 (8, 15, 22/7/2025)
Final Project Consultation.
Final Project: Final Working Website (24/6/2025)
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.
Submission:
A live URL to the fully functional website. A brief report
(800–1,000 words) documenting the development process, any
challenges faced, and how they were overcome in your E-Portfolio,
and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to
public).
Recap
Website to redesign: Bandar Utama Buddhist Society (BUBS)
A proposal and prototype was created for the redesign of my chosen website. View the proposal in TASK 1 & the prototype in TASK 2.
HTML & CSS Setup in Adobe Dreamweaver
I begin by creating a folder then setting up the 5 HTML files in Adobe Dreamweaver and store them in the folder. I named my HTML files according to the 5 pages I want to code to avoid confusion.
- account.html
- index.html
- about.html
- activities.html
- contact.html
Figure 2.1 HTML & CSS Setup in Adobe Dreamweaver (1/7/2025)
After setting them up, I proceeded to go to Google Fonts to embed Poppins font into my HTML:
Figure 2.2 Embedding Poppins Font HTML Code (1/7/2025)
Navigation Bar
.png)
Figure 2.3 Navigation Bar (1/7/2025)
Figure 2.4 Navigation Bar HTML Code (1/7/2025)
For the drop down menu, I had trouble coding it so I referred back to the drop down menu I did during class. I used <div class="dropdown"> then <div class="dropdown-content"> and put the labels for the drop down menu.
Figure 2.5 Navigation Bar CSS Code (1/7/2025)
I used .aside-left to keep the BUBS logo on the left then used .aside-right for the navigation labels to stay on the right side.
I used display: block; for the drop down menu to drop down vertically with order.
Footer
.png)
Figure 2.6 Footer (1/7/2025)
To ensure the consistency of social media icons and arrows, I did image trace of social media icons and used pen tool for the arrows in Adobe Illustrator then convert them to PNG. I also used them previously in Project 2.
%20%203_8_2025%202_54_01%20PM.png)
Figure 2.7 Social Media Icons & Arrows in Adobe Illustrator (1/7/2025)
Social Media Icons
Figure 2.8 Social Media Icons (1/7/2025)
The social media icons were created in Adobe Illustrator and converted into PNG. They change colours when hovered so it will not look confusing to users. This was tricky because it required JavaScript to make it functional.
The icons were aligned to left and using display: flex;.
Footer Links
Figure 2.9 Footer Links (1/7/2025)
The footer links are underlined when hovered by the cursor, I applied <a href="html"> to direct users back to the top of the page they selected, e.g. Home.
Back to Top
Figure 2.10 Back to Top Button (1/7/2025)
I repeated the same process of social media icons for the back to top button because it is also created on Adobe Illustrator and converted to PNG.
The JavaScript used:
document.getElementById('backToTop').addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
Figure 2.11 JavaScript (1/7/2025)
After creating the navigation bar and footer section, I moved on to create the 5 pages. The 5 pages:
- account.html
- index.html (Home Page)
- about.html
- activities.html
- contact.html
1) Sign In Page
Figure 2.12 Sign In Page (24/7/2025)
In this sign in page, there is a form where users can enter their email and password to log in. When the form is submitted successfully, a modal pop-up appears with the message "Login successful". The JavaScript that makes this functionality work is:
document.getElementById("signin-form").addEventListener("submit", function(event) {
2) Home Page
Figure 2.13 Home Page Header (1/7/2025)
I made the header with a “— header —” effect using CSS. The container (display: flex; justify-content: center; align-items: center;) to put everything in a row and center it. The lines are made with ::before and ::after that lengthens on both sides of the heading.
Figure 2.14 "Who we are" Section (24/7/2025)
In the “Who We Are” section, I added a button that links users to the About page to learn more about the Buddha. I used an <a> tag to wrap around the button to create the link.
<a href="about.html#about us" class="btn">LEARN MORE ABOUT US</a>
Figure 2.15 "Featured Events" Carousel (26/7/2025)
I created a carousel slider for the events section to help users easily browse through information without feeling overwhelmed. Users can click the arrow buttons to slide through event cards smoothly. The carousel displays three cards at a time and there are indicator dots to show which slide the user is currently viewing.
3) About Page
Figure 2.16 About Page (28/7/2025)
For the About Us section, I initially wanted to create a checkered layout. However, I ran into layout issues when trying to scale the images to make them stretch edge to edge. Instead of fitting neatly within the container, the images ended up overflowing and expanding beyond the boundaries of the webpage. Even after adjusting the layout and image sizing, I could not get them to align properly without breaking the overall page structure.
Figure 2.17 Objective Section (28/7/2025)
In the objectives section, I used a bullet point list to present the objectives more clearly instead of displaying them as one long paragraph like in the original version of the website by using <ul><li>. This makes the content easier to read and more visually organised.
Figure 2.18 Card Boxes (28/7/2025)
There are two cards in this section, and to highlight the one being interacted with, I used a hover effect. When the user hovers over a card, its background colour and text colour changes. This creates a visual cue that the card is being selected. The CSS used is:
background-color: #83957D;
cursor: pointer;
}
.extra-programs-section .program-box:hover h3 {
color: #E7E3D4;
}
4) Activities Page
Figure 2.19 "Featured Events" Dropdown (31/7/2025)
This section features expandable and collapsible boxes of featured events when hovered. This is to minimise the cluttered layout while still providing information about the event. The dropdown effect uses JavaScript to function as shown in Figure 2.18.
Additionally, I also added colour changes, .event-box:hover{background-color: #E7E3D4;, when hovering the boxes to highlight them because it looked boring without colours to differentiate.
Figure 2.20 "Past Events" (31/7/2025)
In this section, I applied transform: translateY(-5px); to the boxes so they slightly move upward in the Y axis when the cursor hovers over them, creating a subtle animation that emphasizes the hovered box.
Figure 2.21 Dhamma School Registration Button (31/7/2025)
In this section, there is a CTA button "Dhamma School Registration" which directs users who are interested to the Contact Us form using <a href="contact us.html#join" class="register-button">.
The button has a hollow design when not hovered, when the cursor hovers the button, it fills the button element. This is created by putting .register-button {background-color: transparent;} then .register-button: hover {background-color: #344B5B;}.
5) Contact Us Page
For the contact page, I decided to add in a "Find Us" section to increase user clarity while navigating this website.
*This section was not created in Figma before*
Figure 2.22 "Find Us" Interactive Map (27/7/2025)
I embedded the direction link from Google Maps and used <iframe src=link> to insert the interactive map and adjusted the width and height of the map.
Figure 2.23 Form Radio Buttons and Error Prevention (27/7/2025)
Figure 2.24 Form Validation Modal (27/7/2025)
A form validation modal will pop up after users click the submit button then reset after users click "OK". I could not understand how it works, same goes to the radio buttons so I asked ChatGPT to help me explain the JavaScript one by one.
Buttons (just to highlight)
.png)
Figure 2.25 Buttons (27/7/2025)
For the buttons, I used the the same CSS properties to ensure the consistency.
color: #;
background-color: transparent;
border: 3.5px solid #;
border-radius: 30px;
}
.class selector:hover {
background-color: #;
color: #;
}
(CSS example)
Mobile View
After completing the website, I started on working on the mobile version. In the CSS, I added @media to make sure the website functions across different devices. The images and text sizes are also minimised and readjusted to suit the mobile layout.
Figure 2.26 CSS for Mobile Version (1/8/2025)
Figure 2.27 Mobile Version (1/8/2025)
Netlify
Figure 2.28 Website Deploy in Netlify (1/8/2025)
Final Website
Figure 2.29 Final Website (1/8/2025)
Design decisions during development
Minimalist Visual Appeal: The decision to keep the design minimal was made to reflect Buddhist values such as clarity, simplicity and mindfulness by reducing visual clutter.
Redesign Objectives
Modernise the outdated visual design by creating a clean and minimalistic layout that appeals to users of all ages. Using consistent and harmonious colour scheme and typefaces to improve visual hierarchy and readability, update outdated UI elements (buttons, subscribe sections) to align with current web design standards.
Improve the flow of information and content readability by ensuring visual consistency across pages to strengthen the organisation's professionalism. Breaking down dense paragraphs into skimmable chunks with bullet points or icons and use structured layouts (panels, grids) for the overall layout.
Increase engagement and accessibility by improving the clarity of information and interactive elements.
Preserving the identity of a Buddhism community by designing a website that reflects Buddhism values, simplicity and serenity.
Improve usability by reducing cognitive load by minimising clutter and organising information into clearly defined sections.
Original Website: https://bubs.my/
Google Drive Link: https://drive.google.com/drive/folders/1BDnCMaiUNrrTzx0h0JPyzAeuKtbfcTkg?usp=drive_link
It was very rewarding to see my chosen website start from just a proposal, to a prototype and finally turning into a fully functional website for this final project. Through this process, I realised how important it is to have a clear design concept for a chosen website, whether it is complex or simple. For example, for my Buddhist Society website, I chose a minimalistic approach with a muted colour palette inspired by my moodboard in Task 2. This was to reflect the values of Buddhism, which emphasise on simplicity and tranquility.
Overall, this module has taught me a lot, from understanding usability and user centric design to actually coding and building a website. Mr. Shamsul’s teaching was also very helpful for me, especially since I want to pursue a career in UI/UX. Honestly, I still struggle with coding and there is definitely a lot of room for improvement in my coding skills. I also came to realise how even small details like an error message saying “please fill out this field” require careful work behind the scenes.
This final project was definitely stressful because I am still not confident with coding, which concerns me since it is an important skill in UI/UX. However, I have been exposed to more coding and scripts like JavaScript for the first time while working on the contact form through this project. Despite the challenges, it was an interesting module, I had fun with coding and slowly figuring them my way out. I will ultilise the knowledge gained in this module for my future projects.
Lastly, I did not want to rely on much AI for this project, but I had no exposure when it came to the JavaScript parts. Moreover, AI is not always accurate, so even after getting help, I still made changes to match my own preferences for my website.
Comments
Post a Comment