Website Development for nXtLvL Functional Movement Centre
Before the nXtLvL Functional Movement Centre opened, they wanted a landing page so that people who were interested in joining could be notified.
We designed and built the landing page with an attention-grabbing 3D effect. As you scroll down the page, the logo appears to be behind the gymnast.
To achieve this effect, we broke the page up into multiple layers.
Background of the gym
Gymnast and bar
‘L’ from the ‘nXtLvL’ fitness logo
Text: ‘Functional Movement Centre’ and remainder of the copy for the site
We had to make sure that the dimensions of the gymnast and the background had exactly the same dimensions so that the design would be mobile responsive.
As all the different layers were stacked on top of each other, we had to take careful consideration to not overlay things in the wrong places.
There is also a limited amount of customisation you can do — ultimately it wasn’t custom enough for the premium design we were going for.
Instead, we integrated directly with the Mailchimp API letting us design the form exactly how we wanted it to look (check out the custom radio-buttons) and post it directly to Mailchimp when the form submits.
When it came time to build out the actual website, we had to keep up the high level of design and polish. We had a very dark colour palette, so the normal Google Maps embed wasn’t going to work for us.
Thankfully they have an API that lets us customise it, so we made it monochrome to match. And finally — we added a lot of micro-interactions to the whole site (such as transitioning the colours on focus or hover and animating modals and menus).
This extra level of polish makes all the difference in the world to the user experience.
Gatsby (web framework)
Tailwind (CSS framework)
Framer Motion (animation library)
Mailchimp integration (custom forms)
Google Maps integration (custom map)
Instagram integration (display Instagram feed directly in page)