Interactive Design: Project 2

on

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

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.

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


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


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 content in order to add more improvement to the existing design.


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



Fig 1.5, Final website, (week 8, 10/06/2025)

Fig 1.6, Final website, (week 8, 10/06/2025)


Final prototype:

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 color of the navigation bar clashes with the image, not only that, the original website uses the color red for the hover effects, which makes it odd as it doesn’t fit the color 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 color 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 color 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. In addition to that it is also easier for the elderlies to read it.

I also changed the layout of the latest news and changed the "Latest Sermons" into "Our Online Service" in order to highlight it. I also 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, contact us, and ways to do community content on the home page, this makes users feels more welcomed. 

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. 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 color to indicate that the form has been filled. I also added more contents into the page under the title "Ready to get Involve", this is crucial as it tells users that they could join the church's community.

In addition to that I change the layout of the articles page. In the original website the articles' images are too huge, so users need to scroll down to the very bottom of the page in order to know the contents of it. Users will loose interest when they need to do so, which is why I reduce the image size and fit 2 articles within one line. In addition to that I also added a hover effect which wasn't available in the original website.

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, and added more contents to make the website more interesting. On the contact us page, I also added a form and more contents. In addition to that I made a major change to the color scheme, I change the theme of it to white which achieve a more professional look, and is easier on the eyes for the elderlies. 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 was also confused on how to make the layout, the initial layout that I made seems off, it seems too playful. And upon feedback, I gained a lot of insight on what went wrong and how to improve, so redid and redesign my whole website. I slowly began to understand it and it wasn't as hard as I thought it would be. 


Comments

Post a Comment