EN
.svg)
Our primary goal for the Compound Gym website was to create a bold, modern, and user-centric experience that reflected its strong, robust, and dynamic identity—already established by its current branding and mirroring Rotterdam’s energetically straightforward culture. Our design approach was minimalist, free of unnecessary elements, and focused solely on delivering essential information.
We chose bold typography to convey the strength, energy, and power embodied in the gym’s mission to build confidence and resilience. To complement this, we used a vibrant shade of green for headings and call-to-action elements, symbolizing vitality, energy, and growth—qualities often associated with the health and fitness industries. For the overall background, we opted for solid black to enhance contrast, add sophistication, and create a striking visual impact that underscores the focus and determination of gym-goers.
With a strong emphasis on user experience, the design was crafted to cater to gym members, offering intuitive navigation, bold visuals, and clear calls to action. This ensures users can quickly find what they need, whether booking a session or learning more about services. The site’s modern style positions Compound Gym as an innovative brand appealing to a more connected audience that values both aesthetics and functionality. By adopting a distinctive and bold design, the site stands out in a saturated market of generic layouts, ensuring Compound Gym leaves a lasting impression while embodying energy and motivation.
Once the design was finalized and approved by the client, we moved on to the implementation phase using Webflow, a powerful web development tool that enabled us to meet the site’s requirements and exceed user expectations.
The first step was familiarizing ourselves with the platform. We began by signing up for Webflow and exploring its features through a free trial plan before upgrading to a premium plan to access additional resources. After gaining a solid understanding of the platform's basics, we planned our approach to the design implementation. We chose a blank template to ensure complete flexibility, allowing us to build the site structure and design elements from the ground up in alignment with the approved design.
All development work was carried out in the Webflow Designer interface, enabling us to build, style, and test the site with precision. We began by configuring essential project settings, including the site name, favicon, and critical meta details for SEO and branding. Next, we outlined the site structure, creating key pages such as Home, About, Classes, Membership Plans, and Contact, ensuring clear navigation and a seamless user journey.
Using Webflow’s drag-and-drop functionality, we structured each page by incorporating containers, sections, grids, and div blocks to create a well-organized layout. Key design elements included:
The Style Panel allowed us to create a cohesive aesthetic aligned with the Compound Gym brand. We used a vibrant, on-brand color palette, modern sans-serif typography for a sleek and accessible look, and responsive spacing and alignment to ensure a balanced layout across all devices. Additionally, we implemented reusable custom classes for buttons, headers, and cards, maintaining consistency while streamlining the design process.
We applied hover effects to navigation links and buttons, enhancing user engagement and adding a dynamic touch to the browsing experience. Scroll-based animations further elevated the site’s appeal, particularly in the Services and Membership sections, where elements smoothly faded in and out as users scrolled through the page. To complete the experience, we implemented seamless page transitions, ensuring polished and professional navigation between different sections of the site.
Using Webflow’s responsive design tools, we optimized the site for mobile devices by adjusting layouts, text sizes, and images to ensure flawless performance on tablets and smartphones. To improve navigation on smaller screens, we introduced a "hamburger" menu, simplifying usability while maintaining accessibility.
The site underwent rigorous testing across multiple devices and browsers to identify and resolve any inconsistencies. Complementing the design, we updated graphical elements to align with the Compound Gym brand. This included prominently placing the logo in the header to reinforce brand recognition, incorporating custom icons for the Classes and Services sections, and using high-quality images that showcased the gym’s facilities and members in action. These elements fostered an authentic and engaging connection with visitors.
The website delivered a high-performance, visually engaging online platform for Compound Gym, achieving several key outcomes. Its clean and intuitive layout allowed visitors to easily navigate and find all the information they needed. The inclusion of interactive features and a responsive design encouraged users to further explore the gym’s offerings and connect through the integrated contact form. Additionally, the modern and energetic design successfully captured and reflected the dynamic identity of Compound Gym, resonating with its brand philosophy.
Built with scalability in mind, the site is also ready to accommodate future growth, including the addition of features such as blog posts, e-commerce for merchandise, or member portals.
This new website positioned Compound Gym as a premier fitness destination in Rotterdam. With its modern design, seamless usability, and strategic functionalities, the platform not only meets the gym’s current needs but also paves the way for future growth and engagement. The success of this project has led to another initiative for Compound: a new website for its coworking space. Scheduled for launch in early 2025, this upcoming site will showcase even more unique features and distinctive elements of this bold brand.
