Giters

AndyMc3000 / maxfit-codeinstitute-ms1project-static-gym-website

Milestone 1 Project for Code Institute Diploma in Fullstack Software Development course. Static front-end website for fictional Gym based in Killarney, Co.Kerry.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

gymwellnessfitnessbusinesskerry

M A X F I T Logo created using FreeLogoDesign.org

MaxFit.com - Gym & Fitness Club 🏋️

Code Institute - Dip. in Software Development - Milestone Project 1 - User Centric Front-End Development

Student: Andrew McDonald - Contact me on GitHub :octocat: - AndyMc3000

Table of Contents

  1. Introduction
  2. User Experience Design (UX)
  3. Development Process
  4. Website Features
  5. Technologies Used
  6. Testing & Bugs
  7. Deployment
  8. Credits

1. Introduction

The MaxFit website is my Milestone Project 1 (MS1) for my Diploma in Software Engineering course at Code Institute. The below refers to MaxFit as a fictional client of mine, where I have been hired to develop a website for them to meet certain requirements (see UX section below). However the underlying goal of the project is to meet and exceed the requirements laid out for the MS1 by Code Institute. The main goal of the MS1 is to "..build a static front-end site to present useful information to users, using all the technologies that you have learned about so far." Those principle technologies being HTML5, CSS3, and Bootstrap front-end framework.

MaxFit is a Gym and Fitness Club based on the beautiful shores of Lough Leane, Killarney. MaxFit is run by a passionate and inclusive group of fitness experts and professionals, and boasts state-of-the-art equipment and facilities. At MaxFit, their goal is to maximise the potential within their members.

Back To Top ^

2. User Experience Design (UX)

The design of this website was determined by assessing and quantifying the goals and objectives of the website owners, as well as the requirements of end users who will visit and use the website. Following the determination of 'Client' and 'User' stories and their subsequent technical requirments, the site was designed using the principles of Jesse James Garrett's '5 Planes of UX Design'. The outcome or tasks created for each plane is outlinined below.

The 5 Planes of UX Design:

1. The Strategy Plane

The Strategy Plane is, as defined by Jesse James Garrett "..incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well."

Please see below details of 'Client Stories' to detail the requirements of the MAXFIT business owners, and 'User Stories' which highlight the requiremnts of end users of the MAXFIT website.

Client Stories

  • “The main goal of the website is to attract new customers, and provide value to existing customers in the information is provides.”
  • “The website must show and promote the quality of the facilities at MAXFIT.”
  • “The website must detail Membership costs and features (Gold & Silver Passes, each with 3-month, 6-month, 12-month, student/senior pricing).”
  • “The website must allow people to easily contact MAXFIT to arrange a free fitness consultation.”
  • “The website must promote details about MAXFIT’s 1-month free trial membership offer.”
  • “The website must promote MAXFIT’s Personal Training services.”
  • “The website must detail the classes MAXFIT currently offer and highlight their costs and schedule/frequency.”
  • “The website must visually appeal to potential customers from all walks of life. MAXFIT is not just a ‘hard-core workout’ gym, it is an fitness and wellness centre too. MAXFIT’s range of services appeal to customers of all age groups, male and female.”
  • “The website must promote the fact that MAXFIT offers 24-hour access.”
  • “The website must promote MAXFIT’s social media channels”
  • “The website must show some testimonial quotes”
  • “There must be a system in place to track website usage statistics and end user interactions. All MAXFIT owned internet-connected computers, routers, or devices should be automatically excluded from website statistics/reports.”
  • “The website must be mobile-friendly.”

User Stories

  • “I want to see what kind of facilities MAXFIT have.”
  • “I want to find about the different classes MAXFIT run.”
  • “I want to find out when certain classes are on at.”
  • “I want to be able to see where MAXFIT is located.”
  • “I am interested in a membership and want talk to someone about what is best for me.”
  • “I am interested in a membership and want to understand what the costs are.”
  • “I want to find out a little bit about the people who work at MAXFIT.”
  • “I want to see what other people say about MAXFIT”.
  • “I want to find the MAXFIT social media channels.”

2. The Scope Plane

Based on the outcomes the Strategy Plane, The Scope Plane determines what features, functionality, and types of content, should be included within the scope of the project. Listed below are the functional specifications and content requirements decided upon for the MAXFIT website.

Functional Specifications:

  • Build a esponsive Website with 6 pages - Home, Services, Classes, Membership, Team, Contact.
  • Use photo/image carousel at top of homepage.
  • Homepage carousel to include link to free consultation contact form.
  • Contact form required for free trial sign-up form.
  • Contact form required for membership sign-up.
  • A main photo Gallery using a pop-out modal carousel, and similar galleries for indivudual services and classes.
  • Use a bootstrap Jumbotron for the top of all other pages to promote contact.
  • Google Analytics integration.

