My project is a Photographer's Page to showcase their photos and work to the public. Users can view a carousel that exhibits some of the best photos. The Gallery is where the majority of photos can be viewed and a Package Planner where users can tailor bespoke packages to their needs. Users can find out about local events and read testimonials of previous customers.
My project is designed for users who are looking for a photographer. Users should be drawn in by the images and find more information as they navigate through the site. Users want to know if the service is what they are looking for, which the user can see in the galleries. Users can pick the package that suits them best by an interactive form and view testimonials from previous customers.
As a User I would want to be:
- drawn in by the content, to want to see more
- informed about the photographer, so I know about them
- able to view previous work, to see how good the service is
- able to choose what I want from the service, so I don't have something I don't want
- able to see what others think, so I know others opinions
- able to see what events are on, to see the photographer in person
- able to leave a testimonial, to let them know what I think
Mock ups can be viewed for each page below:
Currently these are the features that are implemented and how each feature provides UX:
- Carousel
- allows users to see mutliple fullscreen images, to make them want to see more
- About
- allows users to be informed about the photographer, to know about them
- Galleries
- allows users to view preivous work, by viewing the galleries and inspecting the images
- Package Planner
- allows users to select a package for an occasion, by using the interactive form
- allows users to select what they want, by filling in the form selected
- Testimonials
- allows users to leave a testimonial, by filling in the testimonial form
- allows users to see other users testimonials, to know others opinions
- User Accounts
- to allows users to store packages
- Bootstrap
- Bootstrap gives my project a simple, responsive layout
- JQuery
- JQuery is used to give better UX.
As I developed my project I did manual tests to check it was working as designed and displaying correctly.
I have also tested my project for responsiveness and on different browsers which is detailed in Browser Tests
As I deployed a new feature, I did manual tests to check the UI and UX worked as expected. Below is a list of features and the tests I carried out:
- Carousel
- Navigate to homepage
- When pointer is over image, it will not move on to next image
- Click on next arrow, will move to next image
- Click on preivous arrow, will move back to previous image
- About
- Navigate to About page
- Click on one of the images, will go to galley related to image
- Galleries
- Navigate to Gallery page
- Click on one of the images, will go to galley related to image
- When in the galleries click on link for another gallery, will got to other gallery
- Click on image in gallery will open a lightbox, to view the image
- Click on next arrow in lightbox, will move to next image
- Click on preivous arrow in lightbox, will move back to previous image
- Click on close in lightbox, will close lightbox
- Package Planner
- Navigate to Event page
- Click on a package, shows a form for the related package
- Try submit the form with empty inputs, will display required message
- Try submit the form with name filled, will display required message address
- Try submit the form completed, will display success message
- On successfully submission, submit button will be disabled to prevent duplicates
- Testimonial Form
- Navigate to Contact page
- Try submit the form with empty inputs, will display required message
- Try submit the form with name filled, will display required message location
- Try submit the form completed, will display success message
My project is deployed on Github Pages hosting platform and can be viewed at Photographer's Site
When deploying the project I needed to:
- Create a new branch for gh-pages
- Change the links to include the repository name
To run locally you need to clone the repository
- git clone https://github.com/TMcNally17/Stream-1-Project.git
Use the master branch
- git checkout master
Run project
- Run index.html on local host
All images are from Pexels
-
Index
-
About
-
Gallery
-
Portrait Gallery
-
Wedding Gallery
-
Party Gallery
-
Event Gallery
- Simplelightbox
The gallery lightboxs are from Simplelightbox
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
