Qi Gong Barcelona
Respirar. Entender. Dar el primer paso.
El encargo
Cai Yutian empezó en las artes marciales a los ocho años, en Pekín, con el maestro Zhao QuanFu. Ahora enseña Qi Gong en Barcelona y hace Tui Na, el masaje terapéutico de la medicina tradicional china, en una clínica del barrio del Congrés. Un profesor, una práctica y ninguna estructura detrás.
El encargo era su primera web. No un catálogo ni una tienda: la página que convence a alguien que ha oído hablar del Qi Gong y no sabe si es para él, que explique qué es, quién lo enseña y qué cuesta, y que acabe en un correo o una llamada.
Qué hicimos
Empezamos por el silencio. Agua quieta a pantalla completa, un verde pino casi negro como único color de marca y una serif incluso en el menú —algo que casi nadie hace—. Antes de contar nada, la web tenía que sonar a lo que vende: calma y ninguna prisa.
Pusimos las siete tarifas en la web. Cuatro de Qi Gong y tres de Tui Na, con lo que entra en cada una: clases semanales, meditación guiada mensual, sesiones individuales y packs de cinco y de diez. Quien enseña solo no puede permitirse que el precio sea una conversación incómoda por correo.
Contamos a la persona, no el método. El retrato del maestro, su historia desde Pekín y las fotos reales de clase —corrigiendo a una alumna, un grupo en un centro cívico— hacen el trabajo que ningún texto sobre la energía vital puede hacer. La web se vuelve creíble ahí.
Diseño, web y programación desde cero. WordPress con tema hijo propio, Bellefair y Raleway autoalojadas en el servidor en vez de servidas desde fuera, y cinco páginas: inicio, nosotros, QiGong, Tui Na y contacto, esta última con formulario y mapa. Las cuatro primeras se levantaron el 20 de febrero de 2024; la de Tui Na llegó en abril, cuando arrancó el servicio.
La calma también está en la estructura.
Publicar los precios fue la decisión de diseño, no una ficha técnica. En un sector donde casi nadie los enseña, poner las siete tarifas —packs incluidos— antes de que nadie pregunte es lo que separa a un profesor de un misterio. Todo lo demás está construido para que ese momento no chirríe: aire, un solo color y ningún reclamo.
Qi Gong Barcelona · Web y contenido
La web empieza
en clase.
Antes de hablar de una práctica, mostrar a la persona que la enseña. Las fotografías de las sesiones llevan esa relación al centro de la web.
El gesto abre.
La información acompaña.
La imagen da contexto. Después, la web presenta al profesor, separa las modalidades y mantiene una vía directa para preguntar.
Del contenido al recorrido
Tres preguntas.
Un orden claro.
La estructura convierte una primera visita en un recorrido comprensible: conocer, comparar y contactar.
¿Quién enseña?
Persona antes que catálogo.
La página Nosotros reúne la presentación de Cai Yutian y una fotografía de clase. La práctica tiene una persona y un contexto reconocibles.
Ver la página Nosotros
¿Qué opción busco?
La modalidad, con lo que incluye.
La portada diferencia las opciones de Qi Gong y Tui Na. Las tarifas se acompañan de frecuencia, duración o formato; la comparación tiene contenido, además de una cifra.
Ver cómo se presentan las tarifas
¿Cómo pregunto?
El siguiente paso, a mano.
Correo, teléfono y formulario conviven en la página de contacto. Las llamadas a más información llevan a ese mismo lugar.
El proyecto en cifras
Cómo está hecho
La pareja tipográfica es Bellefair, una serif de contraste alto, para todo lo que se mira, y Raleway para todo lo que se lee. Las dos van autoalojadas con @font-face, no cargadas desde Google Fonts: es una decisión técnica, no el valor por defecto del constructor, y se nota en que la web no depende de un tercero para pintar su titular. El detalle raro del sistema es el menú, a 24 px en serif; el cuerpo va en Raleway a 17/26,9.
De color hay uno solo: el verde pino #02423F, con cuarenta y dos usos como texto y diez como fondo. Lo acompañan un filete verde al 14 % de opacidad, un verde grisáceo para el texto sobre fondo oscuro y un blanco roto cálido. Los botones son píldora completa, 25 px de radio, y los campos del formulario casi rectos, 3 px: ese contraste es el único gesto expresivo de toda la web.
Debajo hay poca máquina y está bien así. WordPress con tema hijo propio, contenido a 1.140 px con mucho aire vertical, formulario de contacto con consentimiento de privacidad y un mapa incrustado con la dirección de la clínica. Sin reservas en línea, sin tienda y sin área privada: cinco páginas que el cliente puede mantener y que no se rompen solas.
Cómo fue
Galería · el proyecto en imágenes (clica para ampliar)
"Tradición Milenaria, Enseñanza Moderna"qigong.barcelona
¿Quieres un resultado así para tu proyecto?
