Полный цикл разработки сайта для Dentaplan — от айдентики до бэкенда
Этот проект мы выполнили полностью под ключ: провели UX/UI-анализ, разработали новую айдентику, спроектировали десктопную и мобильную версии сайта, разработали фронтенд и бэкенд. При этом сохранили большой объём медицинского контента и сделали его частью нового визуального решения. Отдельно проработали сценарии для пациентов — например, первичную анкету, которую можно заполнить до приёма, чтобы врач заранее получил необходимую информацию.
Смотреть проекты 
dentaplan.ru О клиенте
Dentaplan — частная стоматологическая клиника премиального сегмента в Санкт-Петербурге. Здесь используют современные технологии и материалы, специалисты помогают решать стоматологические задачи любой сложности.
Задача
Главные задачи проекта — провести полный редизайн и разработать сайт.
Как и у многих медицинских центров с большим количеством услуг, одной из главных проблем Dentaplan стала работа с большим объёмом информации. На старом сайте услуги терялись среди длинных текстов, интерфейс не помогал посетителям принять решение о записи, а недостаточная SEO-оптимизация мешала ресурсу занимать высокие позиции в поисковой выдаче.
Дополнительной проблемой была неадаптивная вёрстка — сайт некорректно отображался на разных экранах. Новый дизайн должен был объединить строгий премиальный минимализм с яркостью, лёгкостью и ощущением технологичности. При этом требовалось отказаться от синих оттенков, характерных для стоматологической ниши.
Отдельным требованием стал перенос всего контента со старого сайта с последующей адаптацией под SEO. Нужно было сохранить большой объём текстовой информации, сделать её лёгкой для восприятия, внедрить семантику по всем ключевым запросам и вывести сайт в топ поисковой выдачи.
Технологии
- Astro
- GSAP
- Zod
- Wagtail
Команда
-
Генеральный продюсер
Игорь Фроловский
-
Арт-директор
Артемий Скуратов
-
Дизайнер интерфейсов (UI/UX)
Виктория Федянина
-
Графический дизайнер
Катерина Таняева
-
Фронтенд-разработчик
Александр Ларькин
-
Фронтенд-разработчик
Алексей Виноградов
-
Q/A-инженер
Юлия Захарова
UX/UI-анализ конкурентов
Мы отобрали 20 наиболее популярных сайтов стоматологических клиник Санкт-Петербурга и России. Проанализировали их трафик, показатели производительности и надёжность по методологии E-E-A-T (Опыт, Экспертность, Авторитетность, Надёжность). Это концепция Google, которая помогает оценивать качество и достоверность контента и определять, насколько страница заслуживает доверия и высокой позиции в выдаче.
Также изучили структуру и визуальные решения сайтов конкурентов.
Анализ показал общую тенденцию: сайты стоматологических клиник во многом похожи друг на друга. Они используют схожее содержание и преимущественно классическую медицинскую палитру с голубыми и зелёными оттенками, реже — фиолетовыми и лавандовыми.
Прототипы
На основе анализа разработали структуру сайта, определили содержание каждого блока и согласовали его с клиентом. После этого подготовили прототипы страниц.
Разработка айдентики
Параллельно предложили клиенту обновить айдентику.
Название и логотип уже были зарегистрированы, поэтому мы не могли их менять. Кроме того, заказчик хотел отказаться от цветовой гаммы, привычной для стоматологических клиник.
Чтобы сохранить ощущение премиальности и при этом уйти от типичного визуального языка ниши, выбрали тёмный графитовый цвет в качестве основы и добавили нежный ванильный жёлтый. Такая палитра выделяет Dentaplan среди других стоматологий Санкт-Петербурга, а жёлтый оттенок ассоциируется со светом, улыбкой и здоровьем.
Созвучие названия «Дентаплан» с «дельтапланом» подсказало идею знака, в котором объединили образы самолёта, улыбки и галочки. На его основе выстроили графический язык бренда: мягкие линии напоминают след от самолёта и задают визуалу ощущение движения. Этот приём помогает сделать фирменный стиль узнаваемым даже без логотипа.
По запросу клиента добавили объёмные детали в форме улыбки — они продолжают мотив мягких линий, заложенный в графике.
Сделали модульную сетку фирменного стиля универсальной, чтобы айдентика одинаково работала на разных носителях — от сайта и баннеров до печатных материалов и соцсетей.
Всю работу этого этапа выполнили за месяц и согласовали с минимальными правками. Затем перенесли визуальную систему на сайт и промо-материалы.
Чего добились таким подходом:
- Узнаваемость без логотипа. Линии и формы легко считываются сами по себе, а необычная для стоматологии цветовая гамма помогает бренду выделяться.
- Больше доверия к клинике. Спокойный визуальный образ снижает тревогу перед обращением к стоматологу и делает коммуникацию с брендом более располагающей.
- Быстрее согласовывали решения. Единый визуальный код помог сократить количество правок при работе над материалами.
Вёрстка
Главная сложность в сайтах с большим объёмом контента — разместить текст так, чтобы он не перегружал интерфейс и оставался удобным для восприятия.
Чтобы с большим количеством информации было проще работать, использовали два типа контейнеров: узкие — для текста, широкие — для визуального контента и акцентов. Их чередование помогает разделять информацию на смысловые части и сохранять внимание пользователя.
Социальные доказательства
Добавили на сайт отзывы с независимых геосервисов и агрегаторов, а также материалы самой клиники — статьи, сертификаты и лицензии. Это помогает пациентам оценить клинику и специалистов ещё до визита и повышает доверие к Dentaplan.
Контент, который снижает сомнения перед визитом в клинику
Добавили на сайт информацию, которая помогает пациенту определиться с врачом и решиться на визит:
- на главной странице рассказали о клинике и её ценностях;
- на страницах услуг подробно описали процедуры;
- в профилях врачей разместили видеовизитки, чтобы пациент мог заранее познакомиться со специалистом, понять, будет ли с ним комфортно, — и меньше переживал перед лечением.
Анкета для первичного приёма
Чтобы врачу было проще подготовиться к консультации, на сайте сделали пятиэтапную анкету, которую пациент заполняет до приёма.
Организация работы на проекте
Поделили проект на MVP и расширенную версию сайта с дополнительными функциями. Такой подход позволил быстрее запустить основную версию сайта и отдельно запланировать, как будет развиваться проект.
Дизайн и разработку вели параллельно. Готовые страницы последовательно передавали в разработку, пока дизайнеры продолжали работать над следующими. Дальше страницы проходили тестирование, чтобы интерфейс соответствовал макетам и одинаково работал на разных устройствах.
Каждую неделю синхронизировались с заказчиком, чтобы быстро согласовывать изменения, проверять промежуточные результаты и оперативно вносить правки.
Разработка
На этапе разработки важно было сохранить задуманный визуальный стиль и реализовать сложные сценарии взаимодействия с пользователем. Какие технологии использовали:
Фронтенд
Astro — для быстрой и гибкой вёрстки сайта.
GSAP — для плавных анимаций и интерактивных элементов.
Zod — для проверки заполнения форм во время их прохождения.
Бэкенд
Wagtail — CMS, которую дополнили собственными модулями под задачи клиники. Например, разработали переиспользуемые блоки и гибкие шаблоны, чтобы контент-менеджеры могли самостоятельно собирать страницы из готовых компонентов. Добавили фильтры для быстрого поиска по большому объёму контента. Настроили понятную структуру управления SEO-параметрами в самой админке.
Автоматизация и интеграции:
- реализовали систему уведомлений о новых заявках, отзывах и других событиях через Telegram-бота и электронную почту;
- настроили автоматический еженедельный сбор отзывов из «Яндекса» с последующей синхронизацией и отображением на сайте;
- также автоматизировали генерацию Sitemap и фидов для Яндекса, чтобы данные о клинике, врачах и услугах автоматически обновлялись в поиске.
В разработке уделили особое внимание формам — на сайте их много, и каждая требует своей логики.
Для них мы продумали разные состояния и сценарии заполнения. Чтобы система могла реагировать на ответы пользователя, показывать дополнительные поля и сразу проверять введённые данные.
Например, анкету первичного приёма разбили на пять этапов. В зависимости от ответов пациента появляются дополнительные поля, а заполненная информация автоматически передаются на бэкенд и на их основе формируется документ для клиники.
Результаты
Dentaplan получил новый сайт и обновлённый визуальный образ. Сайт уже запущен и работает, а новая айдентика используется во всех коммуникациях клиники.
Итоги проекта:
Клиника стала выглядеть как бренд премиального сегмента и выделяться среди конкурентов. Новый визуальный образ сделал Dentaplan заметнее среди других стоматологических клиник и придал дружелюбный характер, которого раньше не хватало.
Большой объём контента естественно вписался в дизайн сайта. Для клиники важно подробно рассказывать об услугах, врачах и процедурах, поэтому текста здесь много. Мы органично интегрировали его в визуальную систему сайта и сделали удобным для чтения. Даже на страницах с большим количеством информации легко ориентироваться и быстро находить нужное.
Пациенту проще решиться на первый визит. На сайте можно узнать всё, что обычно хочется проверить перед записью: подробно изучить услуги и врачей, посмотреть видеовизитки специалистов, отзывы и сертификаты клиники, фотографии помещений. Это помогает заранее ответить на вопросы, которые могут возникнуть перед приёмом, и чувствовать себя увереннее при выборе клиники и врача.
Часть работы с пациентами перенесли в онлайн. Перед приёмом пациент заполняет анкету, а её данные сразу передаются нужному врачу. Врач может заранее ознакомиться с информацией и подготовиться к консультации, поэтому на самом приёме меньше времени уходит на сбор анамнеза.
Сайт получает органический трафик и клиентов из поиска. Сохранили весь контент со старого сайта — большой объём информации об услугах, врачах и клинике — и перенесли его в новую структуру. При этом адаптировали страницы под SEO, чтобы человек, который ищет конкретную услугу или информацию о лечении, сразу попадал на нужную страницу и мог разобраться в своём вопросе.
