INTERACTIVE DESIGN FINAL PROJECT: DESIGN, EXPLORATION AND APPLICATION

Week 11 to Week 14

12/06/2023 – 9/07/2023 

Name: Joan Chiam Zi Woei 

Student ID: 0350211

Interactive Design

Final Project: Design, Exploration and Application

---

Instructions:

Module Information Booklet

---

Process

The goal of this project is to develop a 5-page website centered around the topic of mental health. The website aims to provide useful information, resources, and support for individuals looking to enhance their mental well-being. Your task will involve showcasing your design and development skills to effectively communicate the significance of mental health through the website's content and layout.

The first thing I did was to decide the theme I want to go for, the theme that I've came out with is Social Anxiety. With that in mind, I started gathering information and all the necessary things needed. 

I start off by getting a mood board as my inspiration. I wanted to go for light colours as I thought it will be nice and calming for people who are suffering from anxiety. I also just want to keep my website simple and straightforward without making anyone confused about where to click or missing out anything.

Fig 1.0 Mood board

I then worked on my wireframe. I want it to look neat so I came out with designs that are not too complicated. But after further consideration I decided to change it up a bit.

Fig 1.1 Wireframe Draft

Fig 1.2 Finalized Wireframe

I also made a site map to show how everything will go.

Fig 1.4 Site Map

Once the wireframe was done, I started putting together the home page using HTML and CSS.

Fig 1.4 A sample of my HTML coding for navigation

Fig 1.5 A sample of my CSS coding for navigation

For my landing page, I wanted to make it a bit unique so I did flip cards on the image with details on the back.

Fig 1.6 Flip card coding

My coding worked for the flipping card and it was quite fun to do. So I also tried to experiment on different codes. 

Fig 1.7 Screenshot of my "About" page

Fig 1.8 Screenshot of my " Contact" page 

Fig 1.9 Screenshot of my " Service" page 

Fig 1.11 Screenshot of my "Profile " page 

Once I finished building the website, I used W3C Markup Validator to identify any potential issues. Fortunately, there weren't any problem. With everything in check, I uploaded my website through Netlify and the work was complete.

The final website can be seen by clicking here.

---

Fig 2.0 HTML and CSS codes

---

Reflections 

This project is just as hard as I've expected but I was happy and proud of the outcome. Creating an entire website with five pages is difficult and it definitely took a lot of patience for it but it has been an enlightening and rewarding experience. Throughout the journey, I encountered many challenges and had to refer to coding tutorials frequently. But with each obstacle I overcame, I was able to work more smoothly by carrying the knowledge I had from the previous problems. Overall, this project has been a valuable learning experience, and I am excited to apply the knowledge and skills I gained to future endeavors.