• User stories

  • First Time Visitor Goals

    1. First Time Visitor, has to be made to read and understand the business fast and the site show the business services with images and words so the visitors can understand the business at the first glance, easy to get around the page to don't make confuse the visitors and losing them.
    2. First Time Visitor, will be able to easily navigate throughout the site to find content through the top bar where easily can go into the other page and come back to the home page for further referements.
    3. First Time Visitor, wants also verify the business through the social media links to see how many followers and comments the business got to determine the trust and the age of the business, the websitye is created with the most socialnetwork link where the visitor can be feel confortable to visit inside the social media too, the icon contain an hyperlink so it will change colour to help to understand the visitor that you can click on it to jump to the socailnetwork page.

  • Returning Visitor Goals

    1. Returning Visitor, wants to find more information about products and services the business provides, the site provide extra help to individuate the right products they need on the gallery page.
    2. Returning Visitor, wants make sure that the comapany is easy to reach with a landline or mobile phone number which it is inserted in every page of the website plus a subscibe form to gathering more information.
    3. Returning Visitor, wants to find social media links and make sure they work correctly also the social media links are showed everypage to don't boder the visitor to move from a page to another, insted they can access to the link from each page they visite.

  • Frequent User Goals

    1. Frequent User, wants to check new products arrival or products that in that moments they need, from the subcription form they are able to be updated any times will come a new product and in the same time see what product are availiable from the gallery.
    2. Frequent User, wants to check some new extra information through post and social media to see if the business is healfy, and it is proved by the social media link at the footer of the page.
    3. Frequent User, wants to sign up to book an appointment for treatments or consutation or simply to gather more info before go haed with the choise, which it is made easy for them on the contact us page with the form subscription created for them.

• Design

  • Colour Scheme

    • The predominate colour is pink with some grey and white gradiants to make some effect and make the site more attractive and different from other to retain the visitor longer then usually.

  • Typography

    • The font used on the website are Arial and Sans Serif as their are the most common font used today the font is cleaned is shows good read letters for all reader plus with hthe query style help to spread the letters on the right direction that are still visible to read.

  • Imagery

    • The first image is posted just straight under the header to catch the visitors attention and transmit the business message to make them intutitively understand what the business does, the image underneath show a vast gamma of products plus the logo help to link them together.

• Wireframes

  • Home Page Wireframe - View

  • Gallery Wireframe - View

  • Contact Us Page Wireframe - View

• The website is responsive for all diplay screen device sizes from Mobile Phone, Tablet, Laptop and PC.

• Associated elements with a good contrast colour to help the friendly navigation to the visitor.

• Laptop

• HTML5
• CSS3

1. [Bootstrap 4.4.1:]
   • Bootstrap has been visited to assist me with the idea to create a responsiveness website for the gallery and navigation bar.
2. [Hover.css:] (/workspace/P1-Beauty/assets/photo/salon.jpg)
   • Hover.css was used on the top bar on the Logo and on the right navigations words to move from one page and another and return on it also has been added the hover for the social media links and Telephone number on the website footer.
3. Font Awesome:
   • Font Awesome was used on the first and last page of the site to decorate some part with icons for aesthetic and direction understanding and plus UX purposes .
4. [jQuery:]
   • Query have been used in almost the code website to help the site to be responsive with different devices.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal and workspace to save the project and to commit in Git and Push to GitHub in the repositore the project.
6. GitHub:
   • GitHub has been used to store the projects code after being pushed from Git and plus to cloned my work.
7. [Pexels:] (https://www.pexels.com/)
   • Pexels was used to add clean images to the website expecialy on the home page and gallery.to resize the image I used the laptop correction photo.
8. Balsamiq:
   • Balsamiq was visited to gather some idea on starting the design process even if I used my imagination at the end.
9. jQuery:
   • jQuery find some information in bootstrap and in code istitue(https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+CSE101+2020_Q2/courseware/be0e510a3aca4bccb6e0bba4cf7cf06b/b47eaee24847486eb4424dfa29890cc0/) on use to have a responsive website for different devices.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of html and css of the project to ensure there were no syntax errors.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

• html and css were written through github at the first trial and on the workspace gitpod (https://github.com/Code-Institute-Solutions/GitHub/tree/master/04-readme_files/challenge_solution) workspace/repositories

• All content was written by myself with help of different source of information like youtube, W3school and code istitue corse.

• All Images were founded in Pexels.com (https://www.pexels.com/) and ammend accordely by myself.

• To the tutor support at Code Institute.