Территория лап | Сайт ветклиники, дизайн-система и полиграфия

Для ветеринарной клиники «Территория лап» в Санкт-Петербурге я разработал сайт, дизайн-систему и печатные материалы. В проект вошли страницы услуг и цен, отдельный лендинг АСИТ, раздел полезной информации, поиск, административная панель, анимация первого экрана и подготовка визиток к печати. Позже пришлось заняться и восстановлением сайта после падения хостинга Beget.

Большая часть работы осталась за пределами главной страницы. Я спарсил архив Telegram, с помощью ИИ разобрал и отсортировал публикации, оформил 105 статей и сделал для них отдельные обложки. Для медицинских фотографий и видео разработал маски чувствительного контента. Ниже рассказываю обо всём проекте, от подготовки логотипа до устройства редактора и работы с резервными копиями.

Задача и моя роль

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

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

С логотипом история отдельная: сам логотип придумал не я. Я перерисовал предоставленный эскиз, доработал его векторные версии и подготовил файлы для разных носителей, в том числе для печати. Остальную дизайн-систему разработал сам.

Перерисовка логотипа и версии для разных носителей

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

Я подготовил полную и упрощённую версии знака, вертикальные и горизонтальные компоновки с названием, а также знак без текста. В упрощённом варианте убрал мелкие детали, сохранив узнаваемые силуэты животных. Отдельно поправил белые области: собака и светлые детали получили непрозрачную заливку, чтобы не исчезать и не менять цвет на другом фоне.

Для работы с макетами сохранил редактируемые AI, для сайта и цифровых материалов подготовил SVG и PNG с прозрачным фоном. Векторные версии проверил в Illustrator. В комплект вошёл бренд-лист с вариантами логотипа, цветами и шрифтами. Такой набор позволяет использовать знак в интерфейсе, на визитке и в других материалах без повторной перерисовки.

Дизайн-система: цвет, шрифты и компоненты

В основу оформления я положил природные оттенки: оливковый, шалфейный, песочный и тёплый светлый фон. Хотелось спокойной подачи, которая подходит клинике и не утомляет на длинных страницах с медицинскими материалами.

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

Для заголовков выбрал Golos Text, для основного текста и подписей Source Sans 3. В системе задал размеры и насыщенность шрифта, интервалы, отступы, скругления, тени и поведение элементов при наведении и фокусе. Цвета и размеры вынесены в CSS-переменные, которые используются на сайте.

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

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

Главная страница и навигация

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

Дальше идут блок о помощи питомцам, информация о клинике, АСИТ, услуги, подготовка к приёму, частые вопросы, отзывы, запись и выбранные статьи. Для разных задач использовал разные формы подачи: короткие карточки для направлений работы, более крупные блоки для знакомства с клиникой, раскрывающиеся ответы для вопросов.

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

Видео с собакой и кошкой на первом экране

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

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

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

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

Услуги, иконки и прайс

Для услуг сделал отдельный каталог. Каждое направление получило название, описание и иконку в стиле сайта. В основной подборке представлены приёмы, УЗИ, вакцинация, стационар, стоматология, кастрация и стерилизация. В актуальной версии также добавлен выезд ветеринара на дом.

Иконки построены на округлых формах, плотных линиях и двух тонах оливкового. Они должны считываться и в карточке на главной, и рядом с подробным описанием. После проверки доработал отдельные изображения, в том числе иконки УЗИ и стационара. В стационаре изображена кошка.

Для каждой услуги предусмотрена возможность включить собственную страницу с текстом и SEO-полями. Если отдельная страница не нужна, переход ведёт к соответствующему блоку каталога. Так посетитель не попадает на пустой экран, а структуру можно развивать постепенно.

Прайс вынесен в отдельный раздел. В нём есть группы, позиции, стоимость, значения «от», пояснения, порядок и переключатели видимости. Актуальное наполнение включает 44 позиции в семи группах, с учётом добавленного выезда на дом. Для стационара указана стоимость за сутки, для процедур сохранены необходимые уточнения к цене.

Отдельно проработал мобильное отображение: длинные названия переносятся, цена не распадается на неудобные фрагменты, разделы легко просматривать последовательно. Перед прайсом есть переходы к группам, после него блок записи. В пояснении указано, что на сайте представлен не весь перечень услуг и стоимость можно уточнить в клинике. Данные прайса редактируются в административной панели.

Отдельная страница АСИТ

Для АСИТ сделал самостоятельный лендинг в общей дизайн-системе. Здесь больше поясняющего контента, чем в обычной карточке услуги: вступление, описание подхода, этапы, подготовка, ответы на вопросы, изображения, видео и обращение в клинику.

