Spartan Gym is a fictional gym located in Cardiff, UK. The aim of the website is to attract new customers and be a point of reference for existing customers. The website is designed to be user friendly and therefore responsive on all devices
- Finding a gym that offers all the facilities required
- See membership prices
- Find information about the gym
- Find location and opening times
- Attract new members by showcasing the available services in a professional and easy to find way
- Retain existing members by offering them all the information they would need
- Provide a way for customers to contact the gym
- Have the website accessible and user-friendly on any device
- People looking for a gym
- People looking for a gym with group classes
- People looking for a gym with personal trainers
- An intuitive website which is easy to navigate
- Find out information about the gym quickly and easily
- Everything to work as expected on the website
- A professional looking website
- Easily contact the gym for more information
- Have an accessible website for disabled customers
- Easily find out information about the facilities offered at the gym including photos
- Find out location, prices, opening times and amenities offered
- Find out information about any classes that may be offered
- How to contact the gym if I have any further questions
- Find out timetable for classes
- Find out any information about personal training
- Check out opening times
- Contact the gym for any further information or suggestions
- Find the gym on social media
- Allow users to easily find information about the gym including opening times and location
- Allow users to easily contact the gym
- Allow users to find more information about the gym facilities
For the colour scheme a minimalistic colour scheme was chosen but with a bright red to generate an emotional response. Red is a colour of boldness vigour and stimulation. Red was also was inspired from the spartan helmet used for the company logo which goes with the warrior theme, meant to motivate people. A variation of yellow was also added to the colour palette which is the colour of energy. Coolors was then used to create a palette.
The warrior helment logo was created in Canva and the white colour for a minimalistic design and to be able to convert it into an svg to achieve the transparent navigation. Convertio was then used to convert the png logo into an svg.
The fonts were imported from Google Fonts and Mukta font was used in the headings to give it a minimalistic and easy to read font.
The page is structured in an easy to use and intuitive way and it's designed to be user friendly. The website has a Homepage and 4 other pages: Gym, Classes, Prices and Contact Us.
- Homepage - Landing page with an introduction to the gym, including opening times and location; brief overview of services offered and links to them
- Gym - Provides more information about the Gym facilities and a gallery of the actual gym
- Classes - Provides more information about the classes offered, personal training and the classes schedule
- Prices - Provides information about the membership types
- Contact Us - Provides information about gym location, opening times and allows the user to contact the gym or sign up for a membership
- A mockup image has been added to this file to give an idea of the way the website is displayed on different devices which can be found at the top of this page. UI Dev has been used to achieve this.
- All current features have been designed with a mobile first approach meaning the website is fully responsive on all screen sizes.
- Bootstrap grid system has been used to achieve this and custom CSS added to it to make some other tweaks to make sure everything looks good on all screens
- The website contains 6 pages (including the 404 page) and 17 features
- All pages feature a navigation, the homepage has a transparent one and all the other ones have the dark one as it was difficult from accessibility perspective to keep it transparent when it came to contrast issues
- The navigation bar helps the user find easily whichever section he's interested in
- When it shrinks the navigation turns into a drop-down one for tablets and mobiles
- Navigation used stays into place, a sticky one has not been chosen as the website is not large and the links from navigation are repeated in the footer
- User stories covered: 1
- Callout buttons have been used throughout the website in order to prompt the user to either sign up or contact the gym and a red colour has been used to make it stand out from everything else.
- User stories covered: 11
- All pages have a heading which features as an quick introduction to the page or as a callout to sign up.
- User stories covered: 1, 9, 10
- All pages have a footer section which repeats the link from the navigation and the social media links in order to make navigation easy for user.
- User stories covered: 1, 9
- Allows users to find out more information about the gym, the address, opening times, parking and location
- User stories covered: 2, 7, 10
- Allows users to easily navigate to other sections of the website the users might be interested in with the aid of visual effects to make them stand out
- User stories covered: 1, 2, 3, 5, 6, 12
- Informs the users about the facilities available at the gym
- User stories covered: 1, 12
- Allows users to find out more about the gym atmosphere through other members testimonials
- User stories covered: 12
- Gives users more information about the available equipment in the gym
- User stories covered: 1, 12
- Gives users more detailed information about the equipment
- User stories covered: 1, 12
- Allows users to see images of the gym machines
- User stories covered: 1, 12
- Gives users more detailed information about the classes available via a set of videos and images
- User stories covered: 3, 12
- Allows users to meet the personal trainers and their expertise in order to know which one is most suitable for them
- User stories covered: 1, 6
- Gives users the timetable for the classes available
- User stories covered: 3,5
- Gives users details about the membership types and prices
- User stories covered: 2
- Allows users to find out more information about the gym, the address, opening times, parking and location
- User stories covered: 2, 7, 10
- Allows users to contact the gym or sign up for a membership
- User stories covered: 4, 8, 11
- A 404 page has been added in case the user mistypes something on the website which will allow them to go back the homepage. It features the navigation, social media links and a button to take them back to the homepage.
- User stories covered: 10
- A Google Maps iFrame has been added on Homepage and Contact page which shows the users the location of the gym
- Links on the homepage have been added via images which directs users to the wanted sections
- A form has been added in the Contact page which users can use to sign up or contact the gym
- Videos have been added in the classes page via iFrames which allows users to start, pause and adjust volume as wanted
- Navbar is responsive and turns into a dropdown navbar on tablets and mobile
- A payment feature that allows users to pay for their membership is something that could be added later on which would make a more convenient user experience and conversion for the business as well
- Bootstrap 5.3
- I used Bootstrap throughout the website in order to make it responsive on all devices. It uses Containers, Gridsystem, Flexbox, Button Classes , some Bootstrap icons, aligment, padding/margin classes, shadow classes, navbar component and also some styling classes in the contact form.
- Gitpod
- First part of the project was done via Gitpod IDE initially which was then changed later on to Visual Studio Code
- Git
- Git was used in order to push the code to Github on a constant basis and have a backup of the code
- Github
- Github was used in order to backup the code
- Visual Studio Code
- Visual Studio Code was used in the second part of writing the code for this website and it is my preffered IDE
- Paint
- Paint was used in order to resize some of the images initially that were too large or modify them to specific sizes
- Paint 3D
- Paint 3D was used to crop the images to specific sizes which in normal Paint wasn't as easy to do
- Tiny PNG
- Tiny PNG was used to further reduce the size of all the large images further
- Snipping Tool
- Snipping TOol was used to take all the screenshots used in the Readme file
- Balsamiq
- Balsamiq for Desktop was used to generate the Wireframes which can be found in the Wireframes section in the Readme file
- Favicon
- Favicon was used for generating the favicon icon
HTML Validation
- Testing was done via https://validator.w3.org/ and screenshots can be found below of results
- No html errors on any of the pages
CSS Validation
- Testing was done via https://jigsaw.w3.org/css-validator/ and screenshots can be found below of results
- CSS file was uploaded directly and no errors found
Accessibility Evaluation
- Testing was done via https://wave.webaim.org/ and screenshots can be found below of results
- No errors except an invalid error saying there is no alt text for an image when there actually is, more details on last image in this section
Performance Testing
- Testing was done via Chrome Lighthouse and screenshots can be found below of results
Performance Testing on Devices
The website was tested on the following devices:- HP Pavilion 15'
- Xiaomi Redmi Note 10
The website was also tested in Chrome Developer Tools for various devices option including mobile phones and tablets.
Browsers Compatibility
The website was tested on the following browsers:- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Opera
Testing User Stories
- Easily find out information about the facilities offered at the gym including photos (first time visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation bar | Select whichever topic interested in | Find information about that topic | Works as expected |
| Services links | Scroll down to services section and select which service interested in | Find information about those services | Works as expected |
Screenshots
- Find out location, prices, opening times and amenities offered (first time visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Prices table | Select prices link in navigation bar | Find information about prices | Works as expected |
| Gym information section on homepage | Scroll on homepage and find info about facilities, address and times | Find information location, prices, opening times and amenities offered | Works as expected |
Screenshots
- Find out information about any classes that may be offered (first time visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Classes details | Select classes link in navigation bar | Find information about classes | Works as expected |
| Classes schedule | Select classes link in navigation bar and scroll to bottom | Find classes schedule | Works as expected |
Screenshots
- How to contact the gym if I have any further questions (first time visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact form | Select contact us link from navigation bar and locate contact form | Find form and contact gym | Works as expected |
| Footer | Scroll down and select contact us link | Find form and contact gym | Works as expected |
Screenshots
- Find out timetable for classes (returning visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Classes schedule | Select classes link in navigation bar and scroll to bottom | Find classes schedule | Works as expected |
Screenshots
- Find out any information about personal training (returning visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Personal trainers | Select classses in navigation bar and locate personal trainers section | Find information about personal trainers | Works as expected |
| Services links | Scroll down to services section and select personal training | Find information personal training | Works as expected |
Screenshots
- Check out opening times (returning visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Gym information section on homepage | Scroll on homepage and find info about facilities, address and times | Find information location, prices, opening times and amenities offered | Works as expected |
| Gym information section on contact us page | Select contact us from navigation bar, scroll on contact page and find info about facilities, address and times | Find information about those services | Works as expected |
Screenshots
- Contact the gym for any further information or suggestions (returning visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact form | Select contact us link from navigation bar and locate contact form | Find form and contact gym | Works as expected |
| Footer | Scroll down and select contact us link | Find form and contact gym | Works as expected |
Screenshots
- Find the gym on social media (returning visitor)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Heading section | Click on social media icon on the side | Find social media page for gym | Works as expected |
| Footer | Scroll down to footer and click on social media icon | Find social media page for gym | Works as expected |
Screenshots
- Allow users to easily find information about the gym including opening times and location (business goals)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Gym page | Navigate to gym section on navigation bar | Find information about facilities available | Works as expected |
| Google map on homepage | Scroll on home page and see google map | Find gym location | Works as expected |
Screenshots
- Allow users to easily contact the gym (business goals)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact form | Select contact us link from navigation bar and locate contact form | Find form and contact gym | Works as expected |
| Footer | Scroll down and select contact us link | Find form and contact gym | Works as expected |
Screenshots
- Allow users to find more information about the gym facilities (business goals)
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Facilities section | Scroll down on home page and see facilities | Find facilities available at gym | Works as expected |
| Gym gallery | Navigate to gym section on navigation bar | Find information about facilities available | Works as expected |
Screenshots
- On tablet and mobile screen Page 404 came up with some grey margin at the bottom which is more noticeable on mobile if you scroll down
- Was not able to find the source of this and was fixed by adding the footer to the page
GitHub Pages was used to deploy this website live and the instructions to achieve this can be found below:
- Log in to GitHub and go to the GitHub Repository
- Go to settings in the top navigation section for the repository
- Go to the Pages section
- For the source select main and click Save
- After a few minutes you will find the link saying "Your site is live at https://alexbuzea.github.io/spartan-gym/"
In order to fork this repository:
- Go to the Github repository
- Click on the Fork button in the top right hand corner
To clone this project from Github:
- Go to the Github repository here
- Go to Code section in the top right hand corner of the repository
- Copy the https link
- Open Git Bash
- Change the working directory to where you want to clone the repository
- Type git clone, then paste the URL copied in step 3:
git clone https://github.com/AlexBuzea/spartan-gym.git
- Press Enter
- Stackoverflow for background overlay CSS
Images were sourced from:
I wrote some of the content, and some of the content was inspired or used from the following sources:
- Cardiff International Pool and Gym was used for inspiration for the Gym page
- The Gym Group some of the content on the Gym page was used from the their website
- Energie Fitness was used as inspiration for the facilities section on the Homepage
- The Fighters Club HK was used as an inspiration for the Homepage
- David Lloyd Club some of the content on the Classes page was used from the their website
- 99Designs was used for inspiration for general looks on gym websites