Stephen O'Connor Photography

View the live project here.

Stephen O’Connor Photography is a fictional photography website created for my first milestone project in the User-Centric Development module with Code Institute.

The website was created so that the fictional professional photographer can showcase his photography and also inform the user of workshops he offers with the options to enquire about availability and for more details of the workshops, view his social media accounts and a form option to contact him. All images were taken by myself in Tanzania but I am not a photographer or actually based in Tanzania.

User Experience (UX)

• User Stories

• First-time Visitor Goals:

  1. As a first time visitor, I want to understand the main purpose of the site and learn more about what it has to offer
  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
  3. As a First Time Visitor, I want to be able to see images taken by the photographer, learn more about the workshops on offer, also I want to locate their social media links to see their followings on social media to determine how trusted and known they are.

• Returning Visitor Goals:

  1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
  2. As a Returning Visitor, I want to find the best way to get in contact with the organisation about booking a photography workshop.
  3. As a returning Visitor I want to find the websites social media channels.

• Frequent Visitor Goals

  1. As a Frequent User, I want to check to see if there are any newly added images.

• Design

  • Colour Scheme

    • Colour scheme was subtracted from the main image on the home page, using a selection of blues and browns with a white background, I chose white for the background as to not distract the user from the images.
    

  • Typography

    • The Montserrat font is the main font for content used throughout the website with Sans Serif as a fallback font if the imported fonts do not load. Montserrat is a clean a friendly font which works well to show the website is very welcoming.
    • The Julius Sans One font is used for al thel headings throughout the website with Sans Serif as a fallback font if the imported fonts do not load. Julius Sans One gives the look of a quite simple font and easy to read but, yet also professional to keep in mind it is a professional photographers page.
    • The Permanent Marker font is used for just the welcome message on the home page with Sans Serif as a fallback font if the imported fonts do not load. Permanent Marker is quite a fun font that gives the look of uniqueness as would with each owns individual hand writing with a marker, I chose this to give the instant message that these images are unique to this Photographer and it is a friendly website.

  • Imagery

    • The large, background hero image was used to catch the user's attention straight away and show them what to expect throughout the site with stunning photographs of wildlife.
    • On the home page you see 3 images of wildlife to add to the above statement
    • On the workshops page you see 3 images this time involving culture to show that the workshops on offer are not just taking photographs of animals but always you will get to learn more about what you are taking photos of.

• Wireframes

  • Home Page Wireframe - View

  • Gallery Page Wireframe - View

  • Workshops Page Wireframe - View

  • Contact Page Wireframe - View

Features

• Current Features

  • Responsive on all device sizes.
  • Collapsible Navigation bar for smaller devices
  • Modal to contact the page about workshops, with option to enquire about availability, more information or both.
  • Contact page form to email the site directly.

• Future Features

  • More images in gallery page with a carousel to navigate through the images.
  • Reviews section to be added to workshops page being embedded from google reviews.
  • Availability calender to be added to workshops page so users can see when is the next available class.

Technologies used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.5.0:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the colour transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the Monsterrat, Julius Sans One and Permanent Marker fonts into the style.css file which is used throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add social media icons in the footer and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a first time visitor, I want to understand the main purpose of the site and learn more about what it has to offer

     1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image of a “Hippo pond” filled with animals with text Karibu(welcome).
     2. The main point is made clear right under the hero image “Stephen O’Connor Photography”
     3. The user has two options in the main body of the home page (Full Gallery and Learn More).

  2. As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

     1. The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar, each link describes what the page they will end up at clearly.
     2. The Nav bar follows the page to ensure the user always has somewhere to go and doesn't feel trapped as they get to the bottom of the page.
     3. On the Contact Us Page, after a form response is submitted, the page refreshes and the user is brought to the top of the page where the navigation bar is.

  3. As a First Time Visitor, I want to be able to see images taken by the photographer, learn more about the workshops on offer, also I want to locate their social media links to see their followings on social media to determine how trusted and known they are.

     1. Once the new visitor reads the home page there is button under the image to direct them to the full gallery section. And a button to direct them to the workshops page.
     2. The user can also scroll to the bottom of any page on the site to locate social media links in the footer.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

     1. The navigation bar has a "Contact" Page.
     2. There is a form on the contact page that will be the best way to get in contact with any questions.

  2. As a Returning Visitor, I want to find the best way to get in contact with the organisation about booking a photography workshop.

     1. The navigation bar has a "workshops" Page.
     2. Here they can fill out the Modal form on the page.
     3. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

  3. As a returning Visitor I want to find the websites social media channels.

     1. The social media icons can be found in the footer of each page are are blue in colour to stand out from the background.
     2. Whichever link they click, it will open in a new tab to ensure they can get back to the website easily.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added images.

     1. The user would already be comfortable with the website layout and can easily the gallery section

Further Testing

• The Website was tested on Google Chrome, Opera and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone6 & iPhoneX Plus.
• Testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• Seems to be a delay with images loading on all pages.
  • Will look to move images to external site for future updates.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Credits

Code

• Coding ideas came from:
  • The Code Institute training videos and projects
  • Bootstrap documentation
  • Stack Overflow
  • W3schools

Media

• All Images were created by me.

Acknowledgements

• My mentor Precious Ijege for helping me through the project
• The Slack community for their useful tips and support
• The Code Institute tutor team and also the student support team for their help