Что было на старом сайте
Прежний сайт работал на MODX. В нём было много полезного: сведения о специалистах, описания услуг, фотографии работ и документы клиники. Всё это нужно было сохранить при переносе.
Оформление складывалось из разных по характеру частей. В шапке — объёмный синий логотип, ниже — баннеры с крупными надписями, затем плотные блоки технологий и сотрудников. Названия некоторых технологий переносились на три-четыре строки. У каждой части был свой способ привлечь внимание, а общего порядка на странице не хватало.
Спокойное оформление с объёмными деталями
Для новой версии выбрал светлую серо-зелёную палитру, крупные заголовки и мягкий объём у кнопок и карточек. Полупрозрачная шапка лежит поверх первого экрана, навигация собрана в одну линию. Новый знак объединяет контур зуба и цифру 2 — его можно прочитать и в небольшой шапке телефона.
На первом экране есть отдельные сюжеты о клинике и направлениях лечения. Их переключает сам посетитель: изображение не уезжает, пока человек читает. Кнопки записи и услуг остаются на своих местах. Для телефона подготовлены отдельные композиции изображений, чтобы лицо, текст и действия помещались на узком экране.
Иллюстрации для услуг и предложений подготовил под новое оформление. Фотографии самой клиники и результаты лечения вынесены в отдельные галереи: по ним можно рассмотреть помещения и работы врачей.
За главной — 44 страницы
Главная даёт несколько понятных точек входа: услуги, предложения, врачи и цены. Подробности остаются на своих страницах. У врача можно прочитать о квалификации, у услуги — о лечении, в разделе технологий — о применяемых методах. Внутренние страницы используют те же шрифты, цвета, кнопки и навигацию, что и главная.
Всего в опубликованной карте сайта 44 страницы: главная, услуги, специалисты, технологии, разделы прайса, сведения о клинике и документы. Это число проверено по работающему сайту; кабинет и страницы ошибок в него не входят.
При переносе сохранил существующие адреса основных разделов и настроил переходы для изменённых. Тексты, ссылки и медиа сверял с архивом, чтобы за новым оформлением не потерялись материалы прежнего сайта.
Прайс, в котором виден состав услуги
В стоматологии цена часто относится к набору процедур. Поэтому перед подробной таблицей я разместил раскрывающиеся блоки: посетитель видит стоимость услуги, а внутри — её состав. Отдельные позиции и их цены показаны с пояснением, как они соотносятся с комплексом.
Полный прайс разделён по направлениям. На телефоне длинные названия и суммы перестраиваются под ширину экрана. Цены на страницах услуг и в общем прайсе берутся из одного источника — их не приходится исправлять по отдельности в разных местах сайта.
Клиника обновляет цены через свой кабинет
Для сотрудников сделал закрытый кабинет с загрузкой Excel-файла из медицинской системы. Перед публикацией можно проверить изменения: какие позиции появились, какие суммы поменялись и нет ли ошибок в файле. Публикация обновляет общие данные, которыми пользуется сайт.
История версий сохраняется, к предыдущему прайсу можно вернуться. У позиций есть постоянные идентификаторы: изменение названия или порядка строк не должно разрывать связь цены со страницей услуги. Это та часть разработки, которую не видно на первом экране, но с которой клиника будет работать после запуска.
Запись и работа на телефоне
Форма записи доступна с главной и внутренних страниц. В ней есть проверка полей, маска российского номера и отдельное согласие на обработку данных. Обращение сначала сохраняется на сервере; для отправки уведомлений предусмотрены повторные попытки. Это позволяет не связывать сохранность заявки с одной попыткой отправить письмо.
На телефоне меню открывается отдельной панелью, карточки можно листать пальцем, фотографии — увеличивать. Раскрывающиеся разделы открываются плавно. Если в системе отключено лишнее движение, интерфейс учитывает эту настройку.
Техническая основа и стоимость
Интерфейс собран на React, анимация — на Motion. Сборку выполняет esbuild; страницы заранее получают HTML с содержанием, а интерактивные элементы подключаются при загрузке. Серверная часть написана на Python, цены, версии прайса и заявки хранятся в SQLite.
Новая версия работает на прежнем домене Sevstom. Для страниц подготовлены заголовки и описания, канонические адреса, карта сайта и микроразметка.
Стоимость разработки — 180 000 ₽.
Для вашего проекта
Редизайн сайта
Обновлю оформление, структуру и мобильную версию вашего сайта. Помогу сохранить нужные материалы и подготовить переход на новую версию.
Что входит в редизайн вашего сайта
