Interactive Design Project 2

22/5/2023 - 11/6/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
GCD 60904 / Interactive Design
Project 2 / Working Web Page

INSTRUCTIONS

Project 2 : Working Web Page

Project Description

This is a continuation project where we take our Figma design from Project 1 and create a working, responsive web page using HTML and CSS through coding devices like Visual Studio Code or Adobe Dreamweaver. 

Page Explanation

The applications of responsive code was applied to buttons so that they have a hover effect of color switching. This effect was also applied on similar buttons in the navigation bar as well as the call-to-action buttons at the footer.


Fig 1.1 - 1.2 - Hover Effects on Buttons


The links of this description has hover effects that highlights the selection of it applied to them for all 4 links.



Fig 1.3 - 1.4 - Hover Effect on Links


In the section for "On The Calendar", both arrow buttons as well as the all images have a hover effect that lowers brightness when selected applied on them.



Fig 1.5 - 1.9 - Hover Effects on Arrow Buttons & Images

The hover effects used in Community Bulletin Board section is similar to the ones from "Happening at SOA" while having additional highlighting effects on the "Read More" text.


Fig 2.0 - Hover Effects on Text + Links

The hover effect of brightness adjustment is applied to the icons in "Calendar / Newsletter" section of the webpage.


Fig 2.1 - Hover Effects on Icons

The footer section has a hover effect that highlights the text and icons on the left while the call-to-action button is the same effect of color-switching mentioned above.


Fig 2.2 - Hover Effects on Text + Icons + Buttons


Final Submission



REFLECTIONS

This part was challenging as it was my first real experience into developing a full page code using HTML & CSS elements. The process was confusing as I could not get my code to work properly which led to a bunch of weird and funny looking layouts that I had to fix. I studied how to use certain effects in terms of coding language and hover effects was one of the most impactful ones I learnt since you can edit certain elements to obtain different styles of hover effects such as color swap, brightness adjustment, ease in and out etc. 

Comments

Post a Comment

Popular posts from this blog

Collaborative Design Practice - Task 1: Empathy Map & Problem Statement

25/09/2024 - 9/10/2024 | Week 1 - Week 3 Edwin Choo Quan Rong | 0348305 GCD62204 Collaborative Design Practice | Bachelor of Design (Hons) In Creative Media Task 1: Empathy Map & Problem Statement Instructions Task 1: Empathy Map & Problem Statement Week 1: Project Briefing & Group Formation (25/9) The first week of class with Ms Li Lian introduced us to the module of Collaborative Design Practice (CDP for short) by discussing about the contents and project goals we are taking this semester. Unlike any other modules that we have taken before, CDP provides us the opportunity to work with students from other departments of the campus, namely students from Business and Food Science majors. We as the Design students, were to form a team and select one project to collaborate on.  Introducing my design team members and their respective specializations: Arnusha Arnaz Khan (Group Leader) - Ent...
Read more

App Design II - Task 2: Interaction Design Planning & Prototyping

Image
 26/5/2025 - 9/6/2025 Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media DST 61004 / Application Design II Task 2 Task 2: Interaction Design Proposal and Planning Process Wireframes User Flowchart Diagram Animation Prototypes Animation Description & Rationale I utilized  Figma  to plan out the flowchart for the app. Here below is an overview of the flowchart as well as the animations used for the app. These animations were selected with simplicity, comfort, and ease of use in mind as people want to spend lesser time on simple information apps such as weather apps. Fig 1.1 - Flowchart Preview Fig 1.2 - Map Menu Flowchart Fig 2.0 - Video Presentation
Read more