code-institute-submissions / michelle1024-yoga-with-michelle-ms1 Goto Github PK

Based on a fictional business offering yoga classes in Stockholm, this website was built for educational purposes as part of the Code Institute's Full Stack Development course. This responsive and user centric website was designed using the principles of User Experience Design and developed using HTML and CSS. The live website can be found here https://michelle1024.github.io/Yoga-with-Michelle-MS1/index.html.

Strategy

Yoga with Michelle in Stockholm is a small yoga studio company set up by Michelle Nyberg, who has extensive knowledge and experience in teaching yoga. The business has already a formidable reputation, attracting new customers from recommendations and local pages on social media.

Yoga with Michelle is fast expanding and needs a simple, yet responsive website, to create an online presence and advertise their yoga classes.

Business goals:

The company needs a fully responsive and user centric website in order to:

*To create an online presence *To advertise their yoga courses *To raise their business' brand awareness and credentials *To generate new leads and expand their customer base *To grow their online community

User goals:

The users needs a fully responsive and user centric website in order to:

*To assess business’s credentials *To decide whether the which type of yoga classes fit their needs *To reach the company for further queries and/or to arrange a meeting *To access the website across different devices and to quickly find information.

External user stories:

As a first time visitor:

*I want a responsive website so that I can view the website across different devices. *I want to be able to easily navigate across the website so that I can find information quickly. *I want to read about the company's yoga classes so that I can assess whether they fit my needs.

As a returning visitor:

*I want to read more about the company so that I can assess its credentials and professionalism. *I want to access contact options so that I can reach the company for further queries.

As a frequent visitor:

*I want to quickly access the company social media account so that I can further check their credentials. *I want to contact the company so that I can arrange a meet & greet.

Business owner stories:

As a business owner:

*I want a user-friendly responsive website so that I can create an online presence. *I want to provide information so that I can advertise the yoga classes the business offers. *I want a call for action so that I can generate leads. *I want to feature a logo and a welcome note so that I can raise my business brand awareness. *I want to feature my profile so that I can raise my business credentials. *I want to encourage users to contact me so that I can answer queries promptly and arrange meet-ups. *I want to provide links to our social media accounts so that I can grow my online community.

Structure

Responsive layout: The website will resize according to the device used for better visibility and user experience.

As a first time visitor, I want a responsive website so that I can view the website across different devices. As a business owner, I want a user-friendly responsive website so that I can create an online presence.

Hero banner section: This section will feature a hero image with a welcome message and a call for action.

As a business owner I want to feature a logo and a welcome message so that I can raise my business brand awareness. As a business owner, I want a call for action so that I can generate leads.

Courses we offer section: This section will feature a description of the three different yoga courses that the business offers.

As a first time user, I want to read about the company's yoga lessons so that I can assess whether they fit my needs.

As a business owner, I want to provide clear and concise information so that I can advertise the types of yoga lessons we offer.

About us section:

This section will feature the profile, a photo and the relevant qualification of the business owner to provide users with information about the business' credentials. And information about the benefits of yoga.

As a returning visitor, I want to read more about the company so that I can assess its credentials and professionalism. As a business owner, I want to feature my profile so that I can raise my company's brand awareness and credentials.

Contact us section: The contact page will feature the business' contact details, a map and a form to allow users to contact the business directly via the website. The form will include an option to select the subject of the message so that users can either make a general query or arrange a meet and greet.

As a returning visitor, I want to access contact options so that I can reach the company for further queries. As a frequent visitor, I want to contact the company so that I can arrange a meet & greet. As a frequent visitor, I want to quickly access the company social media account so that I can further check their credentials. As a business owner, I want to encourage users to contact me so that I can answer queries promptly and arrange meets & greets.

Footer:

As a frequent visitor, I want to contact the company so that I can arrange a meet & greet. As a frequent visitor, I want to quickly access the company social media account so that I can further check their credentials. As a business owner, I want to provide links to our social media accounts so that I can grow my online community.

