PhysioLife: rehabilitación con nombre propio.
Enero de 2025 · en línea
El sitio web de un centro de fisioterapia de Oruro: 14 especialidades con página propia, una tienda de productos y un blog de salud con 36 artículos.
Tecnología
Angular 21- Bootstrap 5
- AOS
Firebase Hosting- llms.txt
- SSR
- Swiper
- Markdown
- SEO local
Servicios
El proyecto
Cliente e idea
PhysioLife es un centro de rehabilitación con medicina integral en Oruro. Nos pidió un sitio propio que explique cada tratamiento, muestre sus productos y aparezca cuando alguien en la ciudad busca ayuda para su dolor.
Reto y objetivos
El centro ofrece catorce especialidades muy distintas, de la fisioterapia deportiva a la fisiosexología y el manejo del estrés. Había que ordenarlas para que cada paciente encuentre la suya en segundos, generar confianza antes de la primera cita y competir en Google con contenido propio de Oruro.
Solución y resultado
Diseñamos un sitio rápido, con renderizado en servidor y modo claro y oscuro, donde cada especialidad tiene su página: qué trata, cuánto dura la sesión, cuántas suelen hacer falta y un botón directo a WhatsApp para agendar.
Sumamos una tienda de 30 productos con filtros por categoría y un blog de 36 artículos que responde las dudas más frecuentes de los pacientes.
Cada especialidad, su página
Qué trata, cómo es la sesión y la cita a un toque.
Contenido que responde
Un blog en lenguaje claro para las dudas de cada paciente.
Del celular a la cita
Pensado primero para el teléfono, con WhatsApp siempre a mano.
Motion
PhysioLife en movimiento
Una pieza de motion hecha en HTML con HyperFrames: la marca, la promesa, las cifras y el sitio, en diez segundos. Se reproduce en vivo, sin archivo de video.
Resumen del proyecto
Funciones principales
El recorrido es el de un paciente: llega desde Google o una red social, entiende qué especialidad le corresponde, confía al ver al equipo y reserva su cita sin salir del celular.
Una portada que invita a moverse
«Vuelve a moverte como antes» resume la promesa del centro. Debajo van las especialidades, el equipo, los testimonios y dos caminos claros: agendar la cita o conocer el centro.
Catorce especialidades, una por página
Todas las especialidades comparten la misma estructura: para quién es, cómo es el tratamiento, cuánto dura la sesión y cuántas se recomiendan. Quien lee una ya sabe leer todas.
Una tienda para seguir el tratamiento en casa
Treinta productos con filtros por categoría, fichas con reseñas y consulta directa por WhatsApp, para que el paciente encuentre lo que le recomendaron en consulta.
Un blog que responde dudas
Artículos sobre dolor de espalda, rehabilitación, ejercicios en casa o fisioterapia deportiva, escritos en lenguaje claro y ordenados por temas con buscador. Cada artículo lleva al paciente a la especialidad que le corresponde y a su cita.
Desarrollo
Metodología
Construimos el sitio en Angular con renderizado en servidor, para que cada página cargue rápido y Google la lea completa. Los artículos del blog viven en archivos Markdown fáciles de editar, el sitio se publica en Firebase Hosting y un archivo llms.txt le explica a los buscadores con IA qué hace el centro, para que lo citen cuando alguien pregunta.
Proceso
Mapa del sitio
Cuatro puertas desde la portada y, detrás de cada una, páginas con la misma anatomía. Las fichas punteadas son plantillas: se diseñaron una vez y hoy sirven a 14 especialidades, 30 productos y 36 artículos.
- Servicios14 especialidades
- Índice de especialidades
- Fisioterapia deportiva
- Traumatológica
- Neurológica
- Pediátrica
- Geriátrica
- + 9 especialidades más
- Ficha de especialidadplantilla × 14
- Tienda30 productos
- Catálogo con filtros
- Sérums
- Protectores solares
- Cremas faciales
- Limpiadores y mascarillas
- Cuidado íntimo y suplementos
- Ficha de productoplantilla × 30
- Blog36 artículos
- Índice con buscador
- Dolor de espalda y columna
- Rehabilitación física
- Fisioterapia deportiva
- Tercera edad
- Ejercicios en casa
- Artículoplantilla × 36
- Citaen cada página
- Agendar por WhatsApp
- Contacto
Proceso
Primero el celular
La mayoría de los pacientes llega desde el teléfono, así que cada página se pensó primero a 390 píxeles: botones grandes, textos cortos y la cita a un toque.
Interfaz
Claro y oscuro
El sitio respeta la preferencia de cada persona: modo claro para leer de día y modo oscuro para la noche, con el mismo magenta en los dos. Arrastra para comparar las mismas páginas.
Proceso
Páginas completas
Cada página es larga a propósito: el paciente baja leyendo y encuentra, en orden, la explicación, los beneficios, el equipo y la cita. Así se ven de principio a fin.
Marca
Tipografía
Una sans contemporánea y cálida, de trazo abierto, que se lee bien en textos largos de salud y mantiene carácter en los títulos grandes. Se carga con cuatro pesos para no penalizar la velocidad.
Instrument Sans
RegularMediumSemiBoldBold
Marca
Colores
El magenta marca todo lo que invita a actuar: agendar, comprar, leer más. El morado viene del loto del logo, y el negro cálido da al modo oscuro un aire de clínica tranquila.
Conclusión
PhysioLife tiene hoy una vitrina propia que explica, muestra y posiciona: cada especialidad con su página, cada duda frecuente con su artículo y cada paciente a un toque de su cita.
Casos
