Final Project - 5 pages Website

Jennifer Huang / 0352990
Bachelor of Design in Creative Media
Interactive Design
Final Project - 5 pages website

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.

TIMELINE:
Week 1:
Familiarize yourself with the theme of mental health and conduct research on various aspects.
Develop a sitemap outlining the structure and navigation of the website.
Begin sketching and wireframing the web pages using pen and paper or digital tools.
Create a mood board that consists of a color palette and select appropriate fonts that align with the mental health theme.

Week 2:
Start designing the website using a preferred design software or tool.
Begin coding the website, ensuring that it follows best practices and standards.
Incorporate relevant content on each page, focusing on providing valuable information and resources.
Implement interactive elements to engage the website and visitors.

Week 3:
Continue refining the design and layout of the website.
Test the website on different devices and browsers to ensure responsiveness.
Check for any potential accessibility issues and make necessary adjustments.

Week 4:
Finalize the design and content of the website.
Conduct thorough testing to ensure all functionalities are working correctly.
Submit the completed website

Submission:
At the end of the 4-week period, you are required to submit your completed website project and update your e-portfolio.

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.

---

PROPOSAL 

GOALS

• To raise awareness about eating disorders, provide valuable information, and a supportive community for individuals that are struggling with eating disorders. 
• To encourage open discussion about eating disorders, its variation, symptoms, causes, and ways to prevent/overcome/treat it.
• To offer resources and support to help people who have eating disorders.

COLOR PALLATTE

For the color palette, Since my topic will be about eating disorders and according to the iconic Empire State Building to the famed John Hancock Building, world-renowned landmarks across the nation will be lit in the signature blue and green colors in honor of Eating Disorders Awareness Week (EDAW). And every year on 15th march the lilac ribbon recalls the impact of eating disorders. 

Fig. 1 Color Pallatte

The 5 page website about Eating Disorder consist of 5 different pages which are home page, about page, causes, treatment, and contact.

---

CODING 

HTML
Since this is a 5 page website, There will be 5 different code for the html.

• index.html = home page
• about.html = about page
• causes.html = causes page
• treatment.html = treatment page
• contact.html = contact page

Fig. 2

These are the main code of the html, it consist of the stylesheet that'll be connected such as icons, fonts, and swiper. 

Fig. 3 

Footer codes. since footer will be on every page, therefore I just copy and paste everything into the rest of the html file. 

There's much more to the html, but I'll just write a conclusion on what's on the html code, Basically html code will be all the content you want in your website, all the texts, images, links, buttons, icons and more. 

At first I thought it'll be complicated to link one page to another, considering it'll be five different pages. But once I learn about how the html code can be linked to another page, it wasn't that hard, 

Fig. 4 

One of the examples of link causes page to the home page. So then when you click on the causes text, it'll lead you to the cause page and the other way around. 

CSS
Html is used to create the actual content of the page, such as written text, image, buttons, and other.. while CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects and background color..

Same as the html, there will be 5 different css for this website:

• style.css = home page
• about.css = about page
• causes.css = causes page
• treatment.css = treatment page
• contact.css = contact page

Fig. 5

These are the top css for the code, basically these are the variants of color, transition, and size that I'll be using throughout styling the website, rather than input it one by one again later, I'll simply use variant and it'll automatically generate from the root code above. 

Fig, 6

Above are example of the use of style css, the image above is the css code for button, the css code above shows the width, height, and color of the button that'll be showing on the website later on. I also put a hovering effect to make it less boring. 

JAVASCRIPT
Main.js (main javascript) 

Fig. 7 

This javascript is to control the navbar styles on scroll, show/hide faq answer and to change certain icon.

---

RESPONSIVENESS

A good website needs to be responsive on every media. Therefore it's important to code 

Fig. 8 

These are the codes for media queries. 

Fig. 9 

The code allows my website to be responsive to every media available and viewers can read the content without the text/image being distorted. 

Fig. 10 

This is one of the example of tablet view of the home page. Pretty much done (?) So then I'll just need to repeat the same for the remaining pages and that's it. 

---

FINAL WEBSITE

Fig. 11 Home Page

Fig. 12 About Page

Fig. 13 Causes page

Fig. 14 Treatment Page

Fig. 15 Contact page.

Final Website Link

---

FINAL REFLECTION

I've started a transformative learning adventure that has improved my web development knowledge and skills through the process of developing and building a responsive website. In order to develop well-structured web content and implement captivating styles to improve the user experience, I first improved my proficiency in HTML and CSS. By adopting the flexible design principles, I am now able to create websites that fluidly adjust to multiple screen sizes and serve a wide range of users across various devices. I now have a good eye for detail and make sure that each component of the website works in harmony. Additionally, I have developed important problem-solving and debugging abilities that will help me get beyond difficulties I have while developing. In addition to the technological considerations, I have embraced the significance of user-centric design, with a strong emphasis on readability, navigation, and accessibility to produce a satisfying and simple user experience. In addition to giving me practical skills, the experience of coding and building a responsive website has also given me a strong sense of accomplishment and the drive to keep researching and pushing the limits of web development.