Interactive agency + Marketing agency = Two Colours

About the project

The trainers offer their clients individualized attention and functional training that focuses on building strength, endurance and overall body conditioning. Knowing about this company was crucial to our future work.

Take a look at our process for creating a website for personal trainers from the Forge of an Athletic Body.

Project authors
  • Łukasz
    Senior Graphic Designer
  • Mateusz
    UX designer
Prototype

Creating a prototype - a mock-up of a website for a personal trainer

The first phase of our process in the implementation of a website for personal trainers was the creation of a prototype, also known as a mockup of the site. This phase consisted of creating an initial visualization that was used to showcase the layout of the site even before the graphic design began.

We use tools such as Miro or Figma to make prototypes. These platforms allow us and our clients to visualize the full structure of the site (the home page with all the subpages) at an early stage, allowing us to effectively communicate and refine ideas. From the very beginning, we determine the placement of individual sections, texts, images, videos and CTA buttons.

In designing the site for trainers, we attached great importance to intuitiveness and ease of navigation. This makes it easy for users to find the information they need and learn more about the services offered. We have also planned various forms of presentation of services - from informative texts to video footage that helps to better understand what the functional training offered by the trainers is all about.

During the prototype-building stage, we place great importance on continuous contact with our clients - Once the prototype was ready, we held an online meeting to present our work and provide clear guidelines on how to make any comments from the client.

Website prototype for a personal trainer

Graphic design of the website

In addition to the website design, it was also in our hands to design the brand logo itself. The logo is one of the most important elements of a company's visual identity. When designing it for the trainers of the Forge of an Athletic Body, inspired by the brand name itself, we combined the elements of a sledgehammer, dumbbells and flames. Each of these elements is symbolic: the sledgehammer represents hard work and determination, the dumbbells symbolize training and effort, and the flames symbolize transformation and the resulting results. This symbolism was then transferred to the graphic design of the website itself to form a coherent whole with it.

During the graphic design of the website for the gym, we focused on creating a distinctive but harmonious atmosphere. We chose a dark setting that contrasts with bright shades of red and white. This color contrast is intended to convey the intensity and dynamics of the workouts that are offered at "The Forge" by personal trainers. The use of intense colors also helps draw users' attention to the most important elements of the site.

Home page hero section for personal trainers
Website design for personal trainers

We designed the CTA buttons on the homepage and subpages to be highly visible and highlighted in a distinctive color - they are meant to encourage a potential customer to take advantage of one-on-one coaching.

We adorned the layout with numerous icons, photos and flames in the form of gifs, which are an integral part of the corporate identity. For making graphic designs we use the previously mentioned Figma, which easily allows inserting client's comments, which makes it easier later to apply minor corrections (which can be many and which we always take into account to meet the client's expectations).

Implementation

Coding the website

Coding the site for trainers was a key part of finalizing the process of building it. We finalized this stage using Elementor's Page Builder, which is currently enjoying tremendous popularity and rapid growth. It is not only extremely intuitive to use, but also allows you to easily expand the site's capabilities on your own. Thanks to our flexible coding methodology in Elementor, future expansion of the site in any direction (without the need to engage additional external help) is at the client's fingertips.

It is important to provide the customer with the ability to easily edit and expand the site. This makes it easier to keep the site up to date, allowing it to respond quickly to changing business needs and user expectations. Thus, the client is not forced to use the services of an agency on a regular basis, giving him greater control and independence.

Training booking system

A key element that was implemented when coding the site is a simple and user-friendly training booking system, in this case we used the Bookly plugin. With a form integrated with Google Calendar, users can easily sign up for the service of their choice at their convenience. This solution not only simplifies the booking process, but also allows trainers to better organize their work.

Booking system for individual training on the website

The entire project can be viewed on our Behance.

Do you need a beautiful and professionally made website? Make an appointment with us for a free consultation!

    Let's talk and establish action plan!

    Krótki formularz Fill out the full brief

    Hidden
    Hidden
    Jak Ci się to podoba?