Wireframes The wireframes were created using handwriting on paper and later on Balsamiq.

Design

Imagery All images on the website have the purpose to either illustrate or highlight the content on display:

The logo, The hero image on top of the page has for main objectives to grab the user’s attention and to help create an instant connection with the service offered by the business. The About Me/Michelle, The image shows the the yoga instructor of the business.

Colour scheme

• slategray
• #110d0d
• #534747
• #fff3f3
• #ccc
• #382f2f
• #fff These neutral colors were selected to have a very easy, relaxed feel and simple to read.

Fonts The website uses Balsamiq Sans as primary font, whilst the headings and subheadings use the secondary font Roboto, which pairs nicely with Open Sans. Both fonts were sourced from Google fonts.

Icons

Icons from the Font Awesome library are used to bring attention to contact details and social media accounts.

Styling

Buttons and some text boxes have slightly rounded corners to add a softer feeling and make these elements more noticeable whilst improving user experience on the website.

Existing features Responsive design to allow user to browse the website on all devices A call for action in form of a hoverable button in the hero banner and service section to invite users to contact the business. An embedded map showing the address with search and zoom option so that users can quickly see where the yoga studio is located. Form with validation control to allow users to make contact with the business. Clickable and hoverable icons to allow users to open social media links into new tabs, whilst retaining navigation on the website.

Technologies used The following technology were used during the development and testing of the website:

Languages

HTML: HTML was used to structure the page CSS: CSS was used to style the different elements on the page.

Frameworks and libraries

Hover.css: Hover.css library was used for hovering effects on buttons and social media icons. Google font: Google font API was used for the fonts on the website. Font Awesome: Font awesome library was used for the icons the website.

Media

Gitpod: Gitpod was used as a local respoitory to develop the code. Git: Git was used for version control from gitpod to save commits and push code onto GitHub. GitHub: GitHub was used to save the code and deploy the live site. Testing

Chrome DevTools: Google inspect was used to test and fix code and page responsiveness. Responsive viewer: This add-on was used to test website responsiveness across different devices. Wave Accessibility: This tool was used to evaludate accessibility of the webiste. W3C HTML Validator: This tool was used to check there's no error in the HTML code. W3C CSS Validator: This tool was used to check there's no error in the CSS code.

Testing Testing has been an on-going process during the coding stage of the project with further tests conducted toward the end. This section covers:

Issues and solution during development process Testing User stories Testing accessibility HTML & CSS validation.

Deployment

Project inception

This project was developed using Gitpod, committed to git then pushed onto GitHub using the built-in function within Gitpod.

Updates were committed frequently to git and the project pushed onto GitHub on a regular basis to make sure it was saved properly.

Deployment on GitHub

The project was deployed to GitHub Pages as follows:

Log in to GitHub and locate the GitHub Repository: https://github.com/Michelle1024/Yoga-with-Michelle-MS1 Click on "Settings" located in the menu above the repository. Scroll down the "GitHub Pages" section. Under "Source", select "Master" in the dropdown menu. In the tab next to "Source", select "/root" if not already selected by default Click save then the page will automatically refresh. The link should show in a banner just above "GitHub Pages" section.

Forking the GitHub Repository

Log in to GitHub and locate the GitHub Repository mentioned above. Make a copy of the GitHub Repository by "forking" the orginal repository onto your own account, where changes can be made without affecting original repository. Click on the fork icon (located on top right of the page at the same level of repository name) You should now have a copy of this repository into your GitHub account. For more information on how to clone a repository, please check this github documentation.

Cloning the GitHub Repository

Log in to GitHub and locate the GitHub Repository. Under the repository name, click "Clone or download". You can find all the steps to follow according your chosen method in this GitHub documentation on how to clone a repository.

Credits

Code The content was created by the developer taking inspirations from various yoga studio websites, more specifically Yoga with Adriene.

Media The photos used in this website were from Pexels.