Northern Lights Photo Trip is a site that helps people find good places to photograph the Northern Lights in Sweden. Northern Lights Photo Trip allows people to check when and where aurora photography enthusiasts meet and join a group for more relevant information.

The wireframes for the website were produced in Balsamiq. There are frames for a full width display. The final site varies slightly from the wireframes due to developments that occured during the creation process.

• Typography

  • The fonts chosen were 'Oswald' for the headings and 'Poppins' for the body text. They fall back to sans-serif respectively.
  • Poppins is an easily readable font, and Oswald was selected via https://typ.io/search

• Colour Scheme

  • The leading colour is a shade of green, which fits perfectly with the theme of the Northern Lights.
  • The colours were selected via http://colormind.io/

The website consists of a landing page and three related pages. The landing page is the default loading page. Gallery and sign-up pages are all accessible primarily from the navigation menu. There is another page called registering that users only see when they submit a form query.

• Navigation Bar

  • Featured on all four pages, the full responsive navigation bar includes links to the Logo, Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• The Landing Page Image

  • The landing includes a photograph with text overlay to allow the user to see what the website is about.
  • This section introduces the user to Northern Lights Photo Trip with an eye catching animation to grab their attention.

• Club Northern Lights Section

  • The club northern lights section allows users to see the four benefits of joining a group.
  • Here the user sees why it is worth joining the club and taking pictures of the Northern Lights during ordinary trips of club members.

• Meetup Times section

  • In this section, the user can see in which months we meet and in which cities in northern Sweden, along with information about the hotels where we stay.
  • Meeting locations are unchanged unless there is a need to adapt to weather changes, and the user is informed about the update of places by e-mail.

• The Footer

  • The footer section includes links to the relevant social media sites for Northern Lights Photo Trip. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to keep connected via social media.

• Gallery

  • The Gallery shows the user photos taken by members of the Northern Lights Photo Trip group during our previous meetings.
  • The quality of the photos taken is to encourage new users to join the club and register.

• Sign Up Page

  • This page will allow the user to get signed up for Northern Lights Photo Run to start their northern lights journey with the community. The user is asked to submit their full name and email address. The user can select the month and place that best suits his preferences. This way, a list of participants of the club's subsequent trips is collected.
  • The Sign Up Page is also prepared for larger screens over 1650px wide.

• Register Page

  • The page is shown to everyone who has registered for Northern Lights Photo Trip.
  • The website contains information on further steps to complete the selected trip.

• Later plans include rebuilding the website, including online payments with selecting a specific trip period.
• There are also plans to launch an online store to sell products with the Northern Lights Photo Trip logo.
• Add Error 404 page with back to home link.

• HTML5 - provides the content and structure for the website.
• CSS3 - provides the styling.
• Balsamiq - used to create the wireframes.
• Gitpod - used to deploy the website.
• GitHub - used to host and edit the website.
• Photoshop - used to edit images.
• Canva - used to prepare and edit images.

The Northern Light Photo Trip website has been throughly tested. All the code has been run through the W3C HTML Validator and the W3C CSS Validator. No error were found after the last test.

The HTML validator results for each page are below:

• Home Page

• Gallery Page

• Sign Up Page

• Registering Page

The CSS validator results are below:

The responsive design tests were carried out manually with Google Chrome DevTools.

All responsiveness tests were successful. The site is ready to work with devices of various widths. In addition, the site has been adapted to large screens above 1440px.

The website was tested on the following browsers with no visible issues for the user:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox

Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.

There are no known unfixed bugs on this site.

The site was also tested using Lighthouse Chrome Dev Tools to test each of the pages for:

• Performance - How the page performs whilst loading.
• Accessibility - Is the site acccessible for all users and how can it be improved.
• Best Practices - Site conforms to industry best practices.
• SEO - Search engine optimisation. Is the site optimised for search engine result rankings.

Here are the desktop parameters of each repository page:

• index.html

• gallery.html

• form.html

• registering.html

Despite the relatively good parameters, performance can be increased by serving images in next-gen formats like WebP and AVIF. The purpose of the site is also to download photos from the gallery if the user likes them. JPG and PNG image files are compatible with almost all devices available on the market.

The site was deployed to GitHub pages. The steps to deploy are as follows:

1. In the GitHub repository, navigate to the Settings tab.
2. Once in Settings, navigate to the Pages tab on the left-hand side.
3. Under Source, select the branch to master, then click save.
4. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://lukaszglowacz.github.io/northern-lights-photography/index.html

• Google Fonts - used for fonts
• Font Awesome - used for icons
• Colormind - used to generate color pallete
• typ.io - used to generate compatible two type of icons

• Unsplash - used to download licence free images
• Canva - used to prepare and edit images.