Based on a fictional business offering pole dancing lessons, this website was built for educational-only purposes for Code Insitute's Full Stack Development diploma. This is a fully responsive website that was built with user-centric principles in mind, using HTML and CSS.
The live website can be found here.
Stay Vertical is a fictional pole studio based in Lowestoft Suffolk which is the only one of its kind in the town, set up by a former adult entertainer who is fully insured, and has high-ranking qualifications in teaching pole dancing and health and safety.
The studio is relatively new, but is looking to expand their customer base and their local pole community through social media, and as a small business they want to get ahead of the curve in terms of responsive design for all devices!
Due to the recent increase in customers, Stay Vertical is looking for a modern, responsive website that boosts their online presence and welcomes users from their very first visit.
By having a new website, the business owner wants to:
- Create and grow an online and in-person community
- Expand customer base
- Promote inclusivity and accessibility
- Advertise classes to customers, both new to pole and existing pole dancers
When visiting the website, the user wants to:
- Access website across a range of devices
- See the range of classes and bookings (prices, ability levels and lesson types)
- To access the owners contact information
- Check where company is located (locality)
- To feel comfortable attending classes without fear of discrimination or self-conscious
As a first-time user:
- I want the website to work on all devices
- I want to be inspired by the studio as soon as I enter the page
- I want to feel comfortable that I will be welcome here
- I want the website to be easy to navigate
- I want to know where the company is located
- I want the owners contact details so that I can ask any questions
- It is important to know what to wear and bring to my first lesson with this studio
- It is important that the information is not cluttered on the page
- I want to know about the instructors to feel at ease
- I want to see a description about the classes so that I can judge my comfort levels and feel comfortable with the class I will be attending
- I want to know about COVID-19 precautions so I know I will be safe during my time at the studio
As a returning user:
- I want to be able to submit an enquiry quickly through the website as I am now familiar with the owners
- I expect the social media links to work and open in another tab so that I can join the local community
- I want to know more about the instructors credentials so that I can recommend them to my friends
- I want a clear and simple booking system that I can use quickly
- I want to see reviews so that I can recommend to my friends
- I want to see opening times/timetable so that I can plan for future classes
- I want to know about COVID-19 precautions so I know I will be safe during my lessons
- I want to be able to buy merchandise so that I can represent the pole studio when in public
- I want to be able to leave a review on TripAdvisor so I can promote the company
- I want to see that there is a refund and cancellation policy so that I can get my money back if I miss a class
As the business owner:
- I want a to create an online presence that stands out from the competition
- I want to provide clear navigation of the website to advertise classes and prices
- I want to emphasise inclusivity and accessibility in my studio
- I want to feature my and my instructors' backstories so customers can feel at ease when they first visit
- I want to to encourage users to get in touch so that I can answer any questions they have
- I want to provide links to our social media accounts and TripAdvisor reviews to grow my online community and retain returning customers
- I want to emphasise the saftey (in terms of COVID-19 and physical safety) of my staff and customers due to the nature of the services that my company provides
- I want to showcase my merchandise so that I can advertise my studio through my students when in public
Due to length restrictions on Mockup Plus Classic, the mobile and tablet wireframes are split in two parts
.png){kind=link}
.png){kind=link}
-
DESKTOP/OVERALL
- There is no logo in the navigation menu, rather it sits in the hero image itself
- The about section is in two parts only, not three
- The 'Get to know us' button is now 'See our classes' and stretches across the whole screen
- There is no row of images in the classes section
- The classes and reviews sections are in interactive carousels rather than static layouts
- The class buttons stretch across the whole screen with a width of 25% each
- The instructors section is now in a simple 2x2 grid formation with hoverable/clickable overlays for the profile information
- The social media icons now sit in the Reviews/Testimonials section, with the link to TripAdvisor
-
TABLET
- The instructors profiles are in a grid display, rather than in a row
- Phone and other contact info sits to the side of the form rather than below
-
MOBILE
- The navbar sits above the header and collapses into a hamburger menu
- The instructors certifications appear on the hoverable/clickable profiles
- The instructors profiles are in a column, not in a grid display
My colours were chosen to be gender neutral, with a contrast that is both bold yet inviting. I used Coolors to help me choose my palette:
- #191919 is a nice slightly-off black cthat is used for the text on light backgrounds, the navigation menu and the footer
- #E8E8E8 is a clean off-white that is used for text on dark backgrounds and the background of some sections (classes and contact)
- #564256 is a bold purple that is used for the about section main title, the instructors section and used as background colour for the classes carousel and parts of the contact section
- #FC814A is a bright orange that is used for icons, links and the navigation menu text
I have used icons sparingly throughout the website, only acting as bullet points in lists or to signify social media. I did this so as not to overclutter the page and distract from the content itself. All the icons I used in the project are from Font Awesome.
The fonts I have used are all from Google Fonts. I wanted to ensure readability, so used sans-serif fonts Poppins for the main text and Homemade Apple for the slogan for an almost-handwritten aesthetic.
All images on the website are to display pole dancing in action and to excite users into booking a class:
- The hero image is designed to grab the users attention when they first land on the website and show the power of the pole, which tells the user directly what services are offered by the company.
- The logo in the hero image is to display the branding to the user immediately.
- The image in the introduction is to show off the studio itself in a colour that matches the palette of the website.
- The images in the classes section is to reflect the different levels of class that the studio offers.
- The instructor profile images are to show the instructors in action, so that users will feel assured they are in good hands if they decided to use the company's services.
- The background image of the testimonials section is to provide one last display of pole-dancing before the user exits the page to the footer.
- The images used in the gallery page represent activity at the studio and what students can look forward to when they join.
Please find all credits for the images used in this project here
I have chosen CSS Flexbox to structure my website. CSS Flexbox is simple to use and allows for easy restructuring for responsive design across screen sizes. This way, I can have assurance that my website will work on mobile, tablet and desktop. Below are the current features and which stories/criteria they cover:
RESPONSIVE DESIGN
- The website will grow and shrink according to the screen size of the user, for a good cross-device user experience.
- As a first-time user, I want the website to work on all devices
- As a first-time user, I want the website to be easy to navigate
- When visiting the website, the user wants to access website across a range of devices
HERO HEADER SECTION WITH NAVIGATION MENU
- This section displays a hero image with a tagline and a fixed, collapsable navigation menu.
- As a first-time user, I want to be inspired by the studio as soon as I enter the page
- As the business owner, I want a to create an online presence that stands out from the competition
INTRODUCTION
- This section gives the user background into the company owner and gives a brief overview of the company ethos and commitments to its customers, with a button that takes the user to the classes section.
- When visiting the website, the user wants to feel comfortable attending classes without fear of discrimination or self-conscious
- By having a new website, the business owner wants to promote inclusivity and accessibility
- As a first-time user, I want to feel comfortable that I will be welcome here
- As the business owner, I want to emphasise inclusivity and accessibility in my studio
CLASSES & PRICES
- This section displays an overview of the services provided by the company and an array of call to action buttons to the timetable, booking system, refund policy and shop.
- By having a new website, the business owner wants to advertise classes to customers, both new to pole and existing pole dancers
- When visiting the website, the user wants to see the range of classes and bookings (prices, ability levels and lesson types)
- As a first-time user, I want to see a description about the classes so that I can judge my comfort levels and feel comfortable with the class I will be attending
- As a first-time user, It is important to know what to wear and bring to my first lesson with this studio
- As a first-time user, I want to know about COVID-19 precautions so I know I will be safe during my time at the studio
- As the business owner, I want to provide clear navigation of the website to advertise classes and prices
- As the business owner, I want to showcase my merchandise so that I can advertise my studio through my students when in public
- As the business owner, I want to emphasise the saftey (in terms of COVID-19 and physical safety) of my staff and customers due to the nature of the services that my company provides
- As a returning user, I want to know about COVID-19 precautions so I know I will be safe during my lessons
- As a returning user, I want to see that there is a refund and cancellation policy so that I can get my money back if I miss a class
- As a returning user, I want to be able to buy merchandise so that I can represent the pole studio when in public
INSTRUCTOR PROFILES
- This section provides information on the staff who work for the company and their social media profiles.
- As a first-time user, I want to know about the instructors to feel at ease
- As a returning user, I want to know more about the instructors credentials so that I can recommend them to my friends
- As the business owner, I want to feature my and my instructors' backstories so customers can feel at ease when they first visit
TESTIMONIALS
- This section displays review from previous customers and a working link to TripAdvisor should the user want to see more. This section also includes working links to the company's social media pages which open in different tabs.
- As a returning user, I want to be able to leave a review on TripAdvisor so I can promote the company
- As a returning user, I want to see reviews so that I can recommend to my friends
- As a business owner, I want to provide links to our social media accounts and TripAdvisor reviews to grow my online community and retain returning customers
- As the business owner, I want a to create an online presence that stands out from the competition
CONTACT US
- This section includes an enquiry form and all of the necessary contact details (phone and phone) of the company, with each of the email links opening Outlook on the user's device for quick contact.
- When visiting the website, the user wants to access the owners contact information
- As a first-time user, I want the owners contact details so that I can ask any questions
- As a returning user, I want to be able to submit an enquiry quickly through the website as I am now familiar with the owners
- As the business owner, I want to to encourage users to get in touch so that I can answer any questions they have
- As the business owner, I want to provide links to our social media accounts and TripAdvisor reviews to grow my online community and retain returning customers
FOOTER
- The footer section includes opening times, a working link to Google Maps (for the company location) and a copyright notice.
- When visiting the website, the user wants to check where company is located (locality)
- As a returning user, I want to see opening times/timetable so that I can plan for future classes
- Responsive design to allow user to browse the website on all devices
- Collapsable navigation menu for easy browsing on mobile screens
- A call for action in terms of clickable buttons in each section to encourage users explore other parts of the website
- Form with validation to allow users to make contact with the business, and a customised alert using basic JavaScript function
- An active 404 error page that redirects users back to the homepage
- Clickable and hoverable icons to allow users to open social media links into new tabs, whilst retaining navigation on the website
- Carousel of the class options and testimonials for an enhanced user experience
- A small scrollable image gallery page
- Working links to timetables, booking system, gallery, emails and phone numbers which are not currently relevant since this website is for a fictional business.
- Mockup Plus
- W3C HTML Validation Service
- W3C CSS Validation Service
- Chrome DevTools
- Google Chrome ColorPicker
- Google Chrome Responsive View (in DevTools)
- Google Lighthouse
- W3C HTML Validator
- W3C CSS Validator
- Am I responsive?
- Responsive Design Checker
- PNG Converter
Testing has been an ongoing process throughout the development stage. It has been conducted on the following:
- Issues during the development process
- User stories
- Accessibility
- Performance
- HTML & CSS validation.
Please find the complete Testing process and results for the old design here and the up-to-date deployed version here.
- This project was developed using Gitpod and pushed to GitHub using the built-in function within Gitpod.
- Updates were committed frequently to git and the project pushed onto GitHub on a regular basis after changes made in the project.
This project was deployed via GitHub by executing the following steps, following the above write, commit and push process:
- Navigate to the repository on github and click Settings.
- From there, go to the Source section within the Github Pages section.
- Select 'master' branch on the dropdown menu, and click save.
- Now the website is live on https://lmw95.github.io/stayverticalpolestudio/
- When commits and pushes are sent to Github, the Github Pages site should update shortly after.
Fork or clone the github repository to use or contribute to this project.
FORK:
- Click the green Clone or Download button on the Github Repository
- Using the Clone with HTTPS option, copy the link displayed.
- Open your IDE, and ensure the Git Terminal is open.
- Change the working directory to the location where the cloned directory is to go.
- Use the "git clone" command and paste the url copied in the second step.
CLONE:
- Cloning the GitHub Repository
- Log in to GitHub and locate the GitHub Repository.
- Under the repository name, click "Clone or download".
The entire list of credits can be found here.
The entire list of credits can be found here.
The content in this website was inspired by existing pole studio websites, namely London Dance Academy and The Pole Studio. The inspiration for this README document (layout and structure) came from fellow students AnoukSmet and lemocla.
- My mentor Narender Singh for his advice and guidance during this project
- The slack community for advice and solution to problems that I needed assistance with
- The wider coding community on Stack Overflow for their insights and knowledge which has helped me through this project