This project is for the company ‘Sparki’ which is a electrician company based in the south of England. The aim of the website is to get those customers to contact Sparki as well as showing what services they do.

I started to think about the layout, the colours, the typology and the imagery used throughout. The layout has to be simple for customers to understand it and easy to find pages. I drew up different mockups and ideas that I thought was easy to understand. I also took into account what parts of the mockups that i liked and worked them into the final outcome. The images that are used are what the company requested to be displayed. Below are the mockups that I drew.

Lastly the typology and colours, these have to be clear and readable.

The main request from the company is that they want customers to find the contact information easily and information of what services Sparki does. Taking this to mind, I want there to be lots of links that take the user to the contact page.

The layout throughout the website must be informative and have an uniform structure. All the information that is on the website is give to myself from the company. The home page will have quick summaries of the other web pages with a button linked to the contact page to take the customers to that page. The content I use throughout the website must be appropriate for customers and businesses. As a customer wanting an electrician, I am more likley to look up the page via a small device like a phone. This means the smaller view ports are my priority to be readable.

The main things about the website that will form the backbone are the navigation which will be featured on the header on each html page. By doing this, it will make the whole webpage look uniform. The only thing that will differ each page will be the section.

Research was key for this website as there is competition in the area. I put together all my research on one page, click here.

• As a user, I want to see a page that has all the information to contact the company.
• As a user, I want to click on the navigation, and it will take me to the location of that specific page.
• As a user, I want to see a clear header and footer layout so it is understandable.
• As a user, I want to click on a page to view all of the services that the company has.
• As a user, I want a page that displays all of the images.
• As a user, I want to click a button that will take me to a designated page.

Throughout the page, there is a navigation bar on the header and the footer that takes you to the designated area. As well as this, I have put buttons on all the pages that will take the customer to the contact page so they will contact Sparki.

• Buttons - This allows the users to get to a page by clicking on it.
• Form - This allows the user to contact the company by filling the sections out and pressing submit.
• Hover - This allows the user to see clearly which navigation title they might click on by hovering over one of the titles.
• Dropdown - This allows the user to view the navigation bar in the mobile view.
• Social Media Links - This allows the user to get the social media page by clicking on the designated social media name.

In the future as Sparki gets found more by customers and their services get use, the company will hopefully get review from those customers. When they are a few reviews, they will want to display the reviews on their website. I would put those reviews on the home page as future customers will the home page covered in good reviews which will help with advertisement for Sparki. Also when Sparki starts posting more on their social media platforms, they will want that placed on their website on the home page as well.

• HTML5
• CSS
• Bootstrap
• Bootswatch

The user stories that I had at the beginning of this process helped me with testing and these became a check list for me.

• As a user, I want to see a page that has all the information to contact the company. ...This was the contant page, this page shows the phone number, email address and the social media links and also has a form that will go to the company.
• As a user, I want to click on the navigation, and it will take me to the location of that specific page. ...The navigation at the top of the website has four main links which will take you to the designated web page.
• As a user, I want to see a clear header and footer layout so it is understandable. ...The layout of the header and the footer are layed out clearly and nothing is hidden.
• As a user, I want to click on a page to view all of the services that the company has. ..I have created a page called Services which shows all of the things the company does.
• As a user, I want a page that displays all of the images. ...I have created a web page called Gallery to that holds all of images that the company wants to show.
• As a user, I want to click a button that will take me to a designated page. ...I have added multiple buttons through out the website that take you to a contact page as this is where the company wants to customers to go to.

• Home Page:

1. Open up the inspect page
2. Change the view to mobile (iPhone X or Galaxy S5)
3. Check all elements and features on the page adjust to the mobile layout
4. Change the view to tablet (iPad)
5. Check the layout adjusts to the tablet view
6. Close inspect page
7. Check the website layout works on desktop view

• Service Page:

1. Open up the inspect page
2. Change the view to mobile (iPhone X or Galaxy S5)
3. Check all elements and features on the page adjust to the mobile layout
4. Change the view to tablet (iPad)
5. Check the layout adjusts to the tablet view
6. Close inspect page
7. Check the website layout works on desktop view

• Gallery Page:

1. Open up the inspect page
2. Change the view to mobile (iPhone X or Galaxy S5)
3. Check all elements and features on the page adjust to the mobile layout
4. Change the view to tablet (iPad)
5. Check the layout adjusts to the tablet view
6. Close inspect page
7. Check the website layout works on desktop view

• Contact Page:

1. Open up the inspect page
2. Change the view to mobile (iPhone X or Galaxy S5)
3. Check all elements and features on the page adjust to the mobile layout
4. Change the view to tablet (iPad)
5. Check the layout adjusts to the tablet view
6. Close inspect page
7. Check the website layout works on desktop view

• Contact form: Go to the contact page

2. Type on a letter into the email section to see a error message.
3. Clicked on the submit button with empty cells to see an error message
4. Typing a email address in the email section to see error messages for the first and last name.

The website was deployed from the master branch and hosted on GitHub pages. When I add new commits to the master branch the website will be updated automatically. I deployed it by doing the following steps:

1. Going on to my GitHub page
2. Clicking on the repository that holds it all
3. Clicking on the tab called "Settings"
4. Scrolling all the way down to the section on settings called "GitHub Pages"
5. Clicking the dropdown that has the title "Source"
6. I changed my source from "None"to "master branch"

All content that is on this website has been written by myself.

All images were taken from Pixabay and Pixels.

Code used throughout the website has been found throughout on Bootstarp, the courses "HTML Fundamentals", "CSS Fundamentals" and "User Centric Frontend Development". The form was inspired by the Bootstrap example called Checkout. The photo layout was inspired by the Bootstrap example called Album. The navigation layout was inspired by a example called Bootstrap 4 Centered Logo Navbar