CAENES
Let's talk
Work · Case study

Qi Gong Barcelona

Breathe. Understand. Take the first step.

Web designDigital identityWordPress developmentHealth and wellbeing 2024
The qigong.barcelona home page on a laptop: a seated figure meditating at the end of a jetty on a mountain lake, headlined Qi Gong en Barcelona, with the same page on a phone
qigong.barcelona · 5 pages · 7 published prices

The brief

Cai Yutian started in the martial arts at eight years old, in Beijing, with master Zhao QuanFu. He now teaches Qi Gong in Barcelona and practises Tui Na, the therapeutic massage of traditional Chinese medicine, at a clinic in the Congrés neighbourhood. One teacher, one practice and no structure behind it.

The brief was his first website. Not a catalogue and not a shop: the page that convinces someone who has heard of Qi Gong and is not sure it is for them, explaining what it is, who teaches it and what it costs, and ending in an email or a phone call.

What we did

We started with the silence. Still water full screen, a pine green that is almost black as the only brand colour, and a serif even in the menu — something almost nobody does. Before saying anything, the site had to sound like what it sells: calm, and in no hurry.

We put the seven prices on the site. Four for Qi Gong and three for Tui Na, with what each one includes: weekly classes, a monthly guided meditation, one-to-one sessions and packs of five and of ten. Someone teaching on their own cannot afford for the price to be an awkward conversation over email.

We told the person, not the method. The portrait of the master, his story from Beijing and the real photographs of classes — correcting a student, a group in a community centre — do the work that no text about vital energy can do. That is where the site becomes credible.

Design, website and development from scratch. WordPress with our own child theme, Bellefair and Raleway self-hosted on the server instead of served from outside, and five pages: home, about, QiGong, Tui Na and contact, the last of these with a form and a map. The first four went up on 20 February 2024; Tui Na arrived in April, when the service started.

The design decision

Clarity brings calm.

Publishing the prices was the design decision, not a technical detail. In a sector where almost nobody shows them, putting the seven prices — packs included — up before anyone asks is what separates a teacher from a mystery. Everything else is built so that this moment does not jar: air, a single colour and no sales pitch.

Qi Gong Barcelona · Website and content

The website starts
in class.

Before describing a practice, show the person teaching it. Photographs from the sessions bring that relationship to the heart of the website.

Demonstration of a Qi Gong movement, with the teacher in the foreground and the group behind.
01 / The practice, in viewA demonstration during class. The photograph shows the movement, the room and the people following along.

The gesture opens.
The information follows.

The image provides context. The website then introduces the teacher, separates the options and keeps a direct way to ask a question.

The teacher explains a hand movement during a Qi Gong class.
02The explanation, up close. Class photographs accompany the introduction to the teacher.
A Qi Gong session with the teacher and several participants sitting on chairs.
03The group is part of the story. The selection also shows a seated session, with a different pace and a different use of the room.

From content to journey

Three questions.
A clear order.

The structure turns a first visit into a readable journey: meet, compare and get in touch.

01

Who teaches?

The person before the catalogue.

The Nosotros page brings together an introduction to Cai Yutian and a class photograph. The practice has a recognisable person and setting.

View the Nosotros page
A green header titled Nosotros and, below, a photograph of Cai Yutian correcting a student's posture in class beside the three blocks Nuestro Equipo, Nuestra Filosofía and Nuestro Enfoque
Introduction to the teacher in a complete screenshot from the project.
02

Which option fits?

The format, with what it includes.

The homepage separates Qi Gong and Tui Na options. Prices are accompanied by frequency, duration or format, giving the comparison substance beyond a number.

View the pricing presentation
Four columns each with a green line icon and a price — 38€/mes, 62€/mes, 30€/hora and 28€/hora — with what each includes and a Más información button; the Tarifas de Tui Na heading begins below
Prices as shown in the project screenshot: format, conditions and a link to contact.
03

How do I ask?

The next step, close at hand.

Email, phone and a form share the contact page. Calls for more information lead to that same place.

The project in numbers

8
the age the master was when he started, in Beijing
7
published prices, with no small print
6
benefits of Qi Gong explained one by one
5
pages in the whole site
2
disciplines: Qi Gong and Tui Na
1
brand colour across the whole site

How it's built

The type pairing is Bellefair, a high-contrast serif, for everything you look at, and Raleway for everything you read. Both are self-hosted with @font-face rather than loaded from Google Fonts: that is a technical decision, not the page builder’s default, and it shows in the site not depending on a third party to paint its own headline. The odd detail in the system is the menu, set at 24 px in the serif; body text runs in Raleway at 17/26.9.

There is exactly one colour: the pine green #02423F, with forty-two uses as text and ten as background. It is joined by a green rule at 14% opacity, a greyish green for text over dark backgrounds and a warm off-white. The buttons are full pills, 25 px radius, and the form fields almost square, 3 px: that contrast is the only expressive gesture in the whole site.

There is not much machinery underneath, and that is right. WordPress with our own child theme, content at 1,140 px with plenty of vertical air, a contact form with a privacy consent box and an embedded map with the address of the clinic. No online booking, no shop and no members’ area: five pages the client can maintain and that do not break on their own.

How it went

01The briefOne master, one practice and no website
02The decisionStart in silence and end with the prices on show
03The siteFebruary 2024: four pages and the whole system
04The extensionApril 2024: Tui Na, with its three prices

Gallery · the project in pictures (click to enlarge)

A white serif menu over a mountain-lake photograph, the meditating-figure logo on the left and the headline Qi Gong en Barcelona above the wooden jetty
A home page that opens with silence.
A pine-green header with the QiGong title in serif and, below, the text El Arte de Cultivar la Energía Vital with its list of six benefits of the practice
What Qi Gong is and what it is for, without detours.
Three phones in a row: the home page with the lake photograph, the Nosotros page with the teacher's portrait, and the contact page with map and form
The same calm on a pocket screen.
A green header titled Tui Na and the text explaining this traditional Chinese massage, with the three factors its effectiveness depends on set in bold
The second service, added two months after launch.
The Contacta con nosotros block with email and phone on the left above a Google map of Carrer del Ter, and on the right the name, email, phone and message form with its privacy checkbox
Where the class is and how to join, on one screen.
A phone showing the QiGong page: a pine-green header with the serif title and the text on the art of cultivating vital energy
Big type, short lines: readable standing up.
"Tradición Milenaria, Enseñanza Moderna"qigong.barcelona

Want a result like this for your project?

Next project

Poni Club Catalunya, four schools in one yard and four doors on the home page →