Как спроектировать сайт психолога, которому доверяют: разбор нашего концепта

Чем сайт психолога отличается от обычного лендинга

Типичный лендинг продаёт: громкое предложение, таймер, «осталось три места». На сайте психолога это работает против: давление вызывает ровно то чувство, от которого человек пришёл избавиться. Поэтому мы меняем акценты:

• вместо предложения — человек: фото, имя, подход;
• вместо перечня методов — запросы, описанные словами клиента: «ссоры повторяются по одному сценарию», «тревога не отпускает даже в спокойные моменты»;
• вместо одного настойчивого призыва — несколько мягких точек входа в разных местах страницы;
• вместо обещаний результата — то, что можно проверить: образование, формат работы, как пройдёт первая встреча.

Структура: 10 блоков и зачем каждый

Порядок блоков повторяет вопросы, которые человек задаёт себе по ходу чтения: кто это → с чем работает → как работает → почему ему можно доверять → что делать дальше.

1. Первый экран. Портрет, имя и специализация, фраза «Найди твёрдую опору для себя» и одна кнопка — «Консультация». За несколько секунд понятно, к кому вы пришли.
2. С чем работаю. Направления работы раскрывающимся списком. Он не вываливает всё сразу — человек открывает то, что откликается.
3. Обо мне. Квалификация и несколько фраз о том, как проходит работа: бережно, без осуждения, в диалоге.
4. Услуги. Карточки по запросам: отношения, тревога, депрессия, пищевое поведение и другие. О них — ниже.
5. Призыв записаться. «Вы дочитали до этого места — значит, что-то в вас уже готово к переменам». Это не продажа, а признание того, что человек уже сделал шаг.
6. Образование. Конкретные программы и учебные заведения, а не «постоянно учусь». Тому, кто выбирает психолога, важно проверить квалификацию.
7. Почему я. Что человек получит на консультации: уважение, отсутствие осуждения, конфиденциальность.
8. Вопросы. Как проходит первая встреча, сколько понадобится сессий, чего точно не будет на терапии. Эти ответы снимают тревогу перед первым шагом.
9. Связь. Форма заявки с выбором темы и удобного способа связи — телефон, мессенджер или почта.
10. Подвал. Навигация и соцсети.

Записаться можно из нескольких мест: с первого экрана, из мобильного меню, из призыва после услуг, с оборота любой карточки услуги и из формы в конце. Человек, который решился на середине страницы, не должен искать кнопку.

Визуальный язык: тёплый, а не «медицинский»

