Yours Truly

Yours Truly is a Beauty and Aesthetics Page. It is targeted for an ideal business within the Beauty Industry looking for a website. Yours Truly has a range of purposes. It gives you insite towards treatments and tells you a variety of different methods there are in each individual treatments there are to offer.

Yours Truly's aim is to target an audience that are looking to take that step to treating themselves and get a better understanding on what the Beauty Industry has to offer. It will allow people to get a better of understanding of what they are looking and not make the process so daunting.

• Navigation Bar

  • The Navigation Bar Includes the Wesbite Name, Logo, and all three page links (Home, Treatments and Contact).

  • This section allows the user to navigate where the are within the Website. It gives a clear indication due to the text turning grey for the page you're on.

  • This section also displays the website logo and name instantly giving them information on who's website they are looking at.

• Moving Slide Show

  • This Slide Show dipslays a greeting message welcoming people who land onto the site and also includes an image slide show of treatments that are available.

  • This sections objective is to capture the users attention. In Beauty people want to see work more than anything. It's the main thing people want to see looking at a businesses website. Giving them exactly what they want.

• What we offer Section

  • The What we offer section should give users a greater idea of what Yours Truly offer. It also includes a button to the treatments page. Giving them the ability to go straight to the treatments page after being enticed with the slide show.

  • This will push the user to further explore into the treatments page giving them more information of what Yours Truly have to offer.

• Our Goal Section

  • The Our Goal section section allows the user to undertanding a lot more about the company ethos and their goals. Giving them a better understanding of the type of company they are

  • Our Goal section also has a picture that zooms zooms in slighty as the page is loaded. The picture of a girl smiling is aimed to have a positive effect of being happy. Making the user feeling excited amd happy.

• About Us Section

  • The About Us Section displays land marks of the business and important steps that Yours Truly have taken to become the business they are. It also has future plans that Yours Truly aim to hit

  • This should give the user more information and a better of the business they would be looking to get treatments off and what they could be looking out for in the future

• Where to Start Section

  • The Where to start section empathises with the user understanding that it's a uncomfortable proccess when you're looking to start having treatments. It can be daunitng.

  • This section Includes a video of how to boost self confidence. Leaving the user potentially feeling more confident to go outside their comfort zone and chat to a Therapist at Yours Truly!

  • Following from that there is a contact button directing them straight to the contact page so they can discuss treatments and concerns.

• Footer Section

  • The Footer Section dipslays an arrow redirecting them back to the top of the page, GitHub and Linkden social links and Copyright of Yours Truly for their website.

  • This will allow te user to quickly move to the top of the page - saving time and can help the user navigate to other social platforms of the business to follow more of thier socials.gg

• Treatments Section

  • The top of the Treatments Page has a row of images displayed. These have a hover feature when you hover over them. They enlarge slighly and text of the image they're related to - will redirect you to that section!

  • This section should be quiet eyecatching to the user and allow them easier directory to the section they are looking for.

  

  • The Treatments Section gives the user an insight to the treatments that we offer and more information about what is available. This also includes a variety of different methods in each Section such as Eyebrows and Lashes

  

  • The sections also include a hover element over the photo where it will tell you more details such as Prices, Treatment times etc.

  • This should allow the user to gain more information and a clearer idea of what kind of treatment they would be looking for.

• Contact Section

  • The Contact Section has a form element. Requiring first name, last name, email, phone number, submit, reset and a terms and conditions for personal information.

  • This page will allow the user to get in contact with the business and disuss further what they are looking for.

  

  • The Contact Section also includes an opening times and iframe with location of the salon

  • This should give the user clarification on where the Salon is and when they are open. So they are not confused. This also gives users possibility to pop down to the salon for a more personal approach.

  

• Add a section where people can book a treatment from a diary

• I tested that the Website works in all browsers such as Chrome and Safari. I also used the developer tools within Safari to check responsiveness on it. I got a few people to load my page on their Iphones and Samsungs to see how it would appear

• I can confirm that the navigation, images and buttons are clear all the way down to 300px for mobile phone responsiveness.

• I can also confirm the from on the contact page works and redirects you to the form dump with the values of each section you put in

• One test that was conducted to test the website was the lighthouse test within the Chrome Developer Tools.

• One thing that I struggled with was Peformance - as it stated that the 'Payload' is too large. I rectified this by compressing the images into a webp format instead of a PNG.

• HTML

  • Through the Validator Test almost everything came back clear just height and width of Yours Truly Logo

• CSS

  • The CSS Validator came back clear. It was only the hamburger code that it registered which could not be changed

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In GitHub pages - navigate to the Settings tab
  • Down the left hand side menu - to the Pages tab
  • Select the Main branch and select save
  • The page will refresh and the page link will appear at the top of the GitHub pages
  • When a green tick appears it indicates a successful deployment!

• Media

  • The Icons I used for the the index.html and contact.html and footer are from Font Awesome

  • The Images I used for all pages are from Unsplashed and Pexels respectivley with some pictures of my own

  • The Video I used in the index.html is from TED-Ed's Channel Respecivley Youtube Channel

  • The Website Logo was used created Canva

• Content

  • A underline hover effect on the navigation bar was learnt and followed by a youtube video Underline Effect Video

  • The scale effect on the Our Goal section was inspired by the project 'Love Running'

  • The card flip effect on the treatments.html was learnt and inspired by a youtube video Card Effect Video