Content Requirements:

  • Inspirational images & messaging throughout.
  • Photos of the facilities, equipment, and members using services.
  • Testimonial sections.
  • Pricing table.
  • Promotional sections for Free Trial and Free Consultation.
  • Personal Trainer motto’s.
  • A main Image gallery for homepage and other locations, and individual galleries for services and classes.

3. The Structure Plane

Interaction Design:

Interaction design is defined as the "..development of application flows to facilitate user tasks, defining how the user interacts with site functionality" Inline with this principle, the pages were designed as follows;

  1. The Homepage;
  • It should have a navigation bar with individual links to each page.
  • It should contain a call-to-action to promote the free fitness consultation offer. This should link to a contact form on the contact page.
  • It should contain a section to promote free trial offer. This should link to a contact form on the contact page.
  • It should also contain a ‘why us’ section highlighting 4 main features/benefits of using MAXFIT - The Gym/equipment, Personal Training, Classes, and Membership benfits. The would link to relevant pages via buttons.
  • It should contain a section to show Testimonial quotes.
  • It should have a furthe navigation section in the footer. The footer will also contain links to all MAXFIT's social media channels.
  1. The Services page;
  • It should have the same navigation bar and footer as described un The Homepage section above.
  • It should have 3 main sections focusing on; The Gym/equipment, Personal Training Services, and the Studio/class facilities.
  • The sections should show detailed text information and a gallery of photographs.
  1. The Classes page;
  • It should have the same navigation bar and footer as described un The Homepage section above.
  • It should contain a short section giving details of what each class is, a link how much it costs, what the current timetable for the class is, and who runs the class.
  • Each section should also contain images/gallery relevant to the class.
  1. The Membership page;
  • It should have the same navigation bar and footer as described un The Homepage section above.
  • It should contain pricing information for the different offerings/packages.
  • It should contain a 'hero' section which details the Free Trial offer. This should link to the Free Trial sign-up form.
  1. The Team page;
  • It should have the same navigation bar and footer as described un The Homepage section above.
  • It should contain contain information about the site management team and personal trainers.
  • It shoud offer a quoick bio, a photo, and qualification details for each team member.
  • It should contain messaging around a mission statement.
  1. The Contact page;
  • It should have the same navigation bar and footer as described un The Homepage section above.
  • It should contain address and contact information.
  • It should include a Google Map.
  • It should contain a contact form with a dropdown to allow users to indicate their are of interest: Sign-up to a plan, Free Trial, or Free Consultation.

Information Architecture:

Infromation Architechture is defined as; "The structural design of the information space to facilitate intuitive access to content" (Copyright 2000 James Garrett). As such MaxFit was designed to allows a user to find the information they need easily. For example, the navigation bar is fixed to the top of the page view so is always immediately accessible, and buttons and links are clearly visible and communicate their purpose in an unambiguous way.

The structure of the website and outline of page sections is outlined in the Sitemap. Click the link to view the Sitemap.

4. The Skeleton Plane

Based on the structure decided upon, The Skeleton Plane ".. The skeleton is designed to optimize the arrangement of these elements (such as the placement of buttons, tabs, photos's and blockd of text) for maximum effect and efficiency..".

With this in min the following wireframes were created to detail the layput of the website pages and individual sections/containers. Please click the following links to view these wireframes.

  1. Homepage Wireframe
  2. Services page Wireframe
  3. Classes Wireframe
  4. Membership Wireframe
  5. Team Wireframe
  6. Contact Wireframe

5. The Surface Plane

Having completed the previous 4 stages in the UX design process, I moved on to making decisions around the design and styling of the website. The Surface Plane focuses on the styling of images, backgrounds, fonts, and colours used on a website. The details of these decisions are listed here;

  1. Colours - The color scheme for the website was chosen from a selection of colours I considered, using tools on the Coolors.co website. The color schemes chosen, along with their HEX values, is shown here;

  1. Font - I used the Google Fonts website to help me decide on a font to use on the MAXFIT website. I wanted something simple yet strong at the same time - not too light, not too bold. I decided upon a Font called Nunito Sans. An example of it can be seen here;

  1. Images - I mainly used photos taken from the Unsplash.com website. On Unspalsh.com I was able to create collections of phtotos for each of the services and classes which I wanted a gallery for. E.g. a selection for yoga, pilates, personal training etc.

  2. Icons - I used Font Awesome to add icons to various page and section headings. The footer navigation list had icons which matched the icon found on each page heading. I also added a Font Awesme Favicon to the page headers.

  3. Galleries - I decide to use Bootstrap Modals as containers for my Carousel Galleries.