Палитра. Молочный фон (#F9F4F0), тёмно-коричневый текст (#351F06) вместо чёрного, приглушённый шалфейный зелёный (#81A363) для кнопок и акцентов, терракотовые (#B07252, #C37553) и песочные (#B5A18A, #C4B292) оттенки. Ни больничного синего, ни стерильного белого.

Шрифты. Manrope — спокойный гротеск для основного текста. Playfair Display в курсиве — для отдельных слов в заголовках: «Найди твёрдую опору для себя», «готово к переменам». Курсив работает как интонация, будто эти слова произносят мягче.

Формы и предметы. Скруглённые карточки, круглые портреты, медленно вращающийся бейдж — без острых углов. На предметных фото — эвкалипт, книги, сухоцвет в керамической вазе: ощущение кабинета, где спокойно.

Масштабирование. Размеры шрифтов и отступы плавно меняются вместе с шириной экрана — от 375 до 1680 пикселей, — а не прыгают на нескольких фиксированных брейкпоинтах.

Это не единственно верный путь. Для Центра поведенческой психологии Павла Хорошутина мы сделали противоположное: тёмную графитовую палитру и строгую подачу. Центр строит позиционирование на научном подходе, и «уютный» сайт ему бы навредил. Стиль сайта психолога определяет не ниша, а то, как работает сам специалист.

Карточки услуг: записаться там, где возник вопрос

На лицевой стороне карточки — фотография, название запроса и короткий подзаголовок. На обороте — описание ситуации словами клиента и форма записи. Например:

Тревога не отпускает даже в спокойные моменты: мысли крутятся по кругу, сложно уснуть, тело постоянно в напряжении. Разберёмся, откуда она берётся, и освоим способы возвращать себе опору и спокойствие.

Человек узнаёт себя в описании и может записаться сразу, не прокручивая страницу до формы. На телефоне карточки идут по одной, на экранах шире 640 пикселей — сеткой 2×2 в слайдере.

Анимация, которая не давит

Анимация на сайте психолога должна успокаивать, а не развлекать.

• Блоки появляются мягко и один раз: вся секция, затем заголовок и текст, укладываясь примерно в секунду. Ничего не прыгает при повторной прокрутке.
• Заголовок первого экрана выезжает построчно — как будто фразу произносят вслух.
• Фотографии чуть смещаются вслед за курсором. Только при управлении мышью: на телефонах и планшетах эффект отключён.
• Если в системе включена настройка «уменьшить движение», анимации отключаются. Для людей с тревожностью или вестибулярными нарушениями это не мелочь, а условие комфорта.
• В списке направлений при наведении соседние пункты приглушаются с небольшой задержкой — чтобы быстрый проход курсором не вызывал мерцания.

Мобильная версия и Safari

Макеты мы начинали с телефона, а уже потом расширяли до планшета и десктопа. На узких экранах убраны декоративные элементы — круги и вращающийся бейдж, — а картинки уменьшены, чтобы не отодвигать текст.

Отдельная история — Safari на iPhone. Карточки услуг переворачиваются, и в движке Safari невидимая обратная сторона перехватывала нажатия, а под карточкой появлялся пустой пробел. В Chrome этих ошибок нет, поэтому вёрстку мы проверяли отдельно в движке Safari на эмуляции iPhone.

Чтобы сайт находили

• Разметка Schema.org. Специалист описан как Person — с должностями и образованием, практика — как ProfessionalService с районом работы «Москва и онлайн». Так поисковикам проще понять, кто это и где принимает.
• Превью для мессенджеров. Отдельная картинка 1200×630, кадрированная по лицу: ссылка в Telegram выглядит как визитка.
• Статический сайт на Astro. Страница собирается заранее, на сервере нет CMS и базы данных.
• Аккуратные картинки. У каждой есть осмысленное описание и размеры. Фото ниже первого экрана загружаются по мере прокрутки, а главное — в приоритете.

Что подготовить психологу до заказа сайта

1. Фотографии. Портрет для первого экрана и два-три живых кадра. Одна профессиональная съёмка лучше, чем фото разных лет.
2. Образование. Дипломы, переподготовки, программы — с названиями учебных заведений.
3. Подход. Три-пять направлений работы своими словами.
4. Запросы клиентов. С чем к вам приходят — описанное так, как говорит клиент, а не специалист.
5. Формат и стоимость. Онлайн или очно, длительность сессии, есть ли бесплатное знакомство.
6. Ответы на частые вопросы. Как проходит первая встреча, сколько нужно сессий, чего точно не будет.
7. Одни и те же цифры по всему сайту. Стаж и опыт должны совпадать во всех блоках. Мы сами поймали в концепте такое расхождение при вычитке: если на одной странице «7 лет» и «10 лет», читатель начинает сомневаться во всём остальном.
8. Согласие на обработку персональных данных и политика конфиденциальности. Форма записи собирает имя и телефон, а по закону о персональных данных (152-ФЗ) без этого нельзя.
9. Куда приходят заявки. На почту, в Telegram или в CRM — решить заранее. В демо форма не отправляет данные; на рабочем сайте подключаем отправку туда, где вам удобно отвечать.

Сколько это заняло

Концепт занял около пяти рабочих дней: анализ и структура — 6 часов, макеты в Figma — 2 дня, вёрстка — 2 дня, анимации — 4 часа. В реальном проекте добавится время на ваши тексты, фотографии и согласования.