Interactive Design: Final Project

on

 23.06.2025 - 27.07.2025 / Week 10- Week 14

Angelique Svetlana Pekasa / 0377365

Interactive Design / Bachelors Of Creative Media / Taylor's University

Final Project

Table of contents


 Instructions




Final Project

Brief report + Process work

For the final project, we were tasked to make the prototype a functioning website, consisting of 5 pages. The website made should be functional and responsive with a consistent design and cross-platform compatibility. In addition to that it have to include the core features of a clear navigation, interactive elements, performance optimization, alongside technical considerations. And for the last stage, we should conduct a final test before deploying it into a web host platform. 

For this final project, I decide to redesign IFGF Bandung's website, IFGF Bandung is a church which have a capacity of 1200+ people for each of their services. Although it's huge, I notice that the design of their website could have further improvements, especially on it's homepage, which is why I decide to redesign it. The goal of my redesign is to make the website look more professional and clean yet still sticks to its minimalist design, to achieve this I changed the overall theme from black to white and make further improvements on the navigations, layouts, and etc. 

Navigation bar
First, I made the navigation bar for the website. I changed the layout of the previous design, as this new design that I made suites it better. I also used the logo of IFGF and make it clickable with a hover effect, the hover effect is added by replacing the IFGF image with the same image of a different color and changing the opacity of the original image to 0 when hovered while changing the opacity of the colored imaged to 1 when hovered. Shown below is the compilation of screenshots of the HTML and CSS for it. 

Fig 1.1, navigation, (Week 11, 05/07/2025)

For the responsiveness of the navigation bar, I used a hamburger menu and used JavaScript to code for it. 
Fig 1.2, JavaScript, (Week 11, 05/07/2025)


Footer
After that I made the footer of the website, I made slight adjustments from the previous layout. I also added target="_blank" into the HTML code for the Facebook, Instagram, and Youtube icons, this makes a new tab to open up when it is clicked (this was one of the feedbacks that I gained from Sir. Shamsul, which was very insightful). 

Fig 1.3, Footer, (Week 12, 07/07/2025)

Homepage
Then, I get started on working on my homepage. The homepage consist of 5 main layout, the main landing page which highlights the theme of the month and a prayer request button, a brief about us, an online service section, latest news, and ways we do community section. One of the hardest part for the homepage for me is making the landing page. The main landing page requires an image to be put at the center and a prayer request button to be put around the center, specifically below the phrase of "Something remains"( theme of the month). It took me a while to figure out how to do so. For the CSS I used position: nowrap in the "prayer request" button (btn1) so that the phrase stays in one line, and used position: absolute for the bg-img and btn1 in order to removes the element from the normal flow and positions it exactly where I want it to be. 

Fig 1.4, Homepage, (Week 12, 08/07/2025)

Contact page
The contact page consist of 3 main layouts, in which one of them requires a form. The contact us' landing page requires me to code somehow the same way as the homepage, as I put an image below the layout of it. And for the form I used a different HTML code for it, <label> and <input>, I also added paddings in the CSS to differentiate it from the background.  

Fig 1.5, Contact page process, (Week 13, 13/07/2025)

Fig 1.6, Contact page, (Week 13, 13/07/2025)

Magazine page
For the magazine page I designed the layout, where there is 3 magazines for each line. I also added paddings and hover effect, so when it is hovered upon the padding goes up, and the image in it zoomed. Shown below is how I code for it.

Fig 1.7, Magazine page process, (Week 13, 14/07/2025)


Fig 1.8, Contact page, (Week 13, 14/07/2025)

Articles page
The layout of the articles page is similar to that of the magazine page, and so is the code for it. The layout of this page one of the major redesign that I did for the website. The original website requires user to scroll a lot to see the contents of the articles, since the articles are displayed too big. So for the redesigned I reduced the size and make 3 articles appear in a line for efficiency.

Fig 1.9, Article page comparison, (Week 13, 16/07/2025)

About page
The about page contains 3 main layouts, Missions, Visions and etc., and Our pastors. The mission layout have similar coding structure with previous ones (especially contact page) as it uses an image at the background and a padding in front of it. The layout of Our pastors were also coded similar with the articles page, however without any hover effect as it's not meant to be clickable. The Vision layout is divided into 2 columns, one on the right and one on the left on the HTML file to make it easier. Shown below are the codes for it.  
Fig 1.10, About page process, (Week 13, 18/07/2025)

Fig 1.11, About page, (Week 13, 18/07/2025)

Deployment
At the very end of making my website I stumble upon a problem which was small but very much crucial. I didn't named my home page index.html, which make the very first page in Netlify different then my home page. I tried to rename it and overwrite the index, however I didn't succeed in doing so. To work my way around it, I deleted what was inside my index.html and copy what was in my homepage into that html. I then attached my homepage's CSS into the index.html. and upload it to Netlify.

Fig 1.12, Netflify, (Week 13, 18/07/2025)




Reflections

This task was very challenging for me, its unlike any other task that I have done, because it involves me to code in which I am very unfamiliar with. I was stuck several times trying to figure out what went wrong and how to fix it, especially when coding for the responsiveness. A lot of time was put into making this website and getting it to work as I wanted it. However, I learned a lot from it, at the start of this task I was clueless and by the end of it I learned how to make a working website entirely from sketch. And day by day, I started to understand more and more, my knowledge began to improve with every layouts that I code for.

I also learned creative ways to achieve what I wanted, for example, I wanted the logo of IFGF to change colors when hovered, however the logo is an image and not letters, so I go to photoshop to change the color of the logo manually and insert it back to Dreamweaver where I changed the opacity of the original logo and the colored version when hovered.

Overall, I really learned a lot from this module. It surprised me on how much I could do when I am forced on doing so. I would never imagine myself being capable to make an entire website, but here I am doing so, and by the end of it I am really satisfied by it. 




Comments

Post a Comment