Страница собрана из управляемых секций. Их содержание и порядок меняются через админку. Для видео предусмотрена обложка с кнопкой воспроизведения. Следы лап появляются по мере прокрутки и связывают части страницы.

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

Как я перенёс статьи из Telegram

У врача уже был большой архив публикаций в Telegram. Я написал парсер, прошёл доступную публичную историю канала и собрал 3 161 публикацию в отдельный реестр. Сохранил исходные тексты, даты, связи между сообщениями и вложениями. Закрытые и удалённые сообщения в этот результат не входят.

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

Из 126 исходных публикаций получилось 105 статей: 21 дополнение вошло в состав основных материалов. Статьи распределены по девяти разделам: кожа, шерсть и уши; аллергия и АСИТ; профилактика и вакцинация; питание и пищеварение; уход и поведение; приём и диагностика; безопасность и тревожные симптомы; здоровье зубов; заболевания и лечение.

ИИ помогал разбирать объём и готовить редактуру, но результат требовал проверки. Я просматривал подборку, уточнял структуру, убирал неподходящие материалы и проверял соответствие изображений текстам. Чужие репосты не превращались в авторские статьи врача.

Редактура и оформление публикаций

Telegram-пост редко можно без изменений перенести на сайт. Я убрал служебные элементы, лишние смайлики, хештеги, устаревшие контакты и отсылки, которые понятны только внутри ленты. Разбил тексты на абзацы, добавил подзаголовки и списки, подготовил самостоятельные заголовки, анонсы и понятные адреса страниц.

Для статей заполнил Title и Description, назначил разделы и подготовил подписи к медиа. При редактуре убирал двусмысленные обещания и универсальные схемы, которые без контекста могли читаться как готовое назначение лечения. Медицинское содержание при этом оставалось основанным на исходных материалах врача.

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

Фотографии, видео и очистка архива

На этапе сбора скачал 247 изображений и 55 видео. Затем проверил, что действительно относится к выбранным статьям. Личные фотографии, документы с возможными персональными данными, рекламные скриншоты и лишние материалы не попали в публичную подборку.

Отдельно просмотрел видео. После проверки убрал 14 роликов с рекламой, брендированными витринами и обзорами конкретных продуктов из десяти статей. Сами статьи сохранил: тексты оставались полноценными без этих вложений. После отбора в публикациях осталось 185 изображений и 40 видео.

Недоступные в публичной версии Telegram вложения отмечены в рабочем реестре. Я не подменял их случайными файлами и убрал отсылки к роликам, которые посетитель не сможет посмотреть. Фотографии подготовил для сайта в WebP, а видео разместил локально в MP4, без зависимости от встроенного плеера Telegram.

Более ста обложек для статей

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

В серии использовал общий светлый фон, фирменный логотип и Source Sans 3 в лёгком начертании. При этом менял породы, естественные окрасы, положения животных и композицию. Если порода была важна для самого текста, сохранял её на обложке.

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

Готовые обложки сохранены в WebP размером 1600 × 1000 пикселей. Большинство файлов занимают несколько десятков килобайт. Для каждой заполнен alt, проверены назначение в статье и изображение для социальных превью. Предыдущие версии и исходники сохранены отдельно, чтобы можно было вернуться к конкретному варианту.

Маски чувствительного контента

В ветеринарных статьях встречаются фотографии поражений кожи, процедур и операций. Такие кадры полезны по теме, но не каждый посетитель готов увидеть их сразу. Для них я разработал отдельный механизм предупреждений, который работает и с фотографиями, и с видео.

Изображение сначала размыто и закрыто плашкой «Чувствительный контент». Под ней пояснение: «Медицинские изображения могут вызвать дискомфорт» и кнопка «Смотреть фото». У видео соответствующая подпись и кнопка «Смотреть видео».

У закрытого видео до подтверждения не подключаются ни источник, ни постер. Поэтому медицинский кадр не появляется на месте обложки и воспроизведение не начинается случайно. Посетитель открывает конкретный файл; соседние вложения остаются закрытыми. Подтверждение действует до перезагрузки страницы и не записывается в cookies или localStorage. Без JavaScript чувствительное содержимое остаётся скрытым.

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

После разработки я проверил 105 статей, их фотографии, видео и обложки. В результате предупреждения получили 94 файла в 40 статьях: 75 фотографий и 19 видео. Нейтральные обложки оставил открытыми. Проверял не только наличие плашки, но и независимое раскрытие файлов, управление с клавиатуры и отображение на узком экране.

