- Zen Studio
The goal of this Project is to create a completely interactive and responsivess front end web site for a yoga studio in Stockholm. with a focus on all individuals interested in yoga instead of a select age group
- Interest individuals looking to get into Yoga.
- Encourage people to join our classes and be apart of the community.
- Teach People about yooga and meditation and all its different forms.
- Contact The studio about questions.
- Bookings can be placed through the webpage.
- As a user I want to find out about the studio and what it does
- As a user I want to be able to look at the different classes on offer
- As a user I want to be able to see who i will be doing my classes with
- As a user I want to be able to contact the studio about any questions
- As a user I want to be able to book classes through the website
- As a site owner, I want to create an interactive and responsive site
- As a site owner , I want to be able to create something that is minimalistic and easy to navigate around
- As a site owner, I want the site to be informative and provide stories about the studio and there instructors
- As a site owner, I want the site to be accessible and contacting the studio should be easy.
- As a site owner, I want the classes to be presented and accessible, so users can identify what they would like to do.
- As a site owner, I want there to be an easy method of booking through the website.
- The site should have:
- Various images about the studio and its classes
- Navigation bar for ease of movement around the site
- Descriptions of different classes
- form to contact the owners
- form to book classes
- description of the studio and its employees
- The site should be visually appealing and interactive.
- The site should have 5 pages. 3 of which are main pages and two contacting pages
- page 1 will be the home page and encourage user exploration
- Page 2 will be the activities page and focus on class description and structure
- page 3 will be about the studio and focus on its story and the employees. the last two pages will be a contact page and a bookings page used for questions and booking classes.
I used a very cool colour palette across my entire project keeping things
consistant for aesthetic viewing. I did this through https://coolors.co/
I went with google fonts as my primary choice of font picking and used the font relations tool to pick the optimal fonts for my project varying with style from headings to text
I ended up with 3 main fonts. These where Handlee, Montseratt and railway Which all paired well through the styling phase of the project
The project idea is based on a Yoga studio in Stockholm, the website should have a modern simplistic flow containing five main pages. The idea of the website is to attract all individuals looking to get into yoga and meditation from any background and skill level emphasizing the ease for beginners to join in and be apart of the studio, with a main focus on strength classes and flexibility classes with various mediation classes following on in the day. The site should have a very easy flow and navigation feel with a more minimalist set up making user experience refined and simple to navigate where they wish to go.
The website is aimed at all age groups and skill levels as there will be various classes and for each individual skill level. With a focus on attracting New individuals who would like to try yoga or meditation for the first time. There will be an in-depth story into the team and how the studio came to be so you feel welcomed from the minute you read to the minute that you book through the site.
I took it one step further than a basic wireframe when designing the site as it was my first website and thus created the hybrid mockups as seen below I used Balsamiq to create my wireframes. It is beginner-friendly and very easy to use. To better demonstrate the differences, I sort my wireframes by page and show the versions for mobile, tablet and desktop next to each other.
- Created fresh Navbar to cover top segment of all pages
- decreased Page selectors down from 4 to 3 to create more space on the page
- adjusted animation and font-styling in accordance to the design and flow of the website.
- Created fresh Navbar to cover top segment of all pages
- adjusted div sizing and spacing for a more aesthetic viewing
- removed some content on smaller screen sizes for aanti-cluttering
- Created fresh Navbar to cover top segment of all pages
- Changed initial image to work more with the colors of the site
- adjusted div sizing and spacing for a more aesthetic viewing
- removed some content on smaller screen sizes for aanti-cluttering
- implemented a responsivce google map to identify location and area
- Created fresh Navbar to cover top segment of all pages
- Changed initial image to work more with the colors of the site
- adjusted div sizing and spacing for a more aesthetic viewing
- implemented box shadowing on the form for a more visual effect
- Created fresh Navbar to cover top segment of all pages
- adjusted div sizing and spacing for a more aesthetic viewing
- implemented box shadowing on the form for a more visual effect
The site is fully responsive, and Accessibility features in form of alternative text for images, language set to English, semantic HTML and ARIA labels were used to make the site accessible and enjoyable for users with disabilities. The Navabar was designed for quick accessibility around the site. Colours and icons have been used in a similar spectrum to create flow and understanding around the website. Forms have been implemented for easy ways of contacting and booking various classes through the studio. Embedded google map allows great accessibility and and a wuick overview with additional links for direction. Social links have been provided in the footer to try and entice people join the various social platforms of the business
- Featured on all five pages, the full responsive navigation bar includes links to the Logo, Home page, about us and contact and Bookings page and is identical in each page to allow for easy navigation.
- This is created for ease of navigation continously around the site. The navbar will also be fixed so that it can be accessed from any point on a page for easier user experience
- The navbar is built responsively so on small screen sizes the nav menu will collapse into a burger icon for ease of use and anti-cluttering
- Menu Button - designed to create a drop down menu with a selection of access pages for ux design
- Main Heading - designed to be eye catching and create a sense of experience when read so users feel the need to progress further into the website the animation is used to be eye catching and create an introduction to the Yoga studio
- 3 page selectors - these are designed with a brief description of each page and a visual structure that revolves around the websites design, they also have a linked button to each web page for user experience and ease of movement through the site
- background image is meant to be fixed and create a sense of relaxtion and joy as you go through the minimilistic home page
- footer is found through-out and is placed for external information and guidance so that users can find more specific info and link to social links if they want to get involved with the studio further.
- Heading and page introduction focused on identifying user location and content of the page
- Vinyasa Yoga Activity - This is one of the 2 available yoga classes focused on strength training and has a description about the type of yoga it is. As well as the scheduling of the relative classes
- Yin Yoga - this is one of the 2 available yoga classes and focuses more on the flexibility and relaxation in yoga and also contains a description about the type of yoga it is. As well as the scheduling of the relative classes
- Meditation heading and introduction focused on user experience
- Progressive Relaxation Meditation - with a description on the type of meditation and the classes and time frames available
- Mindfulness meditation - with a description on the type of meditation and the classes and time frames available
- This is a marketing segement designed around Motivational Input encouraging booking and contacting the web owners for questions or availability.
- Footer
- Heading and page introduction focused on identifying user location and page content
- Heading and description about the studio and its story focused on giving insight into how the studio was constructed.
- Meet the team section introducing the instructors and their roles in the company. This is implemented to give users the opportunity to get to know the people they will work with before hand
- Where to find us Section providing Location and addresses for the studio. Through an accesible map or hard address as well as operating hours for user convenience.
- This is a marketing segement designed around Motivational Input encouraging booking and contacting the web owners for questions or availability.
- Footer
- Background image is cool and corresponds to the sites modern colouring creating a sense of peace and ease
- Heading and page introduction focused on identifying user location
- description and form related to the contact us section hoping for users to contact the owners easily through the outputted form with various selections and options for ease of contact
- Footer
- Background image is cool and corresponds to the sites modern colouring creating a sense of peace and ease
- Heading and page introduction focused on identifying user location
- description and form related to the booking section hoping for users to contact the owners easily through the outputted form with various options and choices for bookings.
- Footer
- The footer section includes links to the relevant social media sites (These sites dont exist but for references they are here) for Zen Studio. The links will open to a new tab to allow easy navigation for the user.
- The footer is valuable as it encourages connection through social media and further navigation of the site at the end of the page
An effective payment and booking system with a live class update on bookings and scheduling to identify if classes are full or not additional classes and times to be added for studio diversity
- Plan Make the site easy to navigate by providing a navbar and using easily understandable names for the pages.
- Make the Navbar fixed so its always accessible at all times around the site for easier navigation
- Implementation I used the Bootstrap navbar and added several Bootstrap flexbox classes to position it on the right side for all devices, except mobiles. On mobile devices I also used Bootstrap to make the navbar collapse and be displayed within the hamburger icon for a more accessible responsive feel.
- Test I tested all links on all pages to make sure that the correct site is displayed.
- Result Each page was fully accessible across the project
- Everything seems to be working as intended
- plan was to make 3 Accesible page selectors on the home page so people can read and go to the locations they wuish to go on every page.
- I genereated circular divs with circular anchor tags as buttons to take people to each page
- tested moving to each page and back without any trouble
- It seems to be working as intended
- Created various Navigation and social links around the website and to various other websites to create further User experience and intergration with the company
- added a list to the various pages and implemented side by side accessible icons for the different social pages all linked.
- Tested each of these links and they worked well across all pages
- Everything seems to be working as intended
- Created a seperate marketing section on various pages to get people involved and encourage them to book through the website or get in touch about questions they may have
- created accessible links for the contacts and booking page with large headings to provide information and directions
- Tested these across the necessary pages and worked well
- Everything is working as intended
- provided an accessible and easy way for customers to contact and be in touch about various questions throught he use of a form
- implemented a form from bootstrap and changed various titles and classes to better suite the project
- Tried to submit without entering any data and it stopped the submission with the necessary requirements
- Result When clicking 'Submit' without filling out any or all fields or when entering invalid data the user is asked to enter the missing data or to correct his/her input. Thus the form needs to be completed correctly before submission. Which was intended
- Provided an eccessible and encouraging way to book with ease through the use of a booking form highlighting skill level, date and time available for the course or class you wish to take.
- Tested the form by trying to submit without data and with data* form worked as intended and would not submit without the required data and would if it was filled in.
- designed to be visually intuitive and provide better understanding of address and direction
- works as intended as its easily accessible not to large and can be expanded if necessary
Was a bug occuring on the main page where the background image was jumping and was not staying fixed when scrolling as intended. This was fixed by removing some old css code with a (position:relative) that was stopping the page from functioning correctly
W3C Html Validator the validator came back with no errors
W3C CSS Validator the validator came back with no errors
- GitHub Pages
- The project was deployed on GitHub Pages. The following steps were taken.
- In the repository, go the the project main page.
- Click on 'Settings' and then scroll down to the section 'GitHub Pages'.
- Click on the link for the new dedicated Page settings tab.
- In the new window using the drop-down menu select the main branch and then click on 'Save'.
- The site is now published and a link is provided.
- Forking If you wish to use this repository or to propose changes to this project, you can fork it. Follow the steps below.
- Navigate to the repository, e.g. oliverdaviescodes/yoga-studio
- Click 'Fork' in the top-right corner.
- cloning Cloning a repository creates a local copy on your computer. Follow the steps below.
- Navigate to the repository, e.g. oliverdaviescodes/yoga-studio
- Click 'Code' above the list of files.
- In the new window, cloning using HTTPS is the default option. Copy the provided link manually or by clicking on the clipboard symbol.
- Open Gitbash
- Navigate to your desired directory for the cloned project.
- Type 'git clone' followed by the URL copied in step 3.
- Press Enter to create your local clone.
All content and code for the project was written by myself other than the Images and Bootstrap code acquired
All media was accessed from royalty free sites where usage is allowed All Icons where acquired from fontawesome.
https://www.freelogodesign.org/manager/showcase/5f45e78a32de4b3586827cb289353398 = logo1
Background image: https://pixabay.com/photos/yoga-yoga-pose-asana-sunset-woman-5281457/ = yogaoutside
Woman doing pushups: https://www.pexels.com/photo/woman-doing-push-ups-2780762/ = yogatraining1 man meditating : https://www.pexels.com/photo/woman-in-red-sports-bra-and-green-shorts-sitting-on-purple-carpet-4325484/ =meditation2 Information regarding different yoga types: https://www.mindbodygreen.com/articles/the-11-major-types-of-yoga-explained-simply = info for different types of yoga classes Information regarding different mediatation types: https://www.healthline.com/health/mental-health/types-of-meditation#transcendental-meditation = this is the core info for the diffference in meditations.
woman on the beach doing a headstand: https://pixabay.com/photos/yoga-stand-in-hands-silhouette-2149407/
Contact image used : https://pixabay.com/photos/dusk-lake-nature-water-california-1909693/
booking image used: https://www.pexels.com/photo/stack-of-colorful-pebbles-near-blue-sea-4335696/ =rocks1
- I used https://www.hotyogasthlm.se/ to find some inspiration behind my project
- My mentor Maranatha Ilesanmi for his helpful insights and feedback throughtout the coding process of the project
- the Slack community for the support in answering some of my more tedious questions.
- I would like to thank my cousin Laurence Davies who supported me and gave me some strong guidance on positioning and other helpful insight
- I would also like to thank my family and friends for supporting me and giving insightful feedback on how they thought the project was goinng
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent