Developed and designed as part of Milestone Project 2: Interactive Front-end Development module.
Please view the live project here
Mockup responsive image was created with Techsini.
Click to expand table of contents
Explore National Parks of Japan is a mobile-first one-page website that aims to users that love travelling, outdoors and enjoy adventures in nature. The website is designed to be pleasing to the eye and to provide useful information about the most beautiful national parks in Japan, how to get there and to provide weather information. The main goal of the website is to promote beautiful national parks Japan has to offer and to inspire people to travel and experience different culture.
The website was created as a Milestone Project 2 as a part of Diploma in Full Stack Software Development with Code Institute. The project is developed using HTML, JavaScript and CSS programs.
- As a site visitor, I would like to gain an understanding of the website's purpose from the landing page.
- As a site visitor, I would like to easily navigate through the site and find what I am looking for with an ease.
- As a site visitor, I would like to find the aesthetics of the website enjoyable.
- As a site visitor, I want to use interactive elements on the website.
- As a site visitor, I would like to be able to easily find and navigate to the company's social media.
- As a site visitor, I want to get in touch if I might have any queries.
- As a site visitor, I want to use map to find exciting national parks in Japan and based on the provided information decide what places to visit.
- As a site visitor, I want to get information how to get to the national parks.
- As a site visitor, I want to find about the current weather and accordingly plan my visit.
- As a site visitor, I want to find out about the current weather and accordingly plan my visit.
The user experience is simple and easy to use with an effective and clear navigation experience.
- To enable easy access to the information needed about national parks to plan the trip.
- To show the information about the most beautiful Japan's national parks to visit.
- To provide the information on how to get there.
- To ensure the users can get live weather forecast.
- The content provided is relevant and regularly updated.
- Fully responsive single page mobile first website.
- The use of APIs to show relevant information to the user.
- Interactive features that allow the user to engage and find needed information.
- An easy-to-use contact form that sends emails to the owner using EmailJS.
The website will be designed to be pleasing to the eye, consistent and user friendly.
-
Interaction Design
- Consistent design will be used throughout the website to maintain a good UX.
- The overlay navigation with effective background image will make the website look elegant and attractive.
- The users will be able to interact with Google Map by clicking on the map markers. Additionally, when selecting a national park from a dropdown list, weather data will get displayed.
-
Information Architecture (IA)
- The project was conceptualized as a single page website, divided in four sections. This structure was used because it is simple and familiar to the site visitors and it is sufficient for all user stories.
- Short paragraphs providing the relevant information will be used. This approach was selected to provide enough information, yet not to overwhelm.
- The content is organized and categorized by importance from top to bottom and left to right.
The wireframes were created in Balsamiq. Please view the wireframes for desktop, tablet and mobile screens on the following link: Explore National Park of Japan wireframes.
The traditional colors of Japan will be used for the project, primarily variations of red and white.
- Venetian Red (#C60A09)
- White (#FFFFFF)
- Red Pigment (#F23332)
- Seashell (#FFEFEB)
- Melon (#F9C5B8)
- Dark Red (#960807)
Coolors was used to create a color palette.
A Venetian Red (#C60A09) color will be used for hero text background, social media icons, headings, button and for footer section. According to the article The Traditional colors of Japan red color is associated with authority, ambition and determination.
White (#FFFFFF) and Seashell (#FFEFEB) colors will be used primarily as background colors interchangeably to differentiate different website sections, respectively. Also, white will be used for navigation section. A white color is light, neutral, and combining it with red it speaks of love and passion. Seashell color will be used because of its light note and closeness to cherry blossom color which is a symbolic flower of Japan.
Melon (#F9C5B8) and Dark Red (#960807) colors will be only used under Weather section. This combination will be used due to contrast between the foreground and background.
-
Two fonts will be used throughout the project, Crimson Pro and Work Sans. Crimson Pro will be used with
seriffont as a fallback and Work Sans will be used withsans-seriffont as a fallback. Crimson Pro will be used for the main headings and Work Sans will be used for the hero text, paragraph sections and the footer. -
These fonts pair very well together and make the website appear both prestigious and contemporary. They make a good combination of tradition and modernity.
-
Fonts were imported from Google Fonts.
- For the website I used impactful images to attract the user's attention and to try to influence user's decision to visit one of the national parks.
- I paid attention that the images match the captions and are labeled with keywords important to the website content to improve onsite SEO.
- All images are sized and compressed for the best user experience.
- I used Canva to design the custom logo.
- The logo was inspired by Japan, the land of the rising sun. A crimson-red circle inside which a map marker with a traditional pagoda is placed. In my opinion it well represents the theme of the website.
- Several icons will be used from Font Awesome to improve the website's UX.
Explore National Parks of Japan will be built to be fully responsive mobile-first website. This will be primarily achieved by utilizing the Bootstrap's grid system. The website will be a single page website separated in four sections: Explore, Map, Weather and Contact. Website will have a full screen overlay navigation which will allow user to easily navigate to each section. Also, back to top arrow button ('arrow 2 top') will allow to easily navigate to the top of the page.
- Navigation Menu
- A full screen overlay navigation, responsive on all devices.
- When hover over navigation link, the color changes.
- Responsiveness
- By using the mobile-first approach, the website will be built to be fully responsive.
- Hero image
- An effective hero background image will be used to gain instant user attention.
- Hero text centrally placed in transparent text box.
- Interactive
- Bouncing arrow located at the bottom of the hero image. When clicked, it scrolls to the next section.
- Back to top arrow button will appear on the lower right of the page when the user starts to scroll down the page.
- Buzz out social media icons when the user hovers over.
- Social media
- Social media icons will be located at the website's header to grab immediate users' attention.
- Allow users to find more information on national parks on the social media.
- Google Maps API
- Used to show the location of ten most beautiful national parks in Japan.
- Google Map markers place functionality to pinpoint exact national park locations.
- When the user clicks on the marker, the custom info window with the national park's name will appear and the national park information with the corresponding image will change on the left side. The info window will close when the user clicks the same marker or when clicked anywhere on the map.
- OpenWeather API
- Will be used to display national parks weather forecast.
- The user will select a national park from the dropdown menu list. Upon the selection, the weather information will get displayed with the current and today's weather data.
- Tooltips
- Tooltips were not initially planned but were added later as a helper tool to indicate the users about the feature functionality under the map and weather sections. Tooltip text appears when the user hovers over the 'i' icon located next to the Map and Weather headings.
- Contact form
- Contact form is connected using EmailJS which allows users to send emails directly without using the server.
- SweetAlert2 will be used to add an interactive custom modal popup window when the user submits a contact form.
- success or error message will display depending on if the user correctly or incorrectly uses the forms on the website.
- Newsletter subscription
- Add a blog section
- Create 404 error page
- Expand content with places to stay and things to do
- HTML5 was used to complete the structure of the website.
- CSS3 was used to style the website.
- JavaScript was used to make webpage interactive.
- Bootstrap v.4.6. was used to create the contact form and footer section as well to make the website responsive.
- jQuery was used for tooltip functionality.
- Balsamiq was used to create the wireframes for the website.
- Font Awesome icons were used in the header section and throughout the website for better user experience.
- Google Fonts was used to import the fonts to the website.
- Favicon was used to create the favicon for the website.
- CSS Tricks was used as a general source.
- W3School was used as a general source.
- Stackoverflow was used as a general source.
- GitHub was used for repository hosting and for storing the source code.
- Gitpod was used as the development environment for writing the code.
- Git was used as version control system to add, commit and push code to GitHub.
- Adobe Photoshop Express was used for resizing and cropping the images used on the website.
- TinyJPG was used for compressing images while preserving transparency.
- Techsini was used to create the responsive mockup image.
- Coolors was used for colour palette used on the website.
- CSS Autoprefixer was used for adding CSS vendor prefixes.
- Google Chrome Developer Tools was used to test and debug the code.
- Google Maps API was used to display Google Map within the website.
- OpenWeatherMap API was used to display current weather data for selected locations.
- EmailJS was used to create an email template and enable users to send emails directly without using the server.
- SweetAlert2 was used to add an interactive custom modal popup box when the user submits a contact form.
- W3C Markup Validation Service was used for Markup validation.
- W3C CSS Validation Service was used for CSS code validation.
- JSHint was used for JavaScript code validation.
Testing process was written in a separate file. Please click here for the testing process.
The project deployment to GitHub Pages is explained in the below steps:
-
Login into GitHub, locate and select Explore National Parks of Japan from the list of Repositories.
-
At the top of the Repository page, under the sub-headings, select "Settings" button.
-
Scroll down the page until you reach "GitHub Pages" section.
-
Under the "Source" sub-section, select "master" branch.
-
Click "Save" button.
-
The page will refresh. To locate the link to the published site, scroll down again to the "GitHub Pages" section. Your link will be highlighted in the green box per screenshot below.
To fork the repository please follow the below steps:
- Go to the main page of Explore National Parks of Japan repository.
- At the top right corner of the page click on the "Fork" button.
- You have forked the repository.
To create a local copy of the repository please follow the below steps:
-
Login into GitHub with your account.
-
Go to the project repository.
-
Click on the "Code" button (located next to the green "Gitpod" button).
-
From the dropdown menu copy the HTTPS URL.
-
In your local IDE open the terminal.
-
Change your working directory to the location where you want the cloned project saved.
-
Type "git clone" and paste copied URL.
git clone //github.com/USERNAME/REPOSITORY -
Press enter and your repo will be created.
- W3School was used:
- to create 'Back to Top Arrow' using JavaScript - credit was given in scroll.js file
- for a full screen overlay navigation
- Hover.css was used for social media icons animation
- Send email function was adapted from Code Institute walkthrough project
- sweetalert2 was used for a custom pop-up alert
- CSS Tricks was used for media queries for iPad Pro 12.9"
- Coderwall was used for media queries for iPhone 5
- Tooltip functionality was sourced from Bootstrap
- A solution for changing tooltips arrow color was found on the following Stack Overflow post.
- Info window feature for Google Maps was adopted from the following Stack Overflow post
- The custom logo was designed using Canva
- Hero background image was sourced from Pexels, credit: photo by Tomáš Malík on Pexels
- shikotsu-toya-np-jpg was sourced from Pexels
- mt-nantai-nikko-np.jpg was sourced from Unsplash
- fuji-hakone-izu.jpg was sourced from Stocksy, credit: photo by Gavin Hellier on Stocksy
- akan-mashu-np.jpg was sourced from Stocksy, credit: photo by Song Heming on Stocksy
- aso-kuju-np.jpg was sourced from Unsplash, credit: photo by Tom Vining on Unsplash
- iriomote-ishigaki-np.jpg was sourced from Unsplash, credit: photo by Hiroko Yoshii on Unsplash
- nikko-np.jpg was sourced from Unsplash, credit: photo by DustyRoze on Unsplash
- sakai-np.jpg was sourced from Stocksy, credit: photo by Song Heming on Stocksy
- following images were sourced from National Parks of Japan Facebook page with the author permission:
- shikotsu-toya-np.jpg
- shiretoko-np.jpg
- towada-hachimantai-np.jpg
- yakushima_np.jpg
- yoshino-kumano-np.jpg
- All icons were sourced from Font Awesome
Below websites were used for a general layout inspiration:
The text was adapted from:
- My mentor, Mr. Spencer Barriball, for the helpful feedback and guidance.
- Code Institute for all course materials and ongoing support.
- Fellow Code Institute students for their feedback and suggestions.
- My family and friends for testing and useful feedback.
The information provided on this website is for educational purposes only.