Be Kind To Your Mind is a support site for people who may be struggling with their own mental health or maybe just want to learn more about mental health and mindfulness therefore the target audience for the site being a wide demographic.
The Intent of the site is to provide users with a positive experience so they can learn clearly about the world of mindfulness and improving one's mental health.
The Deployed site can be found HERE
- Provide users reliable information on mindfulness and positive mental health.
- Provde users access to mental health support resources.
The Audience for this site avails to all demographics of people looking to improve their mental health or keep up to date with latest information on mental health and mindfulness.
Information throughout the site is easily readable and distuingishable from each element to the next with the use of white space and colour contrast. The user knows their location throughout the site by referring to the navigation link which will be marked based on the users location on the site.
- Keep up to date with positive mental health techniques.
- Find Mental Health support.
- Find information on Mental Health and Minfulness
- Find Mental Health Support
- Navigate through the sites content and find information with ease.
The aim of the colour scheme was to provide a "soothing" and "calm" feeling to the site and not overload the user's senses with harsh colours or elements. The Lightblue colour choice was motivated through research and the pyschological impact colours have on a person with portraying feelings of calm and serenity. The Secondary colours were chosen for good contrast on the lightblue primary colour.
The main typography used throughout the site was Oswald.This a clean and professional looking font which allowed for users to put their trust into a site where they recieve vital information from.
Images displayed throughout the site have been sourced from free stock photo websites. The Icons also seen throughout the sight were obtained from Free icon platforms. The goal of the images used was to create a relatable scene for users whilst also improving the appearance of the site.
The layout is needed for the site to flow well and information be found and read easily. This was achieved by creating white space around the site's elements on each page. The layout was coded after designing wireframes to give an initial feel of how the site would flow.
The Wireframes for the site layout can be accessed HERE
This is the first view once a user lands on the site, The aim was to not overload and ease the user into the sight. Personal motivation to boost the user is portrayed in a daily quote in the hero image
This section allows users to get a basic understanding of some of the techniques to improve your mental health When a user hovers over one of the tiles the shorthand information is displayed with access to extended content on the chosen technique
This section was added to give users a quick relief from stress or anxiety, This is done by small action paragraphs with an action icon displayed above. On Hover the tiles are interactive.
This section gives the user options to external Mental Health Podcasts and Mobile Apps. This is displayed in an interactive carousel with links for each resource on the banner images.
This element gives the user more information on mindfulness and mental health and answers some of the main questions around the areas. This is achieved by implementing an accordion element giving the user the option to view and close the content on command by clicking on each accordion element.
This section gives the user to sit back and watch or listen to two popular videos explaining mindfulness and mental health. These are embedded Iframes from youtube.
This section shows the extended information on the techniques to improve mental health from the tiles on the homepage.
This form element allows the user who may need some additional support to book a call with a certified counsellor.
This section displays tiles to some popular helplines and support platforms. When the mouse is hovered over each tile the contact information and link to the Support line is displayed.
This Window displays a confirmation message to let the user know their booking request has been successful
- Live Support Chat.
- Mindfulness Courses.
- How to help people around you with mental health issues.
- The form data to the action sends the values through the request succesfully, as this is a static site the values could not be displayed on the form confirmation page without the use of different frameworks.
- Links on the .next and .prev buttons on the carousel needed to reference something. As i was using these buttons to slide the carousel it didnt link anything.
href="javascript:void(0)";.
- The sites performance was setback by using png image files.
- Convert all png files to webp files to increase performance
- Initally the buttons were implemented with an anchor tag surrounding. This threw up an error in the validator
- Remove the button and style the anchor tag as a button
background-color: white;
color: #3a3a3a;
padding: 7px 7px;
transition: all 1s;
text-transform: uppercase;
- All HTML pages passed validation with no errors.
CSS page passsed validation with no errors
- HTML5
- CSS3
- Javascript
- Google Fonts - for the font family.
- Font Awesome - to add icons to the social links in the footer element.
- GitPod - to creat my html files & styling sheet before pushing the project to Github.
- GitHub - to store my repository for submission.
- Free-Convert - to convert png files to wepb.
- Am I Responsive? - to ensure the project looked good across all devices.
- Favicon - to provide the code & image for the icon in the tab bar.
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The Deployed site can be found HERE
- https://www.cdc.gov/mentalhealth/learn/index.htm
- https://www.thehealthy.com/mental-health/stress/quick-stress-relief/
- https://www.aware.ie/
- https://www.helpguide.org/articles/stress/quick-stress-relief.html
- https://www2.hse.ie/mental-health/self-help/activities/mindfulness/
- https://www.helpguide.org/articles/healthy-living/the-mental-health-benefits-of-exercise.html
- https://www.mentalhealth.org.uk/explore-mental-health/a-z-topics/diet-and-mental-health
- https://www.mercycare.org/bhs/
- https://www.mhcirl.ie/
- https://turn2me.ie/
- https://spunout.ie/
All Images used came from https://www.pexels.com/
All Icons used came from:
https://youtu.be/3nwwKbM_vJc https://youtu.be/rkZl2gsLUp4
- Carousel Code Extracted from: https://www.w3schools.com/howto/howto_js_slideshow.asp
- Accordion Code Extracted From: https://www.w3schools.com/howto/howto_js_accordion.asp