Create and design your Fitness club website

Embarking on a collaboration with a newly established fitness club in Bangkok, our team undertook the challenge of creating a website that embodies the club's ethos of movement and breath. The result is a visually dynamic online platform that seamlessly integrates animations to convey the essence of the fitness experience.

Ensuring accessibility for a diverse audience, the website is fully responsive across various devices and is presented in both English and Thai languages. Join us as we explore the nuances of this project, where design innovation meets functionality to create a digital space reflective of a dynamic fitness community. 

Team

1 Project Manager
1 Web Designer
1 Web Developer

Methodology

Waterfall

Tools

InVision
Adobe Photoshop
TeamWork

Technologies

PHP, WordPress, HTML5, CSS

Timeframe

12 weeks

Fresh animations for a dynamic website

For a fitness club website, especially one who’s name relates to oxygen, we felt like incorporating impressive animations to give a lively and energetic feeling to the website, following the already colourful design using a flashy color palette. All animations were created with a mix of CSS transitions and transformations and Javascript code.

The homepage of the website is made of slides that are actioned with the mouse wheel, each launching some animations on its elements, banner, title, button.

Oxygen bubbles effect: when opening the website you are greeted with oxygen bubbles coming up from the bottom of the screen, they are randomly generated with Javascript and drawn with CSS.
Circle animation inner menu: the main elements of the menu appear in a circular animations to attract the visitor’s eye and convince him to
Parallax effect on banners
Popping round titles
Popping buttons and popups
Drawer animated menu: the menu slides in from the right on click on the “hamburger” menu, a technique usually used for mobile design but that is more frequently applied on the desktop versions also nowadays.