Редактор, публикации и административная панель

Сайт разработан на Laravel, для админки использован Filament. Содержание хранится отдельно от шаблонов, поэтому обычные правки не требуют вмешательства в код. На сервере используется MySQL, для локальной работы и проверки есть копии в SQLite.

В админке управляются главная страница, услуги, прайс, лендинг АСИТ, отзывы, статьи, категории, контакты, карта, документы и общие настройки. Для блоков предусмотрены поля с текстами и медиа, порядок и переключатели отображения. Для статей доступны черновики, предпросмотр, дата публикации, обложка, SEO и выбор для главной.

Оформление редактора согласовал с опубликованной страницей: отступы между заголовками, абзацами, списками и изображениями используют общие правила. При работе с длинным материалом это помогает видеть его структуру ещё до публикации. Администратор может перейти из открытой статьи прямо в её редактор.

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

Поиск по содержимому сайта

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

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

Запись, контакты и управление интеграциями

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

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

Для контактов подготовил карту с отдельными точками входа и парковки. Часы работы, адрес, телефон и публичная почта берутся из общих настроек. На страницах есть прямые способы связи, чтобы посетитель мог обратиться в клинику независимо от состояния формы.

Адаптивность, анимация и небольшие доработки

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

Адаптивность проверял на разных ширинах и при смене ориентации экрана. Исправлял минимальные размеры колонок, переносы длинного текста и сжатие кнопок. На отдельном этапе проверка 32 страниц в Chromium и WebKit на восьми последовательных размерах дала 512 измерений без горизонтального переполнения. Это браузерные проверки мобильных размеров, а не тестирование на 512 устройствах.

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

SEO и структура данных

Для страниц и статей предусмотрены уникальные заголовки и описания, понятные адреса, canonical и изображения для социальных превью. Настроены XML-карта сайта, robots.txt, обработка отсутствующих страниц и перенаправления при изменении адресов материалов.

В структурированных данных используются WebPage, VeterinaryCare и Article. Главная, контакты и статьи связаны с общей сущностью клиники. Информация берётся из настроек, чтобы название и контакты не расходились между видимой страницей и разметкой. Для технического режима и закрытых страниц предусмотрены отдельные правила индексации.

Визитки и подготовка к печати

Визитку разработал в той же системе, что и сайт: фирменный знак, оливковый и песочный, мягкая линия фона и дорожка лап. На лицевой стороне размещены название, адрес, часы работы, сайт и телефон. На обороте два QR-кода для связи с клиникой через социальные площадки.

Размер готовой визитки 90 × 50 мм. Для типографии подготовил вылеты по 2 мм с каждой стороны, безопасные поля и CMYK-версию с профилем Coated FOGRA39. Основной исходник сохранён в Illustrator с двумя монтажными областями и редактируемым текстом.

Печатный PDF полностью векторный, текст в нём переведён в кривые. Дополнительно сохранён PDF с редактируемым текстом, файлы шрифтов и инструкция по использованию комплекта. Векторными остались и логотип, и декор, и QR-коды. После сохранения проверил повторное открытие файла, вылеты и отсутствие случайных растровых или связанных объектов.

Отдельно подготовил PNG и PDF для просмотра, чтобы макет можно было оценить без Illustrator. Это разные задачи: удобный файл для согласования и подготовленный файл для типографии.

Материалы для карт и справочников

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

Для Яндекс Бизнеса, 2ГИС и Google подготовлены единые данные и зафиксированы этапы работы с карточками. Заполнение и отправка сведений учитывались отдельно от проверки площадкой. Такая организация помогает поддерживать одинаковые названия услуг и контакты, не теряя из виду, что уже принято сервисом, а что ещё требует действий.

Восстановление после падения хостинга Beget

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

В таком проекте важно сохранить не только код. База связывает статьи с категориями и вложениями, хранит цены, настройки и состояние публикаций. Файлы отдельно содержат изображения, обложки и ролики. Восстановление этих частей вместе позволило вернуть подготовленные материалы и продолжить работу с сайтом.

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

Что получилось

В проекте сошлись разработка, дизайн и большая работа с содержимым. Я подготовил версии логотипа по чужому эскизу, разработал остальную дизайн-систему, интерфейс и печатные материалы. Собрал сайт с редактируемыми разделами, прайсом, поиском и отдельным лендингом АСИТ. Перенёс и оформил 105 статей, сделал для них обложки, разобрал медиаархив и добавил предупреждения для чувствительных кадров.

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

Сайт создан для друзей семьи.