Психологическая практика

Контекст

Объяснить незнакомую тему без перегрузки и помочь посетителю узнать знакомые ситуации. Сайт связывает предложение психологической практики с отдельным цифровым продуктом в Telegram.

Задача

Сочетать эмоциональный образ с точным описанием следующего действия. Разбор должен восприниматься как инструмент самонаблюдения, без подмены консультации или медицинской диагностики.

Решения

1. Один основной вход

   Первый экран содержит короткое предложение, кнопку бесплатного разбора и пояснение формата. Посетитель заранее понимает, что продолжение откроется в Telegram.

2. Последовательность вместо набора блоков

   От знакомых ситуаций страница переходит к четырём условным паттернам, объясняет шаги разбора, знакомит с практикой и отвечает на вопросы.

3. Образ, который поддерживает тему

   Комната с открытым окном и клеткой, птица, перо и объёмные предметные иллюстрации создают единый визуальный рассказ. Четыре иконки помогают различать паттерны.

4. Одинаковый маршрут на разных экранах

   Повторяющиеся призывы ведут к одному сценарию. На узком экране сетка превращается в вертикальную последовательность, а крупная типографика масштабируется по ширине.

Что сделали

1. Структура и тексты

   Построили последовательность от основного предложения и знакомых ситуаций к четырём профилям, шагам квиза, знакомству с практикой и ответам на вопросы. Каждый блок готовит следующий шаг.

2. Визуальное направление

   Разработали спокойную редакционную подачу: крупные serif-заголовки, тёплые нейтральные поверхности и свободные интервалы. Актуальная версия дополняет систему комнатой, птицей и объёмными образами паттернов.

3. Адаптивная разработка

   Реализовали сайт на HTML, CSS и JavaScript. На узком экране содержание выстраивается вертикально, а основной призыв остаётся заметным; заголовки и интервалы адаптируются к ширине.

4. Связь с продуктом и запуск

   Настроили последовательные переходы в Telegram и запустили сайт. Он знакомит с предложением, а квиз, личные результаты, платежи и запись продолжаются в отдельно разработанном MindType.

Визуальная система

В текущей версии тёплый светлый фон соединён с тёмно-синим текстом и приглушённым терракотовым акцентом. Onest используется для чтения и интерфейса, Cormorant — для заголовков, Bodoni — для выразительной цифры в первом экране.

Основной текст

Onest 400 · 16 px / 1.6

Первый заголовок на desktop

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

Трекинг заголовка

−0.068em

Подзаголовок

Onest 400 · 18 px / 1.7; максимум 490 px

При viewport 1180 px

H1: 80.24 px; межстрочный интервал: 70.61 px

Заголовки разделов

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

Сценарии и материалы

Знакомая ситуация → объяснение четырёх паттернов → описание короткого опроса → переход в Telegram. Информация о консультациях остаётся самостоятельным маршрутом: проходить опрос перед обращением необязательно.

Продвижение

Провели SEO-оптимизацию, настроили личные кабинеты Яндекс Директ и Google Ads, запустили рекламу и продвижение сайта в поиске.

Что реализовано

Создан и запущен сайт психологической практики под ключ. Структура, тексты, визуальная система и адаптивная реализация работают вместе, а переходы в Telegram продолжают путь в MindType. Сайт и бот — две связанные части одного проекта, описанные в отдельных кейсах.

Инструменты и реализация

HTML · CSS · JavaScript без фреймворков · собственные CSS/JS-анимации · Telegram deep links