INTERACTIVE DESIGN / FINAL PROJECT - DESIGN, EXPLORATION AND APPLICATION

22/05/2023 - 03/07/2023 / Week 8 - Week 14
Chew Zhi Ern / 0358995
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Design, Exploration and Application


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1O5VSC53JFXRwasT-fvvcldMP48ad3zt1/preview" width="640" height="480" allow="autoplay"></iframe>

LECTURES

Lectures: Refer to Exercises

PROJECT

Task 1: Design, Exploration and Application

Instructions:
The objective of this project is to 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. You will be required to showcase your design and development skills while effectively conveying the importance of mental health through their website.

Requirements:
Design and create a 5-page website with an appealing and user-friendly interface. The website should have a consistent theme and color 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.
You can provide links to external resources, hotlines, or helplines that offer professional assistance for mental health concerns.

Evaluation Criteria:
The final projects will be evaluated based on the following criteria:
  • Overall design and aesthetics of the website.
  • Clarity and organization of content related to mental health.
  • Functionality and usability of interactive elements.
  • Responsiveness and compatibility across different devices.


In this final project, we delved into the world of mental health, exploring its various aspects and developing a website aimed at providing valuable information, resources, and support for those seeking to understand and improve their mental well-being. After extensive research and careful consideration, I chose OCD as the subject for this project.

To begin this project, I immersed myself in understanding the complexities of obsessive-compulsive disorder. Through in-depth research, I learned about the symptoms, triggers, and the impact OCD can have on an individual's life. I also delved into the various treatment options, including therapy and medication, to gain insights into how individuals manage and cope with OCD. I curated valuable information from reputable websites and organizations dedicated to mental health, specifically OCD. 
 
Here are some of the websites where I have gathered the information.
  1. Wikipedia
  2. National Institute of Mental Health (NIMH)
  3. Mayo Clinic
  4. International OCD Foundation
  5. American Psychiatric Association (APA)
  6. WebMD
  7. Cleveland Clinic
  8. Healthline
The information was carefully fact-checked to ensure the accuracy and reliability of the content presented on the website. By utilizing trustworthy sources, I aimed to provide visitors with a reliable and safe space for understanding OCD and seeking support. Understanding the lived experiences of individuals with OCD was crucial for creating a compassionate and inclusive platform. Then, I summarize all the information and documented it in Google Docs.

Google Docs Informations

With a comprehensive understanding of OCD, I proceeded to develop a sitemap outlining the structure and navigation of the website. It was essential to create a logical flow that guides users through valuable information and resources. 

The 5-page website included the following sections:
  • Home Page: A warm and inviting introduction, reassuring visitors that they are not alone and emphasizing the importance of mental well-being. Additionally, the Home Page features an interactive game section, designed to provide a therapeutic and educational experience for users, offering a fresh approach to understanding OCD.
  • About OCD: This informative page presents a comprehensive overview of OCD. The primary objective is to destigmatize the disorder and promote understanding.
  • Signs and Symptoms: In this section, it delves into the various signs and symptoms of OCD, enabling visitors to identify potential red flags in themselves or others.
  • Causes and Impact: Visitors can explore the potential causes of OCD in this section, along with a deeper examination of how the disorder significantly impacts individuals' lives. This information aims to foster empathy and support for those affected by OCD.
  • Diagnosis and Treatment: Providing valuable insights, this section offers information on diagnosing OCD and the various treatment options available to individuals seeking professional help. Our goal is to empower users to make informed decisions about their mental health.
  • Resources and Support: The website includes a dedicated section with a compilation of reputable external links, support groups, and helplines, providing visitors with access to additional assistance and support on their journey toward mental well-being.

With the sitemap as my guide, I began sketching and wireframing the web pages. I utilized Adobe XD to experiment with different design concepts, focusing on creating a visually calming and empathetic interface. The goal was to ensure the website's layout was intuitive and easy to navigate, allowing visitors to find the information they need with ease.

Sketching and Wireframing

To establish a consistent theme, I developed a mood board that comprised a soothing color palette and appropriate fonts. Soft blues and gentle greens were chosen to create a serene atmosphere, promoting a sense of calmness and understanding. The fonts were carefully selected for readability and to convey empathy and support. The mood board served as a visual reference, guiding the design process to align with the essence of compassion and serenity.

