Skip to content

Latest commit

 

History

History
298 lines (175 loc) · 14.2 KB

README.md

File metadata and controls

298 lines (175 loc) · 14.2 KB
Raw

Shinrin-Yoku

display of site seen from different devices

This is a promotional website for a forest bathing meetup group, one of its strategies is to promote the importance of trees and nature.

Forest bathing originated in Japan in the 1980s, where it is known as Shinrin-Yoku. It is the practice of walking in any natural environment and consciously connecting with what’s around you.

This site will hopefully create a community of people who appreciate trees and nature, and maybe wish to learn more about protecting them in their local city.

Table of contents

  1. UX

  2. Features

  3. Technologies Used

  4. Testing

  5. Deployment

  6. Credits

UX

Scope

This is a fictional meetup group, so there are no limitations on the content. The site will be made to an MVP first, and if there is additional time, content/features can be added.

User stories

Visitor goals
  1. As a visitor to the site, I want to read about forest bathing and its benefits, so that I can decide if I wish to take part.
  2. As a visitor to the site, I want to register my details, so I can be added to an email list to receive updates.
  3. As a visitor to the site, I want to view nice pictures of nature.
  4. As a visitor to the site, I want to read about locations of future forest bathing events.
Owner goals
  1. As the site owner, I want to promote my service and have participants for meetups.
  2. As the site owner, I want to promote the benefits of Trees and nature in our environment.

Structure

Site is put together using HTML, the Bootstrap framework and CSS.

A Mobile first approach is taken - site is all on one page with three sections, navigation menu at the top.

Navigation between sections can be done via the navbar or by "call to action" buttons.

Skeleton

Section 1 - Home page - Navbar at top. Hero image below. With brief headline paragraph. Under that a mid-section with an introduction paragraph.

Section 2 - About page - Here is displayed various panels of either Text or images promoting forest bathing, in a gallery format.

Section 3 - Contact page - Email subscribe form, contact information and links to various social media channels in footer section.

Wireframe

Below is the initial wireframe.

initial wireframe

Surface

Colours

The site theme is about connecting with nature, so the colours too are connected to nature. Various shades of green or natural colours are used. Point of reference for the colours chosen are taken from the site images using a colour palette tool.

demonstration of colour sourcing to image

Root variables are used so colours can be updated quickly if revisions are needed.

Colours used are:

  • "Woodland" Green (#4e5c28) : Used for headings and text when on light background. This colour is also used as background on footer.
  • "Green Mist" (#c9d3aa) : Used on the background of the body and navbar.
  • "Nador" Green (#4F5C54) : Used on the background of the mid section between hero image and about section.
  • "Lemon Grass" (#9da19a) : Used for text shadow on the hero image text, and box shadow on cards.
  • White (#FFFFFF) : used for text when on a dark background.
  • WhiteSmoke (#F5F5F5) : used for the footer icons.

Site colour palette

As colours are configured using rbga() properties, these can be tweaked with opacity values to give more variety to the palette while keeping the uniformity.

Icons used are from fontawesome.com. These icons are visible on buttons, the sub heading of each card in the card gallery and as the social media icons in the footer.

Images used are ones I took myself. The original high quality images are located here. Images are in jpg format and have been compressed.

Fonts :

Sample of fonts selected

  • "Shadows Into Light" was used for Header (h1,h2 and h3) text elements
  • "Montserrat" was used for all other text.

On slow connections, another font may be visible while the site is loading.

back to contents

Features

The site is laid out on one page that has several sections.

Existing Features

  • It is responsive to screen size thanks to bootstrap.

  • The navbar remains fixed to the top of the screen, and collapses into a hamburger button on smaller screens.

  • One of the image cards (title: improving air quality) in the gallery is hidden on small screens to improve flow of the page.

  • There is form validation on subscription form, an alert displays if name or email fields are empty.

  • In the first two sections a call to action button prompts the user to another section.

  • Hover animations are used on the cards (box shadow appears) in the about section and the social media icons (grow in size) in the footer section.

  • Contrasting colours and aria labels are used to ensure site supports visually impaired visitors.

  • Some images of trees can be clicked on and the user will be brought to another site that pinpoints the exact location of the tree.

Features Left to Implement

  • Have the subscription form add the visitor details to an email list database.
back to contents

Technologies Used

back to contents

Testing

Testing documentation can be found here in a seperate file .

back to contents

Deployment

For easy deployment on GitHub pages you will need a GitHub user account and a possibly a Gitpod user account. If you wish to make changes to this repository, please follow the GitHub steps first.

GitHub

GitHub is a code hosting platform for version control and collaboration. It's free to enrol for a user account and I would recommend you have one if you wish to deploy this repository and make changes.

When you have a GitHub account you can simple click on the Fork button on the top right corner. This is clone the Shinrin-Yoku repository for your GitHub account, then you can make any changes you like.

Gitpod

The site can be edited easily on a Gitpod online workspace, you first register a free user account on http://gitpod.io/, then download the Gitpod extension on your preferred internet browser. On signing up you will be expected to have a GitHub user account.

Once you have the extension on your browser, a green Gitpod button will appear beside this repository in GitHub. For best results fork the repository in your personal account before you open it in Gitpod.

GitHub Pages

Once you have the completed site in your own repository, you can deploy to GitHub pages by the following steps.

  1. On GitHub, go to the completed sites repository.
  2. Click on settings, on the settings page scroll down the the GitHub Pages section.
  3. Under GitHub pages, Select the appropriate branch or folder the index.html is in.
  4. Click on save. A message should then appear advising the URL of your deployed site.

Cloning

If you prefer working on the repository locally, you can clone the repository to your desktop by the following steps.

  1. Go to the Shinrin-Yoku github page.
  2. Above the list of files, click on the code button.
    • To clone the repository using HTTPS, under "Clone with HTTPS", click the paste icon.
    • To clone the repository using an SSH key, click Use SSH, then click the paste icon.
    • To clone a repository using GitHub CLI, click Use GitHub CLI, then click the paste icon.
  4. Open Git Bash.
  5. Change the current working directory to the location where you want the cloned directory.
  6. Type 'git clone', then paste the URL you copied earlier above.
  7. Press Enter to create your local clone.

more detailed instructions available here

Forking

You may wish to contribute to this website and have your contribution published, if so, you are welcome to follow these steps below.

  1. Go to the GitHub website and log in.
  2. Open https://github.com/kenwals/shinrin-yoku
  3. In the top right-hand corner you will see a fork button, click on this fork button .
  4. This will create a copy the Shinrin-Yoku repository in your github account.
  5. Once you're finished making changes you can locate the 'New Pull Request' button just above the file listing in the original repository(https://github.com/kenwals/shinrin-yoku).
  6. If your pull request is approved, it will be merged into the master version of the Shinrin-Yoku repository at a future date.

more detailed instructions available here

back to contents

Credits

Content

Resources

Media

Acknowledgements

back to contents