Link: Afrikan Beasts
Afrikan Beasts is a local community gym based in the West Rand of Johannesburg, South Africa that specialises in Weightlifting and Fitness
The wesbite is a basic guide to the gym and the services available but more so, focuses on the visual representation of weightlifting
Users can view all the services and decide if they would like to receive contact from the gym, they can preview the services provided and view the basic fees that accompany these services
The site ecourages people to get more involved in person and requires an in-person attendence to fufill the company's requirements
The target audience is aimed at anyone looking to improve their quality of life whether its strength, fitness, yoga or massage therapy
- To get a brief understanding on the services provided and make a informed decision on joining the gym
- To be able to easily navigate throughout the site to find content.
- To view the website and content clearly on any device and screen sizes
- To learn more about Afrikan Beasts
- To find different services the gym provides
- To contact the owner for any further questions
- To view the address of the premises
- To find more content about weightlifting
- To check pricing and times of classes
- To review previously viewed content
- To communicate with likeminded people
- To see if there are any new content added
- To check if there are any new events or services added
The colour pallete is chosen to work with the gyms colour themes, Red and Black(grey), The colour themes was hand picked by the owner of the gym and represents the colour of the actual walls and floor of the premises, this is the corporate identity of the business
Color palette was originally generated from the Owner Daniel Katz
Colours requested : #ff220c, #333333 and #ffffff
These were later adjusted due to accessability and contrast conflicts
Final Colours : #E62107, #333333 and #ffffff
Fixed on all three pages, allowing user to easily navigate between all pages without using ‘back’ button or reloading the site. The about section was removed from teh services and contact page because there was no need for 2 nav-men targets returning to the index.html page
Main image on the home page is designed to be intensive and leade the user to be entrigued but the depth of the image, a grayscaled image was used to match the overall look anf deel surrounding the theme
This section is created in a way to give the user a quick overview of the gaols of the programme and company, a brief description and hyperlinks to the definitions of true weightlifting and olympic weightlifting by definition as per wikipedia, the logo was inserted in between the two descriptiions of weightlifiting and functional fitness to show that the gym is the core of the programmes
The photograhic banners are a good idea on life inside of the gym and to give an idea on what is going to be the tasks at hand. the focus of this was that the user would be able to see if thet would enjoy the enviroment of the gym and the idea of using four images was to show the simplicity of change, that it might not be too much to discourage the user from comitting and rather making them feel more inquisitive
This section gives the user some first hand indtroduction to the gym owner in a 'breaking the ice' sort of engagement, the user can get to know Daniel and his gyms primary purpose to make the actal contact of the client and business an easier step going forward
No Videos were used in the creation of this site as there are links to the YouTube Channel in the footer.
Section is visible at the bottom part of the site on each page, this includes social media links and copyright information with a simple #beastmode which is the slogan for the gym
This is a simple table which will allow the user to see the membership costs and pricing for other secondary products and services of the gym, the days these classes take place and allows the user to plan their routines to accomodate and see if they have the time to make these commitments
User can enter the contact information to request more information from the gym owner, this is a simple call back form for those who have the patience to wait to hear from the business and it also has the contact details for the gym should they want to take the initiative to contact first
404 page has been implemented to ensure that user get directed to the correct link, in case the incorrect address is entered into the browser., 404's are usually created well, this is a basic redirectory with a big image link to take you where you need to be, because getting fit is a big change in someones life, the idea was to resemble that
The gym has not yet the capacity to host its own events but is looking to grow and expand in the next couple of years and will be looking to add a notice board into their website
There will be a database where members can manage their memberships firsthand giving them more control, choosing to freeze, cancel or upgrade their training plans
Allowing users to contact the gym directly through instant messenger application Whatsapp
The fav icon was generated from Favicon.io
The fonts were taken from Font.google.com
Multi site mockup genrated on Techsini.com
Site was built on deplyed using Github
The website was built using Git version control to commit and push code on to deductaed github raspitory
Google Developer Tools was used to test responsivness and effectively check what changes necessary in css coding to get desired results.
Testing was performed on three different browsers: Chrome, Firefox and Microsoft Edge. No noticable errors were found in the creation of this site due to its simplistic nature, there was no Mac abailable during testing so Safari fould not be used to enhance the testing procedure
the website was also tested on Android on a Samsung S20 FE and S8
The site passes W3C Validator testing on W3C Validator
All pages passed with no errors
The site passes all tests on CSSjigsaw validator
Accessability was tested using Lighthouse on Google Developer Tools, passmark 100% achieved on all pages.
-
Initially had an issue with mobile device responsivness Flexbox was used to sort these issues out and changing widths of original issues
-
The CSS was originally located in the assets folder but was moved then caused the site to not load the style sheet, this was fixed when the pathway was redirected to the css folder which has the stylesheet
-
The hero image on the home page was too long for smaller devices, and the about text was overlapping, this was changed to fit the hero section in a smaller height
-
The services table was too large to fit in the mobile view of the page and was changed when the height of the page was increased
-
The contact page could not align well in mobile view, the original flexbox was causing the widths of the input to overflow, the grid system was implemented for ease of the pages structure
-
Index owner profile section was too wide for smaller devices, a smaller breakpoint was created to allow content to fit
-
There were no Aria labels on the form inputs, they were inserted before the final push
- The navbar menu is too small on smaller devices and the Afrikan Beasts Text Link to direct to the home page is hidden from 500px and smaller, this can be fixed with JavaScript or even frameworks like Bootstrap to create a Hamburger Icon so that the logo can remain and the navigations can be hidden
The site was created based on This template
- Click 'Use this template'
- Change the name
- Click on 'Create new respository"
- Once created, click on 'Gitpod'
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- Go to pages and select main branch
- Click save
The live link can be found here - https://trevthedev777.github.io/AfrikanBeasts/index.html
This pricing panel was created using the idea of a bootcamp video displayed by Colt Steele from Udemy called The Web Developer Bootcamp 2022 (https://www.udemy.com/course/the-web-developer-bootcamp/learn/lecture/21990992?start=15#overview)
I originally created this template in 2020 creating a protfolio website Trevor Lehmann Portfolio(https://www.trevorlehmann.com)
My Mentor Daisy Mc Girr was the guidance for me through my project, a big shout out to her for all of her help
All text and decriptions was created by Daniel Katz the owner of Afrikan Beasts
The hyper-link information in the weightlifting descrption comes from wikipedia
The photos on all pages were taken from Afrikan Beasts themselves