Interactive Design - Final Project

5 Jun 2023 - 20 July 2023/ Week 10 - Week 16
Sim Jia Min 0349784
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Final Project: 5 pages website

---

INSTRUCTIONS (MIB)

---

Project 3 - 5 Pages Website

Project details:

Objective:
- create a 5-page website focused on the theme of mental health

- the website should provide valuable information, resources, and support for individuals seeking to understand and improve their mental well-being

- required to showcase your design and development skills while effectively conveying the importance of mental health through website

Project Requirements:
- design and create a 5-page website with an appealing and user-friendly interface

- the website should have a consistent theme and colour scheme related to mental health

- each page should have relevant content that educates and supports individuals in understanding mental health topics

- implement responsive design to ensure the website is accessible and displays properly on different devices

- provide links to external resources, hotlines, or helplines that offer professional assistance for mental health concerns

Website references

https://www.helpguide.org/

https://www.activeminds.org/

Figure 1.1: Website references

I look through some websites for concept references, to learn about what a mental health support website will look like. And I found that the colours used in these websites are usually neutral, white colour is a key colour. The content on homepage usually introduces what is the website about, and with "explore more"/"read more" buttons that link to the other pages.

Figure 1.2: Website name, concept, colour scheme

I named the website "Mental Wellness Journey", which is clearly a website for helping people go through their journey of reaching a healthy mental state.

Website prototype design
Miro board link: https://miro.com/app/board/uXjVMUxWvoY=/?share_link_id=102552421102

Figure 1.3: Wireframes

The main page is going to be home page, and then follow by "about", "programs", "blog", and "contact".

Figure 1.4: Website structure map

I planned the structure to have an idea of how the webpages will work and link together.

 
Main page: Home

Page 2: About

Page 3: Programs

Page 4: Blog

Page 5: Contact

Figure 1.5: Webpages prototype design on Adobe XD

Link to Adobe XD file: https://xd.adobe.com/view/3aa76718-d3a5-4be5-8ac3-c5e95b90d3c5-6ff4/

Font used: Helvetica (Bold, regular)

Images from pexels.com, text content generated by ChatGPT.

Figure 1.6: Webpages prototype design

Coding

Figure 1.7: Assets (Fonts, stylesheet)

Figure 1.8: Assets (Fonts, stylesheet)

Asset sources:

Fonts

https://fonts.google.com/

HTML & CSS

https://getbootstrap.com/docs/5.3/getting-started/introduction/

https://cdnjs.com/libraries/font-awesome

https://www.jsdelivr.com/package/npm/bootstrap-icons

https://cdnjs.com/libraries/animate.css (CSS animation)

Java Script

https://www.jsdelivr.com/

https://jquery.com/

HTML & CSS
Just a few screengrabs of how my HTML & CSS overall worked like.

Figure 1.9: index.html

Figure 2.1: index.html

Figure 2.2: about.html

Figure 2.3: program.html

Figure 2.4: style.css

Figure 2.5: style.css

Figure 2.6: Upload to GitHub

SUBMISSION
Webpage link: https://jasminesim12.github.io/simjiamin_finalproject/

Link to the code files: https://drive.google.com/drive/folders/1rRNVW6-0-lqNy6GQxVePu2s0J7mulrzB?usp=sharing

Figure 2.7: Screengrabs of the website

REFLECTION

This was really challenging for me, I encountered difficulty in translating my prototype design into actual code, converting it into functional web pages was a whole different ballgame. Aligning elements properly, ensuring consistent spacing, and maintaining the intended layout across various screen sizes, all of these were complex for me to do, took me a long time to finish everything. 

Due to these challenges, I seek help from my brother who worked as a software engineer, he told me to use online resources for coding, provide me with the resources website, and show me how to apply them accordingly in my code. From the online resources, I found various tutorials, code snippets, and CSS frameworks that helped me overcome specific challenges that I met. I realized that seeking help and learning from others is a normal part of the coding process, and it's also crucial to use available resources effectively.