Interactive Design // Final Project

  03/04/2023 - // Week 1 - Week 14

Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School

---

INSTRUCTIONS

---

Task: My objective for this project is to create a 5-page website centered around the theme of mental health. My goal is to offer valuable information, resources, and support to individuals who are looking to enhance their mental well-being. Throughout the project, I'll have the opportunity to showcase my design and development skills while effectively conveying the significance of mental health through my website.

Proposal:

I've decided to create a website that specifically aims to assist individuals dealing with body dysmorphia. This condition has a significant impact on mental health and overall quality of life. The website aims to tackle this complex and sensitive issue by providing support and resources to individuals who may be silently struggling. The accessibility of this platform will allow a large number of people to benefit from its educational content, resources, and the opportunity to connect with a supportive online community. Additionally, the website will provide contact information for mental health professionals, emphasizing the significance of seeking guidance from experts in the field. I want to create a platform that focuses on users and aims to reduce the stigma around mental health. My goal is to make a positive impact by improving lives and increasing awareness about mental health challenges.

Process: 

Figure 1 - Homepage

I started by designing the wireframe for the homepage, focusing on creating a warm and inviting atmosphere that would motivate and support users who are seeking help. I focused on creating a design that feels clean and calming, using soft colours to create a soothing atmosphere. I made sure to avoid any elements that could potentially cause distress to visitors. The main goal of the page was to introduce the purpose of the website, give users quick access to resources, and encourage them to join a supportive community. The website's mission was made more enticing with a clear call-to-action, which encouraged users to read more about it.

Figure 1.2 - About Page

When I was working on the About page, my main aim was to write a friendly and inviting introduction that clearly explains the mission and purpose of the website. To accomplish this, I started by putting a brief but powerful description at the beginning. I also included relatable images that represent diversity and inclusivity. It's designed to be visually appealing and showcases important milestones and accomplishments.

 Figure 1.3 - Effects And Impacts Page

I chose a clean and calming layout to create a safe space for users. The page starts off by expressing empathy and letting users know that they are not alone. It also reassures them that their feelings are valid. I made sure to focus on simplicity and readability by using infographics and keeping my paragraphs concise when presenting the information. To make it easier for users to understand, I added clickable buttons with call-to-action. These buttons will direct users to resources where they can find coping mechanisms and self-help techniques.

Figure 1.4 - Seeking Help & Support

The page starts with urging users to ask for help without any hesitation. I organised the page into different sections to make it easier for users to find the support they need. Each section is dedicated to a specific type of help, like therapy options, helplines, and support groups. This way, users can easily navigate and find the right support for them.

 

 

Figure 1.4 - Promoting Body Positivity Page

When I was wireframing, I made sure to prioritize the needs of users who are dealing with body dysmorphia. I imagined a website design that is neat and organised, without any unnecessary clutter. It would include important elements like the page title, an introduction to body positivity, and a noticeable call-to-action (CTA) that encourages users to access resources. We added a navigation menu that is easy to use, so you can quickly find and access other pages on the website.

Coding: 

Figure 2.1 - Homepage Code 

The code starts with the declaration <!DOCTYPE html>, which tells us that the document is an HTML5 document. The <html> tag is used to enclose the entire document. Additionally, the lang="en" attribute is used to indicate that the website is written in English.

The <head> section of a webpage includes different meta tags that specify the document's character encoding, compatibility with Internet Explorer, and how it adapts to different devices. The title> tag is used to indicate the title of a webpage that appears in the title bar or tab of a browser.

The styling of the website is defined using CSS within the <style> tags in the same <head> section. CSS code is used to ensure that the appearance of a website remains consistent throughout all its pages. In order to make the website's design even better, we use the <link> tag to connect external CSS libraries and fonts. Some resources worth mentioning are:

normalize.css is a library that helps ensure consistent rendering of web pages by normalizing browser styles. Font Awesome is a collection of icons that you can use for different social media platforms and other elements.

Quicksand is a Google font that is used to style text on the website.