Back To Top ^

3. Development Process

I drew up a process to follow for developing the MAXFIT website. This is listed in sequence below.

  1. Design - I firstly designed the site based on the Client/User Stories requirements, by getting ideas from fitness club/gym websites, and by creating wireframes/sketches.
  2. Structure - I then wrote the HTML code for all pages including; navigation, footers, sections, galleries, forms, iframes.
  3. Content - I then added text content to sections (lorem ipsum/placeholder text), and images to galleries.
  4. Style - I then added colours and fonts and wrote CSS rule sets and media queries in order to style the website.
  5. Responsive - I made sure all texts/headings, images, and container elements transform approprately and look good when viewed on different devices such as: mobile phones, tablets, laptops, large screen computers (PC's), and large TV's.
  6. Review - I did a last review of all code (formatting, besutifying etc) and content, fixing anys bugs/typo's etc as I did so.
  7. Testing - And finally I validated my HTML and CSS code, and tested functionality of site elements across a range of different devices and browsers.

Back To Top ^

4. Website Features

  • Bootstrap navigation bar
  • Image Carousel
  • Gallery Modals
  • Free Trial signup form
  • Free Consultation call-back form
  • Membership sign-up form
  • Bootstrap responsive grid
  • Social Links in footer
  • Navigation links in Footer
  • Accordian on Classes page
  • Google map on Contact page
  • Google Analytics

Back To Top ^

5. Technologies Used

I used the following technologies, services, and devices to develop, style, deploy, and test the MAXFIT website;

  • HTML5 - The site was develop using HTML5 markup language.
  • CSS3 - The site was styled and in some cases made responsive using CSS3.
  • Bootstrap - I used the Bootstrap framework for implementing some sections and features.
  • GitHub - I set up a free repository on GitHub.com to maintain a master of all website files, content, and resources.
  • GitPod - I used the free GitPod.io Integrated Development Environment to write and develop the code for the website.
  • Github Pages - I used the free GitHub Pages to deploy/publish the live website on the web.
  • Balsamiq - I used the Balsamiq application to create the website sitemap and webpage wireframes.
  • Responsive Viewer - I used a Chrome Browser Extension called Responsive Viewer to emulate the presentation of the website on multiple device sizes and types.
  • Apple Preview - I used the Apple Preview image editor application to crop and resize photo's and images.
  • Apple Pages - I used the Apple Pages word processor to manage and edit text content for the website.
  • Apple Hardware - I used a MacBook Pro to develop the site. I also used an Apple iPhone, Apple TV, and Apple iPad for testing the website.

Back To Top ^

6. Testing

Generally speaking I continually tested each function/feature/element as I added them to the website. I also tested the website using a combination of online services, browsers, and a limited number of physical devices upon completion.

  1. Code Validation:

I ran the code on the website through the W3C Markup Validation Service for both my HTML and CSS code. The results were;

  • W3C HTML Validation - Some issues arose around divs not having closing tages, and images not having ALT tags. These issues were easily corrected
  • W3C CSS Validation Service - no issues.
  1. Website Functionality:

I tested all functionality of links, navigation, buttons, galleries, and site features using the Chrome browser. The tests completed can be seen here - Functionality Tests

  1. Cross-Browser Testing:
  • I tested the website on 3 browsers - Google Chrome, Apple Safari, and Mozilla Firefox.
  1. Device Testing:
  • I primarily used and online services and Chrome browser extension to test the website across different devices. I also tested the website on a physical MacBook Pro, and Apple iPhone 6s. The services I used were;
  • Ami.Resonive
  • Responsive Viewer Browser Add-On

Back To Top ^

7. Deployment

This site was developed by firstly setting up a GitHub repository to store the website files. GitHub is a free online code hosting platform for websites or web applications, which enables version control and collaboration during the development of a project. A repository on GitHub containes all of a project's files and each file's revision history. You can learn more about GitHub and repositories here: Click here to go to GitHub

I used the online GitPod Integrated Development Environment (or GitPod IDE) to write the site code. Once I was happy with a section of code I commited or saved that to the working version of the website on GitPod. I then 'pushed' those changes from the GitPod IDE to my GitHub repository where the master set of files was updated. You can learn more about GitPod: Click here to go to GitPod

Early on in the development process I also deployed the website to a live web address using GitHub Pages. GitHub pages is a free static-site hosting service. It takes HTML, CSS, and JavaScript files directly from a GitHub repository and publishes a website with them. Once setup, any changes you make on your IDE which are subsequently 'pushed' to your GitHub repository, are automatically updated on GitHub Pages too.

Here are the steps I took to deploy the website on GitHub Pages;

  1. Login to GitHub.
  2. Select 'Your Repositores' by selecting the dropdown button on the your account icon at the top right-hand corner of the screen.
  3. When you get to the Your Repositories page, select the project you want to deploy.
  4. When in the individual repository page, click on the Settings icon from the lists of options above the repository file list (settings can be seen listed on the far-right of this list).
  5. Once in the settings page, scroll down the GitHub Pages section near the bottom of the page.
  6. Under the Source section, select the branch of the project you want to deploy from the first dropdown box (normally the master branch).
  7. Also under the Source section choose the folder of the files you wnat to deploy (normally '/root').
  8. Once you have made your selection, click Save. This will deploy your site to a unique URL. Once the site has been deployed, green text with a tcick mark will appear above the Source secion to notify you that deployment has been successful, and will also show you the URL for the website.

I deployed the website early on in the developmnt process, as it useful to be able to examine the website on various physical devices in its live state. Also, while the GitPod IDE has the ability to show a preview of changes to a project, sometimes that does not pick up or display issues which would appear on a live site. For example, when I deployed my website on GitHub Pages initially, I found that it was not reading my CSS file, so no styling was appearing on the site. The Preview tab in GitPod was reading the CSS file correctly. I found that a typo relating to the CSS file source address in my page headers caused the issue for the deployed site, while GitPod Preview did not pick it up. By having the deployed site up and running, I was able to address and correct the bug early in the development process.

The working version of the MAXFIT website deployed on GitHub Pages can be seen here: Click here to view deployed website

Back To Top ^

8. Credits

  1. Coding Websites - I regularly used website to help me learn how to code certain elements/features. I also copied code snippets from these sites in some cases. These websites include;

  1. Colours - I used the Coolors.co website to help me decide on a colour scheme for the webite. This website allows you to create your own colour palettes or to use one of thiers. See more about the Coolors.co palette catalogue and tools here: Coolors.co.

  2. Font - I used Google Fonts for the fonts on the website. See more at: GoogleFonts.com

  3. Icons - I used Fontawesome for all icons on the website. See more at: FontAwesome.com

  4. Design Principles - The design of this website employed the principles of 'The 5 Planes of UX design', which was created by Jesse James Garrett in his book; The Elements of User Experience: User-centered Design for the Web (2002). See more at; Jjg.net

  5. Company Logo - The Maxfit logo was created using tools on the FreeLogoDesign.org website. See more at; FreeLogoDesign.org

  6. Wikimedia commons - Technology logo's.

  7. Text content - I rewordered some of the marketing slogans and texts/descriptions content from Equinox.com and ActiveFitness.ie, and used those on my site.

  8. Map - The map on contact.html uses Google Maps iFrame code.

  9. Website Analytics - I added Google Analytics to the website by adding their code to the of each page.

Acknowledgements

In order to get design ideas, I took inspiration from a number of industry relevant websites. These websites are;

No. Business Name Website Description
1 The Movement TheMovement.ie Single local Gym, Co.Cork, Ireland.
2 EQUINOX Equinox.com 400+ global locations, U.S.-based.
3 The Squad TheSquad.ie City Gym with 3 locations, Cork, Ireland.
4 Glofox Glofox.com Gym manegement and website software company.
5 ActiveFitness ActiveFitness.ie 24-hr Gym with one location, Galway, Ireland.
6 The Spencer Health Club TheSpencerHealthClub.com City Gym one location, Dublin, Ireland.

Additonal Support

I also received help and support from;

  • Allen Thomas Varghese - GitHub username: @allentv - my mento at Code Institute. He gave me advice on project planning, VSCode, Wireframing, and requirements.
  • Jim - GitHub username: @JimLynx - Code Institute - advice on GitHub/Git/GitPod, milestone project planning, and creating a README.md.
  • Anna - GitHub username: @anna_ci - Code Institute - advice with creating a README.md.
  • Student Support - Code Institute
  • Tutor Support - Code Institute

Back To Top ^

M A X F I T Logo created using FreeLogoDesign.org

About

Milestone 1 Project for Code Institute Diploma in Fullstack Software Development course. Static front-end website for fictional Gym based in Killarney, Co.Kerry.

gymwellnessfitnessbusinesskerry

Languages

Language:HTML 86.9%Language:CSS 12.2%Language:Dockerfile 0.5%Language:Shell 0.5%