Welcmome to Foodie Photo Pop

Code Institute: Milestone Project 1

What does it do and what does it need to fulfill?

The goal of the Foodie Photo Pop project was to have a place that a potential customer can land on and make it easy for them to view the companies work and get in contact with.

Foodie Photo Pop is a fictional food photography business that provides service of creating high quality. Well it's slightly fictional. I used to run this business a couple years ago when I hired out my photography services. :)

It's clean design that puts the portfolio of the photographer front and center. 'Walking the talk' was my thinking for this project. You can see what the work the photographer has done and intrigue the potential customer to reach out asking about services. I specifically left the services information vague so that it would jump start a conversation between the business and potential customer.

This was my first of four Milestone Projects that are a part of the Full Stack Web Development Program at The Code Insitute. That requirements were to make a responsive and static website with a minimum of three pages using HTML and CSS.

Click here to view the project live

User Experience:

Main Objectives

To create a seemless experience for the user. Not distracting and allow the photographers photo have their moment and shine. Letting the photographers work doing the speaking for itself.
To make Foodie Photo Pop exude professional and credible service by creating a site that is streamlined.
To make it easy for users to flow through the site, view the work and get in contact.
To create a design that is responsive on all devices and screen sizes.

User Stories:

User:

As a user I want to be able to quickly see what type of work the photographer has done and be able to easily contact so that I can get the conversation going as soon as possible.
As a user I'd like the information to be visually appealing and displayed only whats needed so that I can make my decision to hire the company.
I am a user who primarily uses desktop for work and will use the same device while looking at potential hires. I want to have a good experience on this website and easily view all the information in an aesthetic smooth way.

Design

I began the design in mind with having pages for 'About Us', 'Portfolio', 'Our Services', and 'Contact us'. As I worked through the project I realised that there was not a need for a 'Our Services' or 'About Us' separate pages. That we were able to provide all the content needed within the the dynamic tabs. It would be poor user experience to have them click and find the information is the same. We did not want to provide pricing on the site but instead guide them to the contact form to reach out regarding pricing.
My decision was to provide an idea of Foodie Photo Pops services, about them and who they've worked with all on one page. From there they would be able to also reach out and contact FPP. This was my main design objective, to create a good user experience but should they want to go further into FPP work they could.
As time went on I had to make a few design changes throughout. As you can see with the wireframe I initially had the 'Our Services' tab first but realised that it was a better flow and UX to have 'About Us' as an introductory to the client.

1. Font

Headings - Oswald
Body - Poppins

2. Color Scheme

Our color scheme was created to create a little bit of colour but muted colour scheme around the photos and portfolio work to really give the photos the opportunity to shine and showcase companies work.

#99C9D1 - Primary color
#BAD9D8 - Secondary color
#E3B8A6 - Tertiary color
#F7DED3 - Supplementary color
#EEF5F7 - Supplementary color 2
#7F7F7F - Supplementary color 2

3. Logo

4. Wireframing & Proposed/Implemented Functionality per Page

Wireframes for this project were created using Affinity Design and Sketch for both mobile and desktop. Each element was structurally planned out before building the project to be sure all elements were accounted for and worked together.

Wireframes

Technology Used

Languages, Frameworks, Editors & Version Control:

HTML/CSS ~ core languages used to build this site.
Bootstrap Framework ~ Pure CSS Component Frontend framework for layout and overall fronend architecture.
VSCode/Gitpod ~ preferred used editors/IDEs to develop the project.
Git ~ installed on local machines or default built into Gitpod.
Github ~ used to host the repository and version control the site, aswell as used for deployment of the project.

Tools Used:

W3C Markup Validation Service - Used to check the validity and efficiency of the code base.
Font Awesome - For iconography not custom to the site.
Sketch - Used to create the wireframes.
TinyPNG - Used to compress images used throughout the site without affecting image integrity/quality.
W3C Schools - Used several times whislt building the project and used code snippet for the contact.html form section
CSSScript.com - Used for our dynamic tabs on index.html

Features

Future Features:

Off-canvas navigation for mobile devices
I considered adding a section with reviews from previous clients. This is something we would like to add in the future.
When viewing 'Our Services' have a 'Jump To' button to the contact form.
Collapse the dynamic tabs and when click it would jump to the new relevant content with a jump-back button for better user experience.

Testing

Based on the user stories above this user has entered FPP for more information. Following the flow of the website and allows them to reach the 'Contact Us' page on of two ways to submit their information to get reach out too.
The user can quickly tab through the content and see who the company is, what services they provide and who've then worked with. Scrolling down they'll see previous work and have the ability to see more but if they are intrigued can easily jump down and submit their information to be contacted.

Testing Responsiveness

Manually tested the live project using google developer tools to view the project on different screen sizes. Used multiple devices and feedback from family who went to the deployed site on their devices.

Found Bugs & Fixes:

Initially I planned on having the dynamic tabs on the homescreen horizontal like on desktop but found that was too cramped and switched it over to mobile devices design sooner.
Navigation bar was staying collapsed on all devices no matter the size.

Deployment

This website was developed in multiple editors, Gitpod and vsCode, and version controlling was utilised via local (git) and online (github) repository technologies.

Deploying this application was achieved through Github pages by:

Selecting the Repository from my list in the Github Dashboard.
Navigating to "Settings" and to the "Github Pages" section.
From the "Source" section, click on the dropdown and select "main" branch from the associated list.
Once "main" branch is selected, the page will auto-refresh and navigate the user to the top of the page with a visual ribbon display detailing, "Github pages source saved", indicating the success of the deployment.
The link to the website can then be found under the "Github Pages" section, with a ribbon notification stating: "Your site is published at "https://.github.io//"

To clone the website:

Select the Repository from the Github Dashboard.

Click on the "Clone or download" green button located above and to the right of the "Add file" button.
Click on the "clipboard icon" to the right of the Git URL to copy the web URL of the Clone.
Open your preferred editor/IDE and navigate to the terminal window.
Type git clone <paste-clone-url-here> and press "Enter/Return" on your keyboard.
This will create a clone of the project for you.

Credits / Acknowledgements

Content / Media

All photos used on this website were created by either myself or my friend Katie Chase from The Foodie Movement.

Acknowledgements

Thank you to everyone who have helped with support, inspiration and guidance at different stages of the project.

code-institute-submissions / foodie_photo_pop Goto Github PK

foodie_photo_pop's Introduction