User Centric Frontend Milestone Project
Ivan Ray is one of the best Personal Trainers in Dublin. He has started his career three years ago as a PT but he hasn’t got a website where he can reach more clients. The project comes up as a possible new Ivan’s website where his prospective clients can get in contact with him and get to know more about Ivan and his methodology.
Ivan as a professional can expect from this website reach more clients and clients can expect get in contact with Ivan easily and also get to know Ivan’s methodology.
Please check the links to see a screenshot of each section.
A live demo can be found here
My strategy from scratch is to keep the website simple but functional. Easy to access with only one page where users don’t have to open new tags in order to see something placed on the website.
Set your goal/Contact - wireframe
The skeleton of the project was designed giving a specific Id to each section in order to quick acess each one of them.
Here the Section provides a carousel with 3 pictures giving the idea of movement and activity.
In this section the prospective client will get to know bit more of Ivan and what is Ivan’s intention. Be sure which goal they have to set for regarding the client and client’s goals.
Here the prospective clients will have an idea of where they have to start from and from there they can in contact with Ivan Ray in order to set a fitness plan.
From this section prospective clients will have the chance to fill up a form and wait for Ivan to get in contact with them. Basic information will be required from the potential clients.
As mentioned previously, a carousel was used on the main and first section to give the idea of movement and activity. For mobiles a call out will show up skipping straight to contact me section for those who already know Ivan Ray. Colours like gray, white and dark gray were used to give a good effect highlighting the fitness subject. HTML, CSS and Bootstrap (version 4.4) were used in order to bring this project to light. This webpage used the scrollSpay and “smooth scrolling” to give a nice effect when the user is changing the section. Also the Navbar will be collapsed when the screen changes the size to medium or small size. That will make the Navbar look modern and a clean design to the site.
Ivan hasn’t got video where he will explain types of work outs for specific goals. For now videos related to the subject were linked to the cards bringing the potential clients to hear something about every topic.
Prospective clients trying to find a good personal trainer in Dublin will access the site through Internet search engines. First, they will see a navigation bar at the top, where you can take them to any section of the site, and below a carousel with photos and statements of Ivan, inviting customers to contact Ivan. I decided to keep the navigation bar fixed at the top of the web page to make it easier for users to change the section. Three photos were selected to slide on the carousel. To keep photos looking good, when placed at a smaller size, a "div" with a button will appear, taking up 50% of the screen on mobile phones, making photos look good and giving customers a button to access the form.
The site is a page of 4 sections on a scrolling page. Second, below the carousel, an "about me" section will appear saying little about Ivan and his missions, giving the web page credibility. This section has been divided into two parts, where one part of Ivan's photo will participate and the text the other. On small screens, each section of these two will occupy 100% of the screen to keep it looking good and also keep the text visually well placed.
The third section called “Set Your Goal”, customers who are confused about what to do, what type of exercise they need to perform, cards will appear explaining some of each methodology. Cards are also a link that leads them to a video with related content on YouTube. Note that Ivan doesn't have these videos yet. When he does, the videos will be replaced. The videos will open in a new tab using "target = 'blank'" to keep potential customers in a strategic position and keep track of our site. All links have been tested, they are working perfectly.
To ensure that the site is responsive, the site has been tested on various browsers such as Chrome, Safari, and Internet Explore, and to ensure that it works on mobile, the site has been tested in the "inspection" sections of the Chrome browser.
In order to keep the file updated correctly every time that it is committed, the name of the HTML file is index.html. This site is hosted using GitHub pages built from master Branch.
All the Ivans picures were taken by Krzysztof Kris Szymkowiak
Contact: kris81dub@gmail.com
+353857555361
The content on the website was written by me, apart from one text mentioned below on section "Set your goal".
Photo by Shashank Shekhar on Unsplash
Video link- How to Lose Fat the Right Way (MEN VS WOMEN!)
Channel: ATHLEAN-X™
Photo by Alora Griffiths on Unsplash
Video link- 5 Proven Ways to Build Muscle (5x Faster)
Channel: Gravity Transformation - Fat Loss Experts
Photo by Olga Guryanova on Unsplash-
Video link - Sport Performance Pillars | Exercise Classification & Selection | JTSstrength.com
Channel: Juggernaut Training Systems
Text wikipedia - "A 2012 study found that even modest amounts of leisure time physical exercise can extend life expectancy
by as much as 4.5 years."
Photo by Calder B on Unsplash
Video link- How to Live Longer | Blue Zones & Longevity | Doctor Mike
Channel: Doctor Mike
Photo by Pablò on Unsplash
Video link- How to Design Workout for your Specific Fitness Goal
Channel: Kaa Yaa