Este psicoterapeuta de Madrid buscaba captar pacientes online mediante una web que proyectara profesionalidad. El sitio debía eliminar la frialdad de las clínicas tradicionales para facilitar el primer paso del usuario.
Pablo no trata un dolor cualquiera: acompaña el duelo, el momento más vulnerable de una persona. Y ahí la web tenía un enemigo claro —el estereotipo de la consulta: azul corporativo, fotos de stock, formularios fríos. Todo eso levanta una barrera justo cuando hace falta lo contrario. El encargo real no era "una web de psicólogo", era conseguir que escribir el primer mensaje dejara de dar vértigo.
La apuesta: invertir el código del sector. Donde se espera autoridad médica, dar calidez editorial; donde se espera distancia clínica, el tono de una conversación. Cada decisión posterior —tipografía, color, espacio— se midió contra una sola pregunta: ¿esto acompaña o intimida?
- Duelo y vulnerabilidad
- Anti-folleto médico
- Calidez editorial
- Terapia en Madrid
- Escucha
Entender el duelo, no el sector
Antes de abrir el editor, mapeé el miedo real del visitante: la frialdad clínica. La decisión de fondo se tomó aquí —la web no debía parecer una consulta, sino el primer paso de una conversación.
- Dirección de arte
Calidez editorial, no folleto médico
Descarté el azul sanitario y el banco de imágenes. En su lugar: fondo papel, una serif literaria que humaniza y un verde salvia tomado de la naturaleza. La pantalla tenía que bajar la guardia, no proyectar autoridad.
- Sistema
Tokens, no pantallas sueltas
Construí un sistema de diseño —color, tipografía, espacio— en lugar de maquetar página a página. Newsreader para lo humano, Inter para lo funcional. Así cada sección respira igual y la coherencia es estructural, no decorativa.
- Build y lanzamiento
React + Vite, formulario y velocidad
Desarrollo con React + Vite, formulario con Resend para que el primer contacto fuera directo y sin fricción, detalles sutiles en GSAP y un SEO orientado a terapia de duelo en Madrid.
Desarrollé la interfaz con React + Vite e integré un formulario de contacto con Resend para facilitar el primer paso. Apliqué GSAP en detalles visuales sutiles y cuidé el rendimiento en móvil, donde llega la mayoría del tráfico.
El sistema nace de una sola decisión: que la web no se pareciera a una clínica. Paleta terrosa, una serif con peso literario y un único acento verde que calma. Cada token existe para reducir la distancia entre el visitante y el primer mensaje.
- Fondo papel, nunca blanco clínico: la pantalla descansa la vista.
- Serif para lo humano, sans para lo funcional: jerarquía por temperamento, no solo por tamaño.
- Un único acento salvia: calma y naturaleza, nada corporativo.
- Incluso el texto atenuado es cálido —arcilla, no gris.
El sistema no vive en un manual: vive en cada punto donde el visitante decide quedarse o irse. Estos son los lugares donde la calidez tenía que notarse.
- 01 · Home y hero
La primera pantalla abre con serif literaria sobre fondo papel —sin azul, sin stock—; en tres segundos comunica conversación, no consulta.
- 02 · Formulario de contacto
El punto más delicado: escribir el primer mensaje. Campos directos, sin fricción, integrados con Resend; el acento salvia guía sin presionar.
- 03 · Secciones de servicio
Cada servicio respira con el mismo espacio y la misma jerarquía por temperamento —serif para lo humano, sans para lo funcional.
- 04 · Móvil
Donde llega la mayoría del tráfico: la misma calidez y jerarquía, sin recortar el sistema para caber en la pantalla pequeña.
La web cumple su único trabajo: que escribir el primer mensaje deje de dar vértigo. Un formulario directo sin fricción y una presencia que se lee como una conversación, no como un folleto de consulta. El visitante llega buscando ayuda y se encuentra una puerta abierta, no una recepción.
Una web de psicología no tiene por qué parecerse a una consulta. A veces basta con que se parezca a una conversación.