East Coast Gyms

Description

This is a front end design for a fictional gym based in East Lothian. The purpose of the website was to bring customers attention to the great facilities on offer here in east lothain.

• The Index pages gives an overview of what we offer as a gym and community. Opening hours to pictures of the gym itself.
• Our Facilities page gives visitors a more extensive breakdown of the gym and what facilities we have.
• A contact page for potential clients to sign up and pass on some information so we can best advise on either prgram, memberships or trainer! This also gives a fully functioning GoogleMap.
• Our trainers page gives visual images of our trainers, a breif history of them and a breakdown of all of the skills and competencies.
• In our Members section you get a full breakdown of prices and offers set out by the gym.

Deployment and Live page

The site has been deployed to github and is accessible on Github Pages

Wireframe

I have drafted up a wireframe using Balsamiq. There were a few tweaks in design however the fundamentals are the same! This can be found here

Breakdown

For the purpose of this project, I created a Gym Facility (like one I wish was local to myself) that I believe would capture the interest of the locals and of anyone new to the village. This could and would be a great local hotspot and focal point in the community.

As a gym we would welcome all people and bring togehter a very divided community.

User Story

I identified that the page would be useful to Members and guests alike. With the constant idea of expanding clientel and becoming a powerhouse in the fitness world:

Members

• Need to know opening times.
• Members must have access to the class sign up list.
• Be able to see what prices we offere for different memberships.
• Be able to visually see who the trainers are in the gym.

These are accomplished by:

• The opening hours are on the home page, easily readable and accessible.
• The contact page gives the address and a GoogleMap. They can also sign up here.
• The large Header images on each pages give the viewer clear insight on what information should be on the page.
• Each trainer has a image and a list of credentials making it easy for selection.
• Facilities outlines what is offer through images again and text with Description.

Non-Members

• Need to know where to find the gym.
• Need to have access to a price list before arrival.
• I want to know what facilities are on offer.
• I want to guage what type of environment I could potentially be visiting.
• I would like to see who works there and what skills they have.
• I would like to know what type of atmosphere there is.

These are accomplished by:

• Ease of navigation, with a clean layout on any platform or device.
• Opening hours are found on the homepage.
• They have contact page where they can register interests, and a class booking system via our sign up modal.
• Contact has the full address and a interactive GoogleMap.

User Experience

My website has been built to be user friendly on any device, and across all different browsers.

The page itself is coloured in Gym Colours. Each page has expressive bright images that represent the facility well. Ive used a deep red to attract the uer to the sign up buttons.

The navbar is located at the top and has white writing against a dark backdrop making it bold and easy to read.

Features

The site uses many features that are native to bootstrap:

• Image carousels to give users a visual representation of the Gym.
• Navbar always stays at the top of the screen, collapses when on mobile to hamburger style.
• Modal windows on home page to sign up to the gym. And the Trainers page to show what classes are available and how you can register.
• Table is used to differentiate opening and closing times.
• GoogleMap is Used on contact page. Fully interactive.

Testing and Changes

I have validated my HTML code using W3C Validator Check.

Speed tests were done with UPTRENDS.

The page was tested on a few different platforms to ensure correct user experience on different platfroms and screen sizes.

I used Pingdom to check the speed of my webpage and how quick it could be uploaded. These are my results thus far:

Issues and Changes

• GoogleMap was styled in HTML, changed this and styled using CSS.
• I had issues with my images on Trainers-Page. I replaced the styling of the images to ensure I could align preview them to give the best experience possible.
• Also on the Trainers-Page I added a modal window so potential clients could sign up for classes.
• I also replaced the idea of creating a banner and opted for large display images to show off the excellent facilities. Using large headings to attract the users attention.

Scalability

• Analytics tools should be implemented to monitor user behavior in relation to the website's goals.
• Adding an online shop for products or merchandise would be a great benefit to the site and the general branding of the company.
• Adding a weekly/monthly newsletter would be a great benifit. These can showcase changes to classes or introduction of new products and services.
• Next time I also plan to use tinypng as this will greatly reduce the size of my image files thus create a much faster responsive web page.

Technology

Languages

• HTML
• CSS
• Bootstrap

Tools

• Gitpod: Used for creating and editing code
• Balsamiq: Used to create wireframes
• Font Awesome.
• Embedded Map To add the map on Contact Page.
• W3C Validator Check to validate HTML.
• UPTRENDS to test the speed of the webpage.
• Responsive Viewer This is a google Chrome extension and is brilliant for checking multiple screens at one time.

Media

• Images using throughout are courteously used from UNSPLASH.
• Image of Mikko Salo from DSLR INSPIRATIONS.
• Image of myself used as a personal trainer LinkedIn.

Acknowledgments

• Huge thank you to Code Institute you gave me the tools neccessary to make this happen.

• Biggest thank you to Felipe Alarcon without you I would have a less porfessional and less interactive site. Your wisdom, guidance and patience are greatly appreciated. The feedback is thorough and always extremley helpful, you have pushed me to new heights.