- Categories: Visual identity - Web
- Activity area: combat sports and fitness club
- Role: web developer, graphic designer and web designer
- Context: side project
- Date: 2022
- Technologies and software: ADOBE PHOTOSHOP - ILLUSTRATOR - ADOBE XD - HTML - CSS - BOOTSTRAP - JAVASCRIPT - JQUERY - PHP - MYSQL - GIT - GITHUB
About Workhiitout-Fit
The website Workhiitout-Fit is a personal project (demonstration site), on the theme of combat sports and fitness.
I had the idea for this project during one of my training sessions at the gym. Combat sports professionals came to do bodybuilding and then went back to train in their clubs. Their exercises are very effective in targeting certain parts of the body. And their rigor and determination motivated many members.
Did you know? 5.96 million French people subscribed to sports halls.
(Source: Deloitte).
The challenge
My goal is to create a user-oriented website, which motivates people to take action (fill out the form, subscribe and join). A site that meets visitors' expectations (security, functionality, design, accessibility, adaptability).
Technical challenges
Animations
Integration of advanced animations (Loader, sliders, call-to-action buttons, vector animations, buttons, hover animation, interactive map, etc.).
Form
Registration forms, thank you page, confirmation email, with promotional offer.
Layout
Creation and integration of layout sections.
The solution
Creation of a landing page with a pre-opening offer:
Work carried out:
- Study, strategic diagnosis, SWOT analysis and benchmarking.
- Design of the logo and graphic charter.
- Photo editing and photomontage.
- Creation of visuals.
- Wireframe, Web design (UX and UI), content design (text and visuals) and image selection.
- Development of the site and features: registration form, online call link, testimonials carousel, Google map, thank you page, confirmation email and automatic sending of the pre-opening offer and site compatible with all media (responsive).
- Testing and putting online.
- Maintenance and updates.
Colors
I created a color palette based on black and orange, in order to create a professional and dynamic image. The tones and nuances correspond to the image that the WORKHIITOUT-FIT club wishes to convey.
Creativity, vitality
ambition and optimism
Seriousness, rigor
and modernity
Wisdom
and purity
Fonts
For the creation of the logo, I used the Unica one font. And for the website design, I used Montserrat for the titles and body text.
Unica One Regular is a modern and elegant font. Montserrat is classic, timeless, it inspires sympathy with its round letters, while setting a serious tone.
Logo design
The WORKHIITOUT-FIT logo is elegant, dynamic and memorable. I emphasized the word "HIIT", high intensity interval training, by writing it in orange, to accentuate its intense and powerful side. Additionally, the design of the letters "i" resembles dumbbells.
Webdesign and development
I created a user-oriented landing page, fluid for visitors and potential customers. Within the landing page, I established a clear path, which guides visitors step by step, from discovering the commercial offer to filling out the form. The website contains 5 sections:
- Home
- About
- Services
- Testimonials
- Telephone
When the visitor completes the form and clicks on the "SEND" button, he is redirected to a thank you page and receives the confirmation email containing the pre-opening offer in detail.