Chosen Color Palette


With the foundation laid, I proceeded to design and implement the website. Each page was crafted with sensitivity and care, ensuring the content was informative and supportive.

I initiated my coding journey with Adobe Dreamweaver, with a particular emphasis on implementing HTML and CSS during this phase.

Drawing upon my existing knowledge of HTML and CSS, I commenced the process of converting the design elements into actual code. My first step involved establishing the HTML structure, ensuring the incorporation of semantic tags to improve accessibility and optimize search engine ranking.

Here are a few instances of process proofs.

HTML Encoding Process

Following that, I directed my attention toward CSS styling, diligently reproducing the typography, color scheme, and layout as presented in the static prototype. My main objective was to achieve pixel-perfect accuracy, meticulously ensuring that each element precisely matched the original design.

CSS

In order to elevate user engagement, I made use of JavaScript to introduce interactivity across various sections of the website. One notable example was the creation of a dynamic game section on the home page, along with the interactive 'Subscribe Now' button in the footer. These additions substantially enhanced the overall usability and functionality of the web page, resulting in a more captivating and interactive experience for visitors to the site.

Implementation of JavaScript

Recognizing the importance of accessibility, I implemented a responsive design to ensure the website would adapt and function seamlessly across different devices. Creating a user-friendly experience for visitors was vital, as it enables individuals to access crucial information regardless of their preferred device.

CSS @media rules are included in the stylesheet section

To complete the website, it is essential to finalize both the design and content. Once this step is accomplished, the next crucial phase involves conducting thorough testing to verify that all functionalities are working correctly.

The culmination of this endeavor is as follows.

Home Page HTML

Home Page CSS

About OCD Page HTML

About OCD Page CSS

Signs&Symptoms Page HTML

Signs&Symptoms Page CSS

Causes&Impact Page HTML

Causes&Impact Page CSS

Diagnosis&Treatment Page HTML

Diagnosis&Treatment Page CSS

Resources&Support Page HTML

Resources&Support Page CSS

Screenshot of the Final Website Pages:

Page 1: Home Page

Page 2: About OCD Page

Page 3: Signs & Symptoms Page

Page 4: Causes & Impact Page

Page 5: Diagnosis & Treatment Page

Page 6: Resources & Support Page


Showcasing some web page features and effects:

Navigation

Footer

Game Section - Home Page

Resources & Support Page

Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT / PROJECTS

Image
26/04/2024 - 26/07/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Projects INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1BouMV6wry6NHld6fGib6QdoJmBBcPVMP/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Week 1: Introduction to the Module In the first week of the Major Project module, we were briefed on the overall objectives and guidelines. We were given the option to complete the project individually or as part of a group, with the understanding that there would be some limitations regarding the combination of different specializations and the number of people allowed if we chose the group route. After the briefing, Ms. Anis shared examples of past works from seniors, providing us with inspiration and insight into what had been accomplished in previous years. Following this, we began brainstorming ideas for our pr...
Read more

SONIC DESIGN / FINAL PROJECT - GAME AUDIO

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Project / Game Audio INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT FINAL PROJECT: GAME AUDIO In this final project, we will bring a gameplay video to life by designing and implementing its complete audio experience. The task involves creating sound effects, foley, and voice recordings to enhance the game's immersive quality. We will plan and organize studio recording sessions for capturing foley and voiceovers, with access to portable recorders if needed. The project emphasizes creativity, technical skill, and the seamless integration of sound elements to elevate the overall gaming experience. Choosing a gameplay video to...
Read more

SONIC DESIGN / PROJECT 3 - AUDIO STORYTELLING

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Project 3 / Audio Storytelling INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT PROJECT 3: AUDIO STORYTELLING For this project, we will select a fairy-tale story and create an engaging audiobook. This task builds on the skills developed in auditory imaging, requiring us to not only design a compelling soundscape but also incorporate recorded voice acting to bring the story to life. The objective is to integrate sound effects, voice recordings, and creative sound design to enhance the storytelling experience. The final audiobook should mimic a radio show, captivating listeners through immersive audio and carefully crafted sound element...
Read more