Interactive Design: Final Project
5.6.2023 - 17.7.2023 / Week 10 - Week 16
Sylvia Lau / 0356130
Bachelor of Design in Creative Media
Interactive Design: Final Project / 5-Page Website
Sylvia Lau / 0356130
Bachelor of Design in Creative Media
Interactive Design: Final Project / 5-Page Website
INSTRUCTIONS
Final Project: Mental Health Theme Website
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.
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.
Week 10:
There are many topics in mental health issues including anxiety disorder,
depression, PTSD, etc. Among these topics, my final decision was eating
disorders. I searched for some information about eating disorders and
recorded the information in a document. While doing the research, I also
started to plan the content that I wanted to include on my website.
After collecting the information, I started to find references for my
website design. From the experience of my previous project, I understood
where my skill level was, so in this project, I wanted to do a simple and
clean website.
Figure 1.1 References from Pinterest
From the references I found, I decided the images on the website were vector
illustrations. For the color scheme, I planned to use blue because it
symbolized calmness, dependability, health, and healing. The background
would remain plain white since too much color might be a mess while
inserting images with different background colors or doing the text.
Figure 1.2 Wireframe of Landing Page
Figure 1.3 Wireframe of Landing Page and Info Page (Second Attempt)
The next phase was sketching the wireframes. I only drew a few
wireframes, because most of the layout of my pages were similar.
Figure 1.4 Anuphan from Google Font
The font that I decided to use was going to be Anuphan, which was basically
used in exercise 2 (recreate the website). From that exercise, I think the
font used was very clear and neat, so I thought it would be suitable for me
to use it.
I decided to start with the header by using back the code in Project 2 by
just changing some text at the nav bar and logo. In my first attempt, my nav
bar included the logo, home, about, help and service, and sign-up buttons.
For the time being, it was written like that because I was still unsure what
should include.
Figure 1.5 Nav Bar
After showing the progress to Mr. Shamsul, he told me to remove the home
button because my nav bar already had a logo and it could replace the home
button. He also suggested me to rearrange the position of the About button
because normally it should be in the middle or nearly at the back.
I’d made the changes according to the feedback, but also quickly decided on
the content of other remaining pages. I searched some related mental health
websites to find some ideas.
The websites where I collected information:
The final decision on the content of five pages was:
1. Landing page.
2. Information page
3. Treatment page, which includes the treatment information about eating
disorders.
4. About us
5. Contact us.
Figure 1.6 Images
Figure 1.7 Color Scheme
These were the images that I found from Freepik. It took me some time to
choose which was suitable because I needed to make sure that the images were
in the same art style. The color scheme was decided after I searched for the
images.
Figure 1.7 Documented content for Landing Page
Before started working on the website, I used ChatGPT to help me with the
welcome text that I could put into my website. I created a document for me
to put in all the content that I wanted to insert on my website.
Week 11
Continuing to the landing page, I searched for a tutorial video as a guide
to creating the website. From the video, it taught me how to make each part
to be neat and consistent, the layout arrangement, and most importantly how
to make it responsive. I’d learned a lot from it and it really helped me
create other pages.
I created a section for each part and set the padding to 90px 13% so that
the text and images would be in the same alignment.
Landing Page Outcome:
Figure 2.1
The landing page started with a welcome message and a primary button that
would connect to the contact page.
Figure 2.2
The next part would be a short introduction about Eating Disorders and
adding a button that could link to the info page where users could know more
details about it.
Figure 2.3
The following part was the treatment. I provided three treatment options for
users to select and it would link them to another page.
Figure 2.4
As the landing page content was a little short, so I added this section
which was to let users know the experiences of other people while using this
website. I decided to use illustration characters because all of the images
on my website were vector illustrations.
Figure 2.5
This was the section that connected to the contact us page. I added a box to
it other than leaving it with plain white and black text. I tried using dark
blue as the background but the color was very strong and based on the images
above were all in light blue backgrounds.
Figure 2.6
Lastly was the footer, which included social media icons and pieces of
information.
Week 12
After working on the landing page, I started with the info page which was
about the explanation of Eating Disorders, types, and symptoms of it.
Figure 3.1 Documented content for Info Page
Figure 3.2 Images
Info Page Outcome:
Figure 3.3
From the original image, I only wanted part of it, so I covered it up with
white boxes. The layout of this section was the same, so I could just copy
and paste the code.
Figure 3.4 In Figma
Figure 3.5 In Actual Website
I struggled quite for some time with the spaces between the text and the
next section title. When opened it with Google, the spaces between them were
big. I tried adjusting the spaces but still couldn't figure out how to fix
them.
Figure 3.6
The next section was about different types of eating disorders. Since the
text was quite long and I didn't want the website to have many words, I
decided to apply accordion to it. I copied the code from Bootstrap and
insert the text into it. But it only allowed me to have three columns, I
tried to do 3 more columns but I failed to make them work, so I only chose
three common types of eating disorders.
Figure 3.7
In the documented information, psychological symptoms included two parts
which were physical symptoms and psychological symptoms. I made the layout
into two boxes to place the text.
Figure 3.8
For behavioral symptoms, since it only had one part, I decided to reuse the
layout that I had done before.
Figure 3.9
From the website that I found, I saw that they had a test about eating
disorders and I thought it would be interesting to add to the webpage.
Figure 3.10
I continued working on the treatment page. Since the layout was similar, so
it didn't take a lot of time to complete it.
Figure 4.1 Documented content for Treatment Page
Figure 4.2 Images
Treatment Page Outcome:
Figure 4.3
Figure 4.4
Figure 4.5
Figure 4.6
Figure 4.7
Figure 4.8
Figure 4.9
Figure 4.10
The layout of each section was all done on the previous webpage, I could
just copy the code and edit the content in it. I didn't fully copy all the
information documented in the doc as the text was very long, so I added a
read more button.
Week 13
Figure 5.1 References for Contact Page
Figure 5.2 Documented Content for Contact Page
I found some references to design my contact page.
Figure 5.3 Images
Contact Page Outcome:
Figure 5.4
As the image that I found had a blue background image, I decided to make
the background the same as the image.
Figure 5.5
From the references, most of the information included phone numbers, email
addresses, and location.
Figure 5.6
I searched the layout from Bootstrap and copied the code from it.
Figure 5.7
Week 14
The last webpage would be about us. It would include the history of this
community, the aim of this website and other texts.
Figure 6.1 Documented Content for About Page
About Page Outcome:
Figure 6.2
Figure 6.3
Figure 6.4
Figure 6.5
I searched for some references before creating the layout, but I decided
to follow the design of Psychcentral website.
Week 15
After finishing the 5 webpages, I made sure that each of them was
responsive in different devices. Then, I moved on to the last step which
was linking the buttons from the nav bar and footer to the specific
webpage that I had created.
Final Submission:
FEEDBACK
Week 10
The home button can be removed because the logo can replace as Home. The About button should be near the right, not at the first. Need to prepare a sitemap. The wireframe is clear and neat.
Week 13
Good. The webpage is clean and responsive. The weight of border with dotted line on the info page can be reduced. The primary button in a different color with the other dark blue buttons might be better.
Comments
Post a Comment