Interactive Design: Final Project

 

Week 10- Week 14
Nadia Chong Wen | 0355736 | Bachelor's of Design (Honours) in Creative Media
Interactive Design | Final Project

---

1. Instructions

---

2. Final Project | Web Development

Objective: The objective of this assignment is to bring our website redesign to life by developing a fully functional website (with a 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.

The first thing I did was reference the prototype and the color scheme from the website proposal in Figma. The original site had the colors of green, black, grey, and white, so I decided to use multiple shades of it. In an effort to save time, I also ended reusing parts of the existing code in order to avoid more unnecessary coding.

After that, I started organizing what was needed in each page of the website and here is what I ended up on during the Prototype phase.

1. Index
• Welcome Section
• Services & Teams Section
• Latest News
• Training & Events
2. About Us
• Main Section
• Resources
• Meet the Teams
• Latest News
3. Services
• Catalogue of Teams
4. News
5. Contact

The original site was really plain with mostly text and minimal amounts of images used besides the Bromley Education Matters Logos. So I decided to incorporate images related to teaching into the elements of the site. I made the website so that it has more visual cues and used different fonts (Fraunces/DM Sans) for a more professional look.

Because of my lacking knowledge on coding despite learning the basics in class, I had to search online on how to put in icons and found out about google symbols through the videos. I also found out how I could split the content and text with this video (https://youtu.be/fHqjQBRQxUI?si=CDs3wR4ZlME4QgST). For the latest news section, I used the videos in this guide to help me through with it (https://youtube.com/playlist?list=PLpwngcHZlPae68z_mLFNfbJFIJVJ_Zcx2&si=W_ItxXQyxoClYWB4). I also used a guide into order to help me with footer as well (https://youtu.be/FRRlFLfdvBE?si=T_qq-jD19TOSIiQx).

Figure 1 Coding Example

Here are the images that I used for the site.

Figure 2 Images

With many tweaks on the CSS with checks with AI, I finally uploaded the site.

Figure - Publication of Site

Link to Site: https://nadia-interactive-final-task.netlify.app/

---

3. Reflection

Experience:

This project was the most difficult project out of all the projects. I often found myself having to recode the code many times in the CSS because one mistake could completely flip the site around and make it go out of bounds. It was really hard to keep up and I found myself having to recode a lot to make things right. It was a challenge but I'm glad to get it over with for now.

Observation:

The process of trying to code the entire site and think of what to write for the CSS in order to get the result I want was very, very time-consuming for me. I had to do a lot of research by my own and through websites about what could be used to code my website. I definitely will try to code better the next time I get the chance to for my assignments.

Findings:

Despite the hardship I faced, I believe this was a very rich learning experience, and I came to appreciate the satisfaction of being able to code things correctly. I also enjoyed experimenting during the coding phase on what I could do for the site.