A live demo can be found here
CGphotography is a couple photography website.
It presents previous works of the photographer in order to attract new clients. The portfolios present:
- Couples photographs
- Wedding photographs
- More than two photographs
Each portfolio type consists of three sub portfolios which photographs of individual couples.
The main purpose of the web page is to have a high conversion rate. Therefore, a potential customer can find the Contact button both in the menu bar and at the bottom of every page.
The goal of this web page is to present previous works of the photographer and as such, attract new clients.
Target audience is:
- Couples with the age between 20-45 years.
- Couples interested in photo services.
- Couples interested in wedding photo services.
- Couples interested in pregnancy photo services.
- Reach new, potential customers.
- Have a high conversion rate.
- Have a fully proficient web page.
- Have an intuitive design.
- Find a photographer for their photo session.
- Find previous works made by the photographer.
- Find contact information of the photographer.
Both business and customer goals are addressed through user stories.
- As a photographer, I want to show my previous works so that people hire me.
- As a Photographer, I want my page to load fast so that the user is engaged.
- As a Photographer, I want the potential customers to have an easy way to find my contact details so that they can order a photo session.
- As a photographer, I want to show positive reviews so that I convince people to book my services.
- As a photographer, I want them to know my current location so that I can avoid orders that are too far away for me to come.
- As a Photographer I want that the user remember me so that they come back.
- As a UX designer, I want to track the user behaviour so that I can improve the user experience.
- As a UX designer, I want to track the user behaviour so that I can identify the possible user confusion.
- As a UX designer, I want to find which parts are not accessed by the user so that I can improve the website’s structure.
- As a customer, I want to know the prices of the services so that I can decide if I want to pay the price.
- As a customer, I want to see the previous work so that I can decide if I would like to have something similar or not.
- As a customer, I want to have an easy way to contact the photographer so that I can book a session.
- As a customer, I want an easy way to contact the photographer so that I can clarify some information.
- As a customer, I want to know if the photographer is willing to come to remote/distant locations so that I can have a photo session there.
- As a customer, I want to know what is the duration of the photo session so that I know how much time it will take.
- As a customer, I want to know how many photos I will get so that I can assess if this is enough for me or not.
- As a customer, I want to know if the photos will be edited so that I have a professional editing of my photographs.
- As a customer, I want to know what are the photographer’s values and vision so that I can know if they align with mine.
- As a customer, I want to know if I can change the clothing during the photo session so that I can have different looks.
- As a couple, we want to be able to see when the photographer is available so that we can book his services on our wedding day.
- As a couple, we want to divide our photo session in two different days so that we can have a wedding and pre-wedding photo session.
- As a couple, we want to know if any discount system exists so that we can take benefit of it.
- As a couple, we want to have a physical photo album so that we can have a paper version of our photographs.
- As a couple, we want to choose how our photo album looks so that it is personalized.
All User Stories were added as issues on GitHub in order to keep track and address them in the project's dashboard.
All the User Stories have been assessed against value/complexity chart. Considering the relative short time for implementation of the web page only the MVPs will be implemented in the first release of the web page.
Explanation of the chart
- The top right corner have been given the higher priority of implementation because it represents the most important functionality features. Such as:
- The Contact Form.
- The Portfolios.
- The Gallery.
- Features with a medium value and with a low complexity have been addressed in second place since most of them can be easily resolved through creation of the FAQ Page.
- Features with low complexity and low value where addressed in the third place. It didn't represent a must feature for the first release but was very easy to implement.
- Features with medium value and high complexity have been postponed for future releases.
User Stories identified as important for MVP were attributed the respective label in the issues section on GitHub.
Following colors have been used:
#932244- dark pink#7e1f3f- darker version of the initial pink#000000- black#ffffff- white#898989- grey#6a6a6a- dark grey
The stand out color for this web page is dark pink which according to Color Psychology is associated with romance, love, femininity and tenderness. Concepts that seem relevant for a couple photography web page.
Considering that this color is very strong and easily attract attention I decided to not use any other bright color. Therefore, the other used colors are the classic white and black.
The grey colors were used only for the "close" button in the Contact Form.
The used Font for this project is Montserrat with the font weight:
- 400 - for most of the text.
- 500 - for logo, button and headers on the hero images.
- 600 - for heavy headers.
The Montserrat font was chosen for its easy readability and common use.
Considering that CGphotography has at its core presentation of photographs I decided that it will be more helpful to have mockups than simple wireframes. The mockups were done in figma.
Link to the mockups can be found here. The mockups were done for the mobile first approach. The final result on tablet and desktop has only minor differences in comparison with the mobile version. Besides the preliminary design of the web page, I also created a prototype of the flow between the pages. You can try this by pressing the play button in figma.
In case the link to the mockups doesn't work please find the pictures of the mockups here.
- Navigation bar - Has a
fixedposition in order to ensure that the user can access it at any time.- CGphotography logo in the left corner which serves as a link to go back to the landing page.
- Links that can be accessed are placed on the right side. They collapse if the screen width is bellow 992px.
- Footer
- Call to Action part - contains call to action text and the contact button.
- Main part
- Explore column - contains links to different parts of the web page.
- Contact column - contains contact information. It disappears on small screens in order to avoid a cluttered footer.
- Follow me column - contains links to social media
- Addresses issue #3, #5, #10 & #11.
- Modal Contact Form
- The Contact Form is present on every page so that the user can easily find it. Additionally, it comes up as a modal window in order to fully capture the attention of the user, as well as to reduces the loading time.
- Addresses issue #3, #10 & #11.
- Hero Image - with the exception of the landing page which has a carousel.
- Each page has a hero image with text which is related to the content of the page. It helps the user to understand where they are at the moment.
- Portfolio - every type of couple photography has its own portfolio and a subsequent portfolio with specific photo sessions. They were created in order to have a clear distinction between different types of photographs and give the user the chance to choose the portfolio in which they are the most interested.
- Addresses issue #1 & #9.
- Gallery - every individual album contains a gallery of 12 photographs. The gallery are created in order to show the previous works of the photographer.
- In order to have a fast loading page the maximum width of a photograph is 750px. This decision was made considering that 750px is the largest size the photograph will ever have on a screen. In this way the weight of the photographs is greatly reduced.
- Addresses issue #1, #2 & #9.
- Testimonials - this section was created in order to show to the potential customer what other customers though about the photographer and her work.
- Addresses issue #4.
- FAQ page - after the evaluation of the User Stories it became clear that a potential customer can have a lot of common questions which can be answered in an FAQ. In this way the user will be informed in a short time and will contact the photographer only for more specific question. In the same time, the photographer will not have to answer to a common question on repetitive occasions.
- Addresses issue #5, #8, #12, #13, #14, #15, #17, #19 & #20.
- About page - this page's goal is to give a short insight about the photographer and present once again the contact details. This is important, especially because the contact details are omitted in the footer on smaller screens.
- Addresses issue #3, #5, #10, #11 & partially #16.
- FAQ page - User Story #21 & #27, where the user is interested in the option of a physical photo album.
- About page - User Story #16, where user is interested in the photographer's values and vision.
- Contact Form - User Story #18, where the user wants to know the photographer's availability. Additionally, they want to be able to book a date directly in an existing calendar.
- Album covers - Make it more obvious that the albums are clickable in desktop view.
- Gallery images - It will be better to load the images one after another and not all in the same time.
- Reviews - To link the reviews to the relevant portfolios in a future release.
- Gallery carousel - It will allow to see each photo individually, in a bigger size.
- HTML - served as the base language for this project.
- CSS - used for styling the HTML code.
- Sass - used for creation of variables, mixins and easy nesting and grouping of styles.
- Bootstrap - used for responsive grid system. As well as for navigation, modal contact form and carousel.
- JQuery & Popper - were used in connection with the functionality of the Bootstrap library.
- FontAwseome - used for social media icons as well as for contact related icons.
- Google Fonts - used for the Montserrat font.
- WebStorm - used as local IDE for this project.
- Git - used for version control.
- Figma - used for creation of mockups.
- favicon.io - used for creation of the fav icon for the web page.
- GIMP - used as image editor.
- Tinyjpg - used for image compression.
- Am I Responsive - used for testing purposes as well as to create the image displaying the web page on different devices.
- Google Chrome DevTools - used for testing and debugging.
- Google Analytics - used for user testing purposes.
- Hotjar - used for user testing purposes.
- PageSpeed insights - used for testing the loading speed of the site.
Testing information can be fond here.
This web page was locally developed in WebStorm and pushed to the remote repository - GitHub. The live page is hosted on GitHub Pages.
In order to connect the local IDE to GitHub I used the command git remote add origin and added the link to the remote repository: https://github.com/Itamichan/CG_photography.git
My main local branch is master which I deployed as origin/master to GitHub. All different features were first developed on a separate branch and deployed on a remote, same name branch, on GitHub. Once the features were ready to go live they were merged into the master branch.
Used commands during deployment:
git branch feature/specific_feature- to create a new local branch for a specific feature.git add .- to add the files to the staging area.git commit -m "text message here"- to commit the files.git merge name_of_the_branch --no-ff- done from master branch in order to merge a feature branch into the master branch without fast forwarding.git push origin master- to push to origin master branch on GitHub.git push origin branch_name- to push to origin specific branch name on GitHub.git checkout name_of_the_branch- in order to leave the current branch and move to a new one.git status- was extensively used in order to see the current status of the files.
- Log into GitHub.
- From the list with repositories choose CGphotography.
- Go to settings.
- Scroll down to GitHub Pages section.
- Select as a source master branch.
- The page is now automatically refreshed and the project is deployed.
- To access the project scroll down again to GitHub Pages section and click on the provided link.
- For your convenience, save the link as a bookmark.
For more detailed information regarding deployment to GitHub Pages click here.
Clone this project from GitHub:
- Go to CGphotography GitHub repository.
- Click on "Clone or download" green button.
- Copy the URL to the repository.
- Open the terminal in your local IDE.
- Choose the working directory where you would like to have the cloned repository.
- Type git clone, and add the URL you copied from Github:
git clone https://github.com/Itamichan/CG_photography.git - Press Enter and your local clone will be created.
- You are good to go.
For more information regarding cloning of a repository click here.
All content on the web page was written by me with the exception of the quote in the About page which was written by an anonymous person and posted on dpreview.com.
Photographs for Couples page:
Photographs for Wedding page:
Photographs for More than two page:
Photographs for various pages:
- Ion Ples Alexandru photography
- Vadim Jantic photography
- Maxim Chumash photography
- Scott Kelby
- Fiona Kelly photography
- Peter McKinnon
- Dave Marrow photography
- Vadim Jantic
- Inspiration resources for writing this README file:
- UX Planet
- tubik
- stormotion
- Agile Alliance
- W3schools
- W3C
- stack overflow - massively used for debugging and understanding certain concepts.
- CSS-Tricks
- MDN web docs
This web page was created for educational purpose only.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent