Punto de partida
El reto
Cristina Sacristán es psicóloga sanitaria. Acompaña a personas online, en Granada y en Jaén, con un enfoque integrador informado en trauma, y su lema lo resume muy bien: terapia cercana dondequiera que estés.
Quien busca terapia no llega con ganas de leer una web. Llega cansado, con dudas y muchas veces sin saber ponerle nombre a lo que le pasa. Así que esta web no podía parecer un folleto: tenía que dar calma desde el primer segundo y hacer que escribir a Cristina costara lo menos posible.
Y tenía que hacerlo con su voz. Sin prometer lo que no se puede prometer, sin presumir de títulos y cuidando cada palabra, porque aquí una frase mal puesta puede alejar justo a quien más lo necesita.
Qué se ha hecho
De la idea a la web, paso a paso
- Conceptualización Entender quién es Cristina, cómo trabaja y qué necesita sentir alguien que busca terapia.
- Propuestas de diseño Varias versiones, de la más editorial a la más cercana, hasta dar con la suya.
- Desarrollo Catorce páginas hechas a medida, con sus ilustraciones, sus animaciones y su formulario.
- Revisiones con Cristina Hemos repasado cada página juntas: qué decir, qué no prometer y hasta el tamaño de las letras.
- Publicación Es lo siguiente: abrir la web al público y dejarla lista para que la encuentren.
La solución
Cómo lo resolví
Su verde, azul noche y beiges cálidos. Y un hilo, el de su logo, que recorre toda la web.
01 · La portada
Cuando todo se enreda, se puede desenredar
La portada no vende nada: te recibe. Un campo de amapolas, una frase que cambia cada pocos segundos y dos botones, «Empieza hoy» y «Cómo empezamos», para quien quiere dar el paso y para quien todavía está mirando.
Abajo, discreto, su 5,0 en Google. Lo justo para que sepas que estás en buenas manos.
02 · El hilo
Del nudo al lugar donde quieres estar
El logo de Cristina es un hilo que empieza enredado y termina en un círculo. Esa idea se convirtió en el corazón de la web.
Al bajar por la portada, el hilo se dibuja solo y cuenta los tres primeros pasos: me escribes, primera sesión y tu proceso. Así, empezar terapia se entiende de un vistazo y da menos vértigo.
03 · Las áreas
Pincha en el cuadro que más se parezca a tu historia
Las áreas de trabajo van en tarjetas con una frase sencilla, sin tecnicismos. Al pasar por encima cambian de color y se levantan un poco, y cada una lleva a su propia página.
La última es mi favorita: «No sé lo que me pasa». Porque hay quien no sabe por dónde empezar, y esa persona también tiene aquí su sitio, con una página entera para ella. Y justo debajo, con la misma honestidad, «¿Con qué no puedo ayudarte?».
04 · Cada área
Frases que te hacen pensar «esto me pasa a mí»
Cada área tiene su página, y todas empiezan igual: con lo que la persona se dice a sí misma. «Mi cabeza no se apaga nunca». «Me preocupo por todo, aunque no haya motivo».
Las frases se encienden una a una al bajar, como si alguien las pensara contigo. Es el momento en el que dejas de sentirte solo con lo que te pasa.
05 · Cómo se nota
Lo que te pasa, explicado sin tecnicismos
Cada página ordena cómo se nota en tres columnas, distintas en cada área. En Ansiedad son el cuerpo, la cabeza y lo que haces.
Y cierra con una frase que quita presión: no hace falta reconocerse en todo. Con que algo te suene, merece la pena hablarlo.
06 · Lo que cambia
El nudo, otra vez, en cada cambio
Cuando la web explica qué cambia con la terapia, vuelve el hilo: a la izquierda, lo que hoy pesa; a la derecha, lo que puedes conseguir; y en medio, un pequeño nudo que se desenreda.
Es un detalle pequeño, pero hace que todo se sienta de una pieza.
07 · Para probar hoy
Una ayuda antes de pedirte nada
Cada área trae un ejercicio sencillo para hacer en ese momento. En Ansiedad es el 5-4-3-2-1: cinco cosas que ves, cuatro que tocas, tres sonidos, dos olores y un sabor.
Antes de escribirle a nadie, ya te llevas algo útil. Y eso, en un momento difícil, genera mucha más confianza que cualquier promesa.
08 · Granada y Jaén
Una granada y una rama de olivo
La terapia presencial podría haber sido una página de lo más sosa. Pero aquí cada ciudad tiene su símbolo: una granada abierta para Granada y una rama de olivo para Jaén.
Al llegar, el trazo se dibuja solo, línea a línea, y después entra el color, como si alguien lo estuviera pintando mientras miras. Y no pesan casi nada, porque no son imágenes: están hechas con código.
09 · El formulario
Cuatro pasos breves, sin prisa
Escribir a una psicóloga por primera vez cuesta. Por eso el formulario no parece un formulario: son cuatro preguntas cortas, una barra que avanza y botones grandes para tocar con el pulgar. Y «Aún no lo sé» es una respuesta válida.
Además, se adapta a ti: si eliges presencial te pregunta la ciudad y, si vienes de la página de Ansiedad, el tema ya viene marcado. Al terminar te da las gracias por tu nombre, te enseña un resumen y te ofrece mandarlo también por WhatsApp, ya escrito.
10 · Lo delicado
Hasta el último detalle, con cuidado
Si marcas «Algo que viví», aparece una nota: «No necesitas explicar nada aquí. Lo hablaremos solo cuando y como tú quieras». Son dos frases, pero pueden ser la diferencia entre seguir o cerrar la página.
Y junto al formulario hay un recuadro para quien esté pasando por un momento muy difícil, con el 024 y el 112. Una web de psicología también tiene que pensar en eso.
11 · El menú en el móvil
Toda la web, en una sola pantalla
El menú del móvil es muy completo y aun así no abruma. Se abre en un círculo que crece desde el botón y reúne toda la web en una sola pantalla, sin tener que bajar.
Online y Presencial van en cajitas con icono, las áreas en píldoras y lo demás en letra grande. Abajo, «Empieza hoy» y WhatsApp, siempre a mano. Y fuera del menú, las tarjetas de las áreas se convierten en una lista cómoda para el pulgar.
12 · Talleres
Charlas a medida, con su propio camino
Cristina también da talleres y charlas a medida para empresas, asociaciones e institutos. Cada tipo de grupo tiene su pestaña con ideas para inspirarse, y la página tiene su propio formulario.
Así, quien organiza algo para su equipo no acaba en el formulario de terapia, y ella recibe desde el principio lo que necesita saber.
13 · Desde el móvil
La misma calma, en la palma de la mano
Buscar ayuda es algo muy íntimo, y muchas veces se hace desde el móvil, en el sofá o en la cama. Por eso aquí no se recorta nada.
El hilo se dibuja igual, los pasos se leen de arriba abajo y el botón de WhatsApp está siempre cerca, por si es más fácil escribir que seguir leyendo.
Funcionalidades
Qué tiene la web por dentro
Catorce páginas a medida
Inicio, siete áreas, online, presencial, talleres, recién graduados, sobre mí y «No sé lo que me pasa».
Reseñas en cada página
Las opiniones de quienes ya han ido, tres distintas en cada área, y «Leer más» en las largas.
Preguntas de cada página
Las dudas de quien llega ahí, no una lista genérica repetida.
Un formulario que se adapta
Cada área trae marcado su tema, y Online y Presencial, su forma de terapia.
WhatsApp siempre cerca
Un botón flotante en toda la web y, al terminar el formulario, el mensaje ya escrito.
Ilustraciones con código
La granada, el olivo, el hilo y los anillos pesan poquísimo y se ven nítidos en cualquier pantalla.
Anillos en cada cabecera
Las páginas interiores abren con unas líneas que se dibujan solas, distintas en cada una.
Menos movimiento, si lo prefieres
Si tu dispositivo pide reducir las animaciones, la web le hace caso.
Una página por tema
Cada área tiene su título, su descripción y sus preguntas, para que Google entienda de qué habla.
Tecnología
Con qué está hecha
Está hecha a medida, sin plantillas. El diseño, las animaciones y el formulario son código propio, así que cada detalle está donde tiene que estar.
Las ilustraciones y el hilo son gráficos SVG animados con CSS, no imágenes pesadas, y todo respeta a quien prefiere menos movimiento.
La web está en su recta final, así que todavía no la puedes visitar. Las capturas y los vídeos son de la última versión, y aún puede cambiar algún detalle. Los datos del vídeo del formulario son inventados. En cuanto esté publicada, aquí tendrás el enlace.
Servicios
Servicios de este proyecto
La web de Cristina está a punto de publicarse. Esto es lo que hay detrás, por si te sirve para lo tuyo.
«Soy psicóloga o terapeuta»
Webs para psicólogos
Una web que transmite calma y ayuda a dar el paso de escribirte.
Presupuesto a tu medida
«Lo que necesito no viene hecho»
Desarrollo web a medida
Lo que tu proyecto necesita y ningún plugin resuelve del todo, hecho para ti.
Presupuesto a tu medida
«Quiero que me encuentren en Google»
Posicionamiento SEO y GEO
Para que te encuentren en Google y en los asistentes de IA.
Presupuesto a tu medida
¿Eres psicóloga o terapeuta, o tienes un proyecto que necesita este mimo? Cuéntamelo y te digo cómo lo haría.
