View the live project here.

This is the website for D25 Photography, a hobby turned business project. Alongside this a focus for the site is to have a community section where photographers can meet up and share experiences and photography challenges. This website is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential customers.

• UX
  • Owners Business Goals
  • User stories
    • First Time User Goals
    • Returning User goals
    • Frequent User Goals
  • Design
    • Colour Scheme
    • Typography
    • Imagery
  • Wireframes
• Features
• Technology Used
  • Languages Used
  • Frameworks, Libraries & Programs Used
• Testing
  • Functionality Testing
  • Compatibility Testing
  • Testing User Stories
    • First Time User Testing
    • Returning User Testing
    • Frequent User Testing
  • Further Testing
  • Known Bugs
• Deployment
  • GitHub Pages
• Credits
  • Code
  • Content
  • Media
  • Acknowledgements

• Owners Business Goals

  • 1. As the owner of the website, I want this website to help present a new photography business to the public.
    2. As the owner of the website, I want to be able to present a professional website to exhibit the skill and quality that I as a photographer has to offer.
    3. As the owner of the website, I want to see engagement with the public to understand what they want from the business.
    4. As the owner of the business, I have special offers for new customers, I want to reveal them on the site to gain customer interest.
    5. As the owner of the website, I feel it is important to have a community around you to support you and your business. I want to build a community of photographer’s newcomers and experienced alike.

-   #### First Time User Goals

    1. As a first-time user to the site, I want to understand the main purpose of the site and learn more about D25 Photography and what they offer.
    2. As a first-time user to the site, I want to be able to easily navigate throughout the site to find content.
    3. As a first-time user to the site, I want to see what D25 Photography offer. I also want to locate their social media links to see their followings on social media to determine how trusted and known they are.

-   #### Returning User Goals

    1. As a returning user, I want to access quality photos that have been taken by D25 Photography.
    2. As a returning user, I want to know what D25 Photography offers to me as a customer.
    3. As a returning user, I want to find the best way to get in contact with D25 Photography with any questions I have.
    4. As a returning user, I want to find social media links.

-   #### Frequent User Goals
    1. As a Frequent User, I want to see of new offers.
    2. As a Frequent User, I want to see the gallery content grow.
    3. As a Frequent User, I want to see if I can meet other like-minded photographers with local meet ups and photography challenges.

-   #### Colour Scheme
    -   The two main colours used are white, whitesmoke and dark grey. This color scheme fits well alongside my D25 logo.
-   #### Typography
    -   The Raleway font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Raleway really caught my eye and it pairs well with other commonly used fonts within programming.
-   #### Imagery
    -    Imagery is important. The large, hero image is designed to be striking and catch the user's attention. It also calls out community to me and this want I wanted to bring to the home page.

• Wireframes

• Navigation bar is visible on the top left hand-side of each page. The navigation bar is responsive and will adapt to mobile devices by a change into a burger menu.

• Navigation scheme:

  • On left side there is a logo.
  • Next to the logo there are three links or burger menu which contains:
    • Home
    • Portfolio
    • Contact

• The footer is consistent on all pages. The footer has been utilised for the social media links. Each link will open in a separate tab in a browser.

• The bootstrap jumbotron is placed under the navigation bar, which hosts a link to the contact page and welcomes users to the site.

• There are three bootstrap cards with images, these cards display offers for weddings, photoshoots and announce the community element of the site. Below each offer there are links to the contact page.

• Portfolio includes four bootstrap cards all with images and descriptions relating to the topic of the service offered.

• Contact form is where most of the links lead to. The user can contact D25 Photography by filling in the form with First Name, Last Name and Email. There is also a checkbox to highlight what the user is interested in.

1. A carousel of images to replace the home page jumbotron when site is gaining more frequent users.
2. An extensive portfolio for each of the services.
3. Add new page with pricing.
4. A background image for the contact page.
5. A community calendar for photography meet-ups and challenges.

• HTML5
• CSS3

1. Bootstrap 4.6.0:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Raleway' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
4. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
5. GitPod:
   • GitPod was used for version control by utilizing the Gitpod terminal to commit and push to GitHub.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Tinyjgp:
   • Tinyjpg was used for resizing images
8. Imaging Edge:
   • Imaging Edge was used to resize and edit all of the images on the site.
9. Autodesk Sketchbook:
   • Autodesk Sketchbook was used to create the company logo.
10. Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.
11. Chrome DevTools:
    • Chrome DevTools have massively assisted me during the build of this site, helping with fixes to my code and positioning of elements.

I used Chrome DevTools throughout the project for testing and solving problems with responsiveness and style issues.

Site was tested across multiple virtual mobile devices and browsers. I checked all supported devices in Chrome DevTools.

I tested on hardware devices such as: Desktop, MacBook Pro 13, iPad 11.2, iPhone 8, iPhone 11 and Samsung a71.

1. As a first-time user to the site, I found the site to be very straightforward and I understand that D25 is a photography company.
2. As a first-time user to the site, I found the site very easy to navigate around when using my mobile and desktop.
3. As a first-time user to the site, I discovered everything D25 Photography has to offer.

1. As a returning user, I saw great quality images for what D25 Photography has to offer.
2. As a returning user, it was nice to see that the site offers 20% off wedding bookings and free family photoshoots.
3. As a returning user, I found the contact page was clear and concise with the form easy to fill in.
4. As a returning user, social media links were easily found at the bottom of each page with a logo for each one.

1. As a Frequent User, I want to see of new offers, this is very visible on the home page.
2. As a Frequent User, at the moment there is one picture for each section in the portfolio page, it would be great in the future to see each section grow with more photos.
3. As a Frequent User, I have used the contact form too meeting up with others, it will be interesting to see how this develops on the site.

• The website was tested on Google Chrome, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, MacBook Pro 13, iPad 11.2, iPhone 11, iPhone 8 & Samsung a71.
• A large amount of testing was done to ensure that all pages were linking correctly and looked great on all devices.
• Friends and family have reviewed the site and highlighted any bugs and/or user experience issues.

• On some mobile devices the Home page jumbotron pushes down overflowing the line break element.
• When validating the CCS code, errors in the Bootstrap code was shown but i have been unable to fix.

The project was deployed on GitHub Pages. I used Gitpod as a development environment where I commited all changes to git version control system. I used push command in Gitpod to save changes into GitHub.

To deploy a project I had to:

• Log in to GitHub and click on repository to deploy MS1
• Select Settings and find GitHub Pages section at the very bottom of the page
• From source select none and then Master branch.
• Click Save and page was deployed after auto-refresh.

Your site is published at https://danielmichael82.github.io/d25photography//

To run localy:

• Log in to GitHub and click on repository to download MS1
• Select Code and click Download the ZIP file.
• After downloading you can extract the file and use it in your local environment.

• To complete this project I used Code Institute student template: gitpod full template

• Ideas and knowledge library:

  • w3schools.com

  • getbootstrap.com/docs I used code for navbar, jumbotron and cards from Bootstrap.

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• W3 Validator

• W3C CSS Jigsaw Warnings are from bootstrap code used that i was unable to fix.

• All content was written by the developer.

• All images were created by the developer.

• My Mentor Adegbenga Adeye for helpful feedback throughout the project.

• Tutor support at Code Institute for their support.

• Jim Morel for offering a pre MS1 webinar.

Back to Table of contents