Interactive Design — Final Project : 5-Page Web Design
22.5.2023—11.6.2023 (Week 8—Week 10)
Rachel Madeline Purwanto /
0356994
Interactive Design / Bachelor of Design (Hons) in Creative
Media
Project 2 : Working Web Page
❥INSTRUCTIONS
❥TASK
Project Title: Mental Health Theme Website
Project Duration: 4 Weeks
Objective:
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.
Project 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.
Week 1
During the first week, we had to conduct research before starting on our
website design. I conducted research on the mental health theme I wanted to
go for and decided to go for the panic disorder.
The moodboard below included the chosen colour palette as well which I
decided to go with a blue-teal palette since according to the research I
did, the colour represents calmness which complements my chosen mental
health theme being panic disorder. I also did some research on Pinterest to
find some visual references and found 3 websites to refer to for the
contents of the website so I had an idea of what a mental health page would
look like.
Based off the couple of mental health related websites I scrolled through, I
came up with a sitemap which included features that enables users to share
their story and get connected with the community as well as linking to
articles, podcasts and videos to people experiencing panic disorder.
Fig 1.1 Moodboard including colour palette and Sitemap
In the learn more section, instead of just putting resources, I decided to
add a small section on why its important for people to understand the panic
disorder because according to my research and what I observed, there are
those who often ignore their symptoms and brush it off without knowing that
it might be considered a mental health disorder.
This would convince the users to click on the resources to learn more about
the disorder.
Based off the sitemap, I sketched out the wireframes for each of the pages. The name of the
website would be MinfulBlu since the colour palette of the website mainly
consisted of blue-teal and blue represents calmness. The CTA button is on the home page on the very left pointed with the blue arrow.
Fig 1.2 Rough Wireframe Sketch
I decided to maintain a consistent design throughout the webpages, I will be
using
undraw (https://undraw.co/illustrations) for the illustrations and
unicon
(https://iconscout.com/unicons/explore/line) for the icons.
Week 2—Week 3
To link the above icon webpage to the html to implement certain icons in my
website, I had to link it in my document setup. The font that is linked in the
html is the Monsteratt family font.
Fig 2.0 Document Setup linking to css, icons and google font
I first made all the necessary files and made sure to link each of the html
files to the style css as well as their respective css files.
Fig 2.1 Files
I made it so that the navbar stays on the top of the page as u scroll so users
wouldn't have to scroll back all the way to the top to click onto another
page.
Fig 2.2 css of navbar
Fig 2.3 Part of the homepage scrolled down to show navbar stays in place
Each of the navbar links lead to the respective html to access the pages
when clicked on. This applies to some of the buttons and the CTA button as
well.
Fig 2.4 html of navbar
The CTA button on the home page refers to the Get Support button which links
to the get support html page. I made the colour of the CTA button to stand
out and contrast from the rest of the colour palette and the CTA buttons are
the only one coloured dark blue whilst the secondary buttons are coloured in
light blue.
A hover effect is also done on each of the buttons in css.
Fig 2.5 CTA button on home page in dark blue
Fig 2.6 Example of button when hovered on
This hover effect above applies on other buttons as well and to make it
smooth, I added a transition of 400ms on all the links and buttons.
There are 2 types of hover effects I made for sections that have cards as
well which are the one with the shadow beneath it and the one that turns
transparent with a border. To make it smooth, I added a transition of
400ms.
Fig 2.7 Resources page when one of the cards are hovered on that shows a
shadow (1st type of hover)
For the colour of the icons, I had to use the nth-child feature in css to
change the respective colours if the icons.
Fig 2.8 css of the resources consisting of hover and the different icons
colour
The second type of hover I had on the card is where it turns transparent
with a thin border when hovered on. This is applied on multiple other cards
as well on other pages. The one below here is an example from the home page.
Fig 2.9 Example of card when hovered on being transparent with a border
Fig 2.10 css of card when hovered on
The cards above were made using the article element in the html then display grid in css.
For the success stories part, I wanted to add some sort of a speech bubble
shape under the profiles so after adding a container, I added another shape
that acted as the triangle to point towards the profile. I used the
transform code to rotate the square to make it look like a triangle.
Fig 2.11 Before
Fig 2.12 After
Fig 2.13 css code to achieve that shape
For the other pages, I also reused some of the codes from the html and the css
for similar sections and made adjustments towards each of them.
Some of the buttons lead to outside links such as this one here, which shows
the link at the bottom of the page when hovered on. This will take the user to
a different window to get a therapy service in the get support page.
Fig 2.14 Start Now button being hovered on
Each of these cards' buttons lead to an outer link as well, the read now
leading to an article, the listen now leading to a podcast when clicked on,
and the watch now leading to a video of a talk.
Fig 2.15 one of the cards when hovered on and button showing the link below
Fig 2.15 Example of one of the cards in get support page being hovered on
showing the link at the bottom of the page.
I also added a video so users could click on it and witness one of the people
who experienced panic disorder and their journey.
Fig 2.16 Video in get support page
Week 4
On the last week, media queries were done for each page in the css and the
contact page was done which included a functional form which users could fill
in.
I referred to bootstrap for the html to make the form functional.
Fig 3.1 Form tested to be functional and can be typed on
Fig 3.2 html of contact form
Fig 3.3 css of contact form
Once the html and css were done, I uploaded the files on W3 markup validator
to check if there were any issues and there were several issues that had to
be fixed which was then adjusted accordingly.
Fig 4.1 PDF of Final Website
❥FEEDBACK
- Try to keep the colour scheme consisted throughout all the pages, do not have a separate colour scheme for particular sections.
- Make sure you conduct research on the mental disorder you chose.
- Pick a specific mental disorder, do not generally make a mental health website.
- Make sure your fonts are consistent throughout the pages.
- Ensure that the site-map consists of the categories of the navbar and pages in order
- Make sure some of the buttons lead to an external link.
❥REFLECTION
This project was especially the hardest since we had to make a multipage responsive website. The landing page for project 2 was already a challenge for me, so this project was on another level. Although the coding process took quite a long time, especially the html and the css for the homepage, but as I got towards working on the other pages, I became more confident and took lesser time as I could reuse some of the elements and copy pasted some of the codes. Moreover, I was pretty satisfied with how it turned out to be, having to make each button functional and have little smooth transitions and details were pretty satisfying.
Comments
Post a Comment