Interactive Design FInal Project

July 17, 2023

Interactive Design FInal Project

Week 10- Week 15

Justin Averill Prasetya / 0355048
GCD 60904 / BDCM / The Design School
Project 2

INSTRUCTIONS

Final Project

in this project, I'm going to do a website for mental health which is bipolar disorder, the base of this website was to bring awareness to this disorder and also help people to recognize and aware of this disorder

Bipolar disorder, formerly known as manic-depressive illness, is a mental health condition characterized by extreme shifts in mood, energy levels, and activity levels. People with bipolar disorder experience episodes of mania (or hypomania) and depression, which can vary in duration and intensity. Here are some key points about bipolar disorder:

Types of Bipolar Disorder: There are several types of bipolar disorder, including Bipolar I, Bipolar II, cyclothymic disorder, and other specified and unspecified bipolar and related disorders. Bipolar I is characterized by at least one manic episode, while Bipolar II involves hypomanic episodes and major depressive episodes.

Manic Episode: A manic episode is a distinct period of abnormally elevated mood, energy, and goal-directed behavior. During a manic episode, individuals may experience increased self-esteem, decreased need for sleep, racing thoughts, excessive talking, impulsivity, and engaging in risky behaviors.

Hypomanic Episode: A hypomanic episode is a less severe form of mania, characterized by similar symptoms but of shorter duration and lesser intensity. Hypomanic episodes do not usually cause significant impairment in functioning and may even be associated with increased productivity and creativity.

Depressive Episode: A depressive episode is characterized by persistent feelings of sadness, hopelessness, loss of interest or pleasure in activities, changes in appetite or weight, sleep disturbances, fatigue, difficulty concentrating, and thoughts of death or suicide. These episodes can be severe and may interfere with daily functioning.

Diagnosis and Treatment: Bipolar disorder is typically diagnosed based on a thorough assessment of symptoms, medical history, and family history. Treatment usually involves a combination of medication, such as mood stabilizers, and psychotherapy. Psychoeducation, support from loved ones, and lifestyle changes, including regular sleep patterns and stress management, are also important for managing the condition.

Impact on Daily Life: Bipolar disorder can have a significant impact on various aspects of a person's life, including relationships, work or school performance, and overall quality of life. It is a chronic condition that requires long-term management and support.

Co-occurring Disorders: Individuals with bipolar disorder are at a higher risk of developing other mental health conditions, such as anxiety disorders, substance use disorders, and attention-deficit/hyperactivity disorder (ADHD). These comorbid conditions may complicate diagnosis and treatment.

Stigma and Support: Like many mental health conditions, bipolar disorder can be accompanied by social stigma and misunderstanding. Building awareness, promoting understanding, and providing support to individuals with bipolar disorder and their families is essential to reduce stigma and improving outcomes

Here's the progress when i'm working on the design of this website

I use this color palette for the website my reason was to make the website look bright and also calm

Fig 1.1.1

First Attempt

Fig 1.1.2

This is my first attempt designing and i think it lack of interactive elements and also the placement is awkward

So i started to experimenting with more reference and make this as an outcome

Final Design Outcome

Fig 1.1.3-4

This design had a bit of interactive feature to make the website more interesting and also make it more likely to use

Page 1-5 Adobe Xd Link

Process

Fig 1.2.1-3

I'm trying to figure out how to make it interesting

Fig 1.2.4-6

After trying and make the website responsive

Also here's one of the javascript that i use

Fig 1.2.7

It's for the carousel and slide scroll, i took so much time learning the variable that i forgot to do the rest of the html also i combine it with a script that i found on stack overflow

After that i make another pages

Fig 1.2.8

For the rest had the same step and here's the website link and files

Finals

Fig 1.2.9

Final Website

Fig 1.2.10

Web Link: https://justinfinals.netlify.app

Search This Blog

Justin Averill Prasetya/0355048