The header section is where the website's header begins. In this section, we create the navigation bar using the div class="navbar"> element. The navigation bar is made up of a logo on the left, which is represented by the div class="logo"> element, and navigation links on the right, which are represented by the ul class="links"> element. The social media icons for Twitter and Facebook are displayed using Font Awesome classes.

To ensure that the design is responsive on smaller screens, we have included a toggle button with a menu icon (<div class="toggle_btn">). When you click on this button, it will make the dropdown menu (<div class="dropdown_menu">) open and close. The dropdown menu has the exact same navigation links as the main navigation bar.

The hero section is where the main content of the website is introduced. It is encapsulated within the <main> section. The hero section, which is identified by the HTML tag <section id="hero">, is the first thing you see in the main content. It includes a big heading, marked by the <h1> tag, and a call-to-action button, represented by the <a> tag. The heading on the site gives a warm welcome to visitors, and the button encourages users to reach out for assistance.

The sections titled "About Body Dysmorphia," "We Provide Professional Solutions," and "Effects and Impacts of Body Dysmorphia" are designed in a way that makes them easy for users to navigate. They include both informative text content and call-to-action buttons, creating a user-friendly experience.

Figure 2.2 - About Page Code

The code begins by applying CSS styling to establish basic styles for the entire website. This code snippet sets the margins and paddings to 0 for all elements and makes sure that the content is neatly contained within its respective containers. By default, all elements have the 'Quicksand' font family applied to them.

The background colour of the body element is set to #A5A5B5, and there is also a background image that covers the entire viewport. This feature enhances the website's visual appeal by providing an attractive background. The header element is used to create the top section of a website. This section typically includes the navigation menu and the logo. The background colour is #6F4D42.

There are several classes that have been defined with specific styles. For instance, the styles 'action_btn' and 'action_btn2' are used to define the appearance of action buttons. They have different background and text colours. The 'dropdown_menu' class is used to define the styles for a dropdown menu.

Media queries are a helpful tool for ensuring that a website looks good and functions well on various screen sizes. Inside these media queries, specific styles are applied to accommodate different screen sizes. The styles are targeted for screen sizes with a maximum width of 992px, 576px, and 600px.

The website's HTML structure begins with a <body> tag, which holds all the content of the website.

The header section is where you'll find a navigation bar that has links to various pages, a logo, and a button that says "Sign Up."

The <main> tag is where you'll find the main content of the website. It's divided into different sections. Every section is labelled with a "id" attribute.

The website is organised into various sections, each with its own unique IDs such as "AB," "hww," "vid," "ban," and "effects." Every section includes content and images that are related to its specific purpose.

    

Figure 2.3 - Effects And Impacts Code

The website's goal is to provide support for people dealing with body dysmorphia, a difficult condition that affects self-esteem and mental well-being. It offers a virtual sanctuary where you can find valuable resources and a supportive community. By using HTML and CSS cards, the website is able to create a design that is visually appealing and easy for users to navigate. Cards provide a way to organise and present content in a modular and flexible manner. They also help create a visual hierarchy, making it easier to present information in an organised way. The website's responsive design makes sure that it looks great on different devices. When users have engaging interactions and encounter empathetic design elements, it helps create an emotional connection with them. In addition, the website has a user-friendly navigation system that uses interactive buttons or links in the form of cards. This makes it easy for users to navigate through the site and quickly find the information they need.

Figure 2.4 - Creating a Menu

It's really important to have a responsive side menu so that users can easily navigate on different devices like smartphones and tablets. This way, everyone can access the menu without any problems. We can use media queries to make the side menu look different on different screen sizes.

When creating a side menu for a support website focused on body dysmorphia, it's important to approach it with sensitivity, empathy, and a thorough understanding of what the users require. To create a user-friendly and visually appealing navigation experience, we can organise the HTML by adding relevant links and use CSS to style the side menu. 

Final Website:  

https://hasnolrafiq-0356767-finalproject.netlify.app/