ClickCease
Web development

We created a new website 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
  • Logo
  • 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.

Mailchimp offers a script that you can add to your site to use one of their pre-built forms. As the form is generated using JavaScript, it doesn’t load during the initial paint.

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.

Check it out here: https://www.nxtlvlfit.com.au/

What was created

Website

Applications used

  • Gatsby (web framework)
  • Tailwind (CSS framework)
  • Sanity (CMS)
  • Framer Motion (animation library)
  • Mailchimp integration (custom forms)
  • Google Maps integration (custom map)
  • Instagram integration (display Instagram feed directly in page)

Timeline

1 month