— The Stardust Gym website aims to attract a clientele looking for a fun workout with 80’s style aerobics with easy accessibility to sign up for classes and membership. This is a responsive website for a gym including a welcome page with a brief overview of what the gym offers, a page describing available amenities and classes, a pdf class schedule and an intuitive sign-up/contact form. The objective of the website is to attract members using modern design with a fun 80’s analog influence with vintage photos and prints whilst being very easy to navigate and user-friendly. Using HTML, CSS and Bootstrap to develop an attractive and engaging site, I aim to provide an accessible platform for potential clients and current members to use to contact the gym, see what’s new and check the schedule and potentially book classes.
You can view the live project here
-
UX
- Project Goals
- User Goals
- Business Goals
- User Requirements
- Planning & Design
- Layout & Wireframes
- Colors
- Fonts
-
Technologies
-
Features
- Current
- Future
-
Testing
-
Bugs
-
Deployment
- Method
-
Credits
- Attract potential members of the gym.
- Provide useful information for members and potential members of Stardust Gym.
- Provide an attractive and visual web experience to build a community at Stardust Gym, provide a positive ethos and service.
As a potential member of Stardust Gym I want:
- Website reflects the quality of the gym to trust their reputation from first impression.
- I want to know what the gym provides in terms of classes, amenities and ethos.
- I want to know how to contact the gym.
- I want to know the class schedule.
- I want to be able to have a pdf of the class schedule so I can easily print it or send it to a friend.
- I want to be able to easily navigate their website.
- Website that works on phone, tablet and desktop to accommodate my busy lifestyle.
- It is very easy to contact the gym via the site.
- I want to know how I can visit the gym’s social media channels.
- I want to know the gym provides a positive experience for fitness to try something new.
- The website should provide an accessible method for members and potential members to contact the gym.
- The gym wants to provide a positive environment for people who are new or familiar with fitness and the website should reflect this.
- The website should easily offer a weekly schedule to increase site visitors to return to the site and check the classes to share with their friends.
- Responsive design for mobile/tablet/desktop.
- Simple and intuitive layout and design of the website, UX is efficient.
- Provides social media links.
- Provides contact information and address.
- Provides a very easy-to-use contact form.
- Site works on a variety of browsers.
- Design of site reflects the quality of the gym, modern and approachable.
Stardust Gym is built upon research for user-friendly websites, exciting yet tasteful design and customer demands compared to other gym websites. The site is simple, direct, fun and easy to navigate to attract membership without being distracting or off-putting.
I plan to keep the layout of the website to be very simple with a trusted and known style of navigation bar and footer. The body of the website will be reflective upon each page’s intent of information. Each link opens a page on a new tab.
I created my wireframes initially on paper with pen and then onto Balsamiq. They aren’t the most detailed and I would like to improve on this for any future projects.
I applied a clean and warm color scheme to Stardust Gym’s website.
For the navbar, footer and background I used a warm off-white called #fafafa which I learned about from the Code Institute course create a clean effect without being too cold and bright. The warmth of this white is more modern and easy on the eyes. The light color brings the navigation links and footer to the attention to the site visitor to enhance UX.
I based the rest of the site’s color scheme on an old ad I found from the 80’s and used a color picker from ColorZilla to match tones. I wanted to maintain an analogue and modern feel so I used grey, black, red and yellow.
- Black: #1a0f17
- Yellow: rgb(255, 225, 0)
- Red: #d73b27
- Off-white: #fafafa
- With a strong 1980’s theme for the entire concept of Stardust Gym, I maintained the vintage aesthetic by using images from the 1980’s juxtaposed with a clean and modern design. To achieve the genuine 1980’s feel, there is a grainy film quality of the black and white images which are used behind text to achieve the clean and bright design similar to 1980’s advertisements. I found all of my images via Google image search looking specifically for 1980’s aerobics class, 1980’s weight workout.
- Initially I was looking for an 80’s neon sign-like font but found a cleaner font called Monoton from Google Fonts. I paired this with a very clean and classic Gill Sans for the body text. I wanted to maintain a crisp and modern appearance to the overall site and decided to work with just two fonts to achieve this.
-
CSS3 for site styling
-
Bootstrap for navbar and page layouts.
-
Google Fonts for the MONOTON font.
-
Gitpod for site development
-
Github for site deployment.
-
Techsini for mock-up mobile/tablet/desktop images
-
Balsamiq for wireframes.
-
W3C for HTML](https://validator.w3.org/)
- Navigation bar
- Responsive links opening in new tabs.
- Brand Logo
- Footer
- Responsive elements for Desktop, tablet and mobile.
- An intuitive sign-up form.
- Call to action buttons
- Downloadable pdf with class schedule
- Images
I would like to add a booking element for site visitors to book and pay for a class adhoc. I would also like to add some video elements and a blog with upcoming offers and workout tips, this page would be exclusive to members who are signed in with their username to the site. I would also like to improve the SEO and maintain a simple and efficient design and content.
- Development testing
- I intermittently used Google Dev Tools to double check coding for all responsive layouts.
- Validation testing to double check coding accuracy was done with:
- Sent friends and family link to site to check on their variety of devices including: * Apple iPhone 6, XS, 12 * Apple iPad 5th Generation * Samsung Galaxy * Lenovo Laptop * Apple MacBook Pro * Apple MacBook Air
- The contact page heading doesn’t adapt to a smaller screen. ‘Membership’ falls beyond the lines of its display box. FIXED
- List pricing on the page.
- Include a blog or a page for news for the gym.
- The red text boxes on the homepage are too transparent against the zebra print for the text to be readable. FIXED
- The schedule pdf is not loading. FIXED
- Commit changes more often and be more specific. IN PROGRESS
* The schedule page pdf is not opening. Solution: Remove the …/ to the href before assets.
* Navbar not collapsing cleanly for mobile and tablet settings. Redid the navbar with bootstrap.
* Contact page heading is not adjusting to fit for small mobile screens. Solution: Changed font style to Gill sans and changed font size.
To deploy this project with Github:
- On Github go to the Stardust Gym repository.
- Under the Stardust Gym repository name, click Settings.
- Scroll down the page to find the “GitHub Pages” section.
- Use the drop-down menu to select a folder for your publishing source and choose 'Master'.
- Refresh the page to confirm the site is published where you will see the notification highlighted in green.
To make a copy of the repository:
- Log into GitHub
- Click the ‘Settings’ option, the ‘Fork’ option is on top right of this page.
- Click on ‘Fork’ to make a copy of the original repository.
Photos were found via Google Image search:
[Hero Image] (https://flashbak.com/10-reasons-aerobics-in-the-1980s-was-crazy-awesome-76/) Contact Page Background Patterns Background Zebra Print
- The homepage was based on the Love Running project from the Code Institute, particularly the nav and footer.
- I would like to thank Jim_Lynx from the CodeAcademy Slack group for his support and help.
- I would like to thank the Code Institute for the knowledge shared.
- I would like to thank my mentor Gbenga for his input.