Interactive Design: Project 2

27.05.2025 - 16.06.2025 / Week 6- Week 9

Angelique Svetlana Pekasa / 0377365

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

Project 2:

---

Table of contents

1. Lectures
2. Instructions
3. Exercises
4. Reflections

---

Lectures

Week 6 Notes

Universal selector: selec all elements on the page, represented by *

Element selector: targets HTML elements by their tag name. 

ID selector: Targets an element with specific id attribute, represented by # followed by ID name.

Class selector: Targets elements with a specific class attribute, represented by . followed by class name.

Descendant selector: selects an element that is a descendant of another element, 

Child selector: selects elements that are direct children of another element, use ul > li

Pseudo-class selector: Selects elements based on their state or position in relation to other elements.  

Placeholder: suggest wat to input in the text fill

Week 7 Notes

Pseudo-Class selector 

Link have 4 states (need to be typed in this order)

a:link

a:visited

a:hover

a:active

Week 8 (Independent Learning Week)

---

 Instructions

---

Project 2

In this project, we were tasked to make a functioning prototype of our chosen website in Figma. We were tasked to make 3 functioning pages consisting of 1 home page, 1 core content page, and 1 contact us page. Shown below is the screen grab of the process I did on Figma.

Fig 1.1, Process work, (week 8, 10/06/2025)

After feedback from week 9, I realized that the website I made is too "fun". There are too many rounded edges used, and the color of it doesn't suit well. So I tried to use black.

However, I wanted the website to achieve a more cleaner look, and a more professional look, so I ended up changing the entire color scheme of the website to white (which is different from the proposal on the task before). I also changed the layout of it and added more layouts in order to add more improvement to the existing design.

Final prototype:

https://www.figma.com/proto/IWF0THPAI01Yfakt6MoOad/Untitled?node-id=2-2&p=f&t=tVBJmG0zAmqNcsfC-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=2%3A2

Brief explanation of the prototype. 

The website prototype that I made focuses on improving the home page, as the navigation of the original website was unclear and confusing. The colour of the navigation bar clashes with the image, not only that, the original website uses the colour red for the hover effects, which makes it odd as it doesn’t fit the colour scheme. So, for the redesign, I made a clearer navigation bar by using a white rectangle to fit the contents (home, about us, contact us, and etc.), I also added hover effects and change the colour of it to dark blue. 

The image of the words “Something Remains” in the home page is actually the theme of the sermons of the month, and it changes every month and the color of the image might not suit well with the website and clashes with the navigation bar. So I also changed the layout of it, I decreased the size of the image, and deleted the background, I then changed the background into the church's stage in a vibrant color which makes users interested towards the website.

Not only that, I changed the colour scheme of the website to white. This differ from the original proposal, as after feedback, I realized that having a white color scheme makes drastic changes. It makes the website looks a lot more professional, clean, and neat. 

I also changed the layout of the latest news and latest sermons, I added a hover effect which reduces it’s opacity and make the phrase “learn more” visible. In addition to that I added a brief about us layout on the home page with a learn more button which leads to the about us page. I also added a brief contact us layout at the end of the home page 

For the contact us page, I added a fillable form which were not available on the original website. I feel the need to add this fillable form as a way for the church to contact the user if they are in need of any help or prayer request. In this fillable form I added several user experiences for example, I added a blinking insertion form which indicates the users that the form could be typed in, I also added a change in colour to indicate that the form has been filled.

In addition to that I change the layout of the about us page, I make it simpler, as some of the information are already given in the main page. I also did a major change on the layout of “Our Pastors”. In the original website, we need to scroll until the button of the page to show all the pastors, however this is inconvenient. Which is why I change the layout of it and make users be able to click and scroll to the right instead on the photos of the pastors, this way there will be more user’s experience.

Overall, the prototype achieves the objectives on the proposal, as I change the home page layout so that the image don’t clashes with the navigation bar. I also made the navigation bar clearer, I added a brief about us and the church’s contact info on the home page. On the contact us page, I added a form and on the about us page I changed the layout of “Our Pastors”. All of these changes made the website easier to navigate, improves layout and usability.

---

Reflections

Making this prototype is actually very overwhelming for me. I never heard of Figma before, I didn't know how to use it and I was very hesitant to do the task. I was scared of not being able to understand it. However, I started to make the layout, and it feels like editing using Canva, and afterwards I began to watch Youtube tutorials and the online lecture given to add hover effects, buttons, and forms. I slowly began to understand it and it wasn't as hard as I thought it would be.