Consulta de psicología

Contexto

Explicar un tema poco conocido sin abrumar y ayudar a reconocer situaciones familiares. La web conecta la oferta de la consulta con un producto digital propio en Telegram.

El reto

Combinar una imagen emotiva con una descripción precisa del siguiente paso. La autoevaluación debe vivirse como una herramienta de autoobservación, nunca como sustituto de una consulta o de un diagnóstico médico.

Qué hicimos

1. Una entrada principal

   La primera pantalla tiene una propuesta breve, un botón para la autoevaluación gratuita y una aclaración del formato. Se sabe de antemano que el siguiente paso se abre en Telegram.

2. Una secuencia, no un montón de bloques

   De las situaciones familiares, la página pasa a cuatro patrones orientativos, explica los pasos de la autoevaluación, presenta la consulta y responde preguntas.

3. Imágenes que sostienen el tema

   Una habitación con una ventana abierta y una jaula, un pájaro, una pluma e ilustraciones de objetos en volumen cuentan una única historia visual. Cuatro iconos ayudan a distinguir los patrones.

4. El mismo recorrido en cualquier pantalla

   Las llamadas a la acción repetidas llevan a un solo recorrido. En pantallas estrechas la retícula se convierte en una secuencia vertical y la tipografía grande se adapta al ancho.

Qué desarrollamos

1. Estructura y textos

   Construimos una secuencia que va de la propuesta principal y las situaciones familiares a los cuatro perfiles, los pasos del test, la presentación de la consulta y las preguntas frecuentes. Cada bloque prepara el siguiente paso.

2. Dirección visual

   Desarrollamos una presentación editorial y serena: grandes títulos serif, superficies neutras y cálidas y espacios amplios. La versión actual suma la habitación, el pájaro e imágenes en volumen de los patrones.

3. Desarrollo responsive

   Desarrollamos la web en HTML, CSS y JavaScript. En pantallas estrechas el contenido se apila en vertical y la llamada a la acción principal sigue a la vista; títulos y espacios se adaptan al ancho.

4. Conexión con el producto y lanzamiento

   Configuramos pasos coherentes hacia Telegram y lanzamos la web. Ella presenta la oferta, mientras el test, los resultados personales, los pagos y las citas continúan en MindType, desarrollado por separado.

Sistema visual

La versión actual combina un fondo claro y cálido con texto azul oscuro y un acento terracota suave. Onest se usa para la lectura y la interfaz, Cormorant para los títulos y Bodoni para la cifra expresiva de la primera pantalla.

Texto principal

Onest 400 · 16 px / 1.6

Primer titular en escritorio

Cormorant 300 · clamp(66 px, 6.8vw, 106 px) / 0.88

Espaciado del titular

−0.068em

Subtítulo

Onest 400 · 18 px / 1,7; máximo 490 px

Con un viewport de 1180 px

H1: 80,24 px; interlineado: 70,61 px

Títulos de sección

Cormorant 300 · clamp(34 px, 4vw, 52 px) / 1.15

Recorridos y material

Una situación familiar → los cuatro patrones explicados → la descripción del test breve → el paso a Telegram. La información sobre consultas sigue siendo un recorrido propio: no hace falta hacer el test antes de escribir.

Promoción

Optimizamos la web para buscadores, configuramos las cuentas de Yandex Direct y Google Ads y pusimos en marcha la publicidad y la promoción en buscadores.

El resultado

Ya está online una web llave en mano para una consulta de psicología. Estructura, textos, sistema visual y desarrollo responsive funcionan juntos, y los enlaces a Telegram continúan el recorrido en MindType. La web y el bot son dos partes conectadas de un mismo proyecto, cada una descrita en su propio caso.

Herramientas y desarrollo

HTML · CSS · JavaScript sin frameworks · animaciones CSS/JS propias · enlaces profundos de Telegram