Заказать

Кейс: Медицинская визтка

Этап разработки проекта Медицинская визтка - Введение и концепция международного проекта

Введение и концепция международного проекта

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

Интерфейс проекта Медицинская визтка - Разработка UI/UX-дизайна и отстройка от конкурентов

Разработка UI/UX-дизайна и отстройка от конкурентов

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

Этап разработки проекта Медицинская визтка - Интерактивные анимации и оптимизация интерфейса

Интерактивные анимации и оптимизация интерфейса

Для повышения вовлеченности пользователей на страницах реализованы плавные микроанимации. Чтобы не перегружать систему тяжелыми библиотеками, появление элементов при скролле реализовано на чистом JavaScript с использованием Intersection Observer API (слушателей пересечения). Просмотр медицинских лицензий и сертификатов организован в модальных окнах через легковесный плагин Fancybox. Также предусмотрена функция скачивания пакета документов единым ZIP-архивом.

Интерфейс проекта Медицинская визтка - Форма связи и технический разбор реализации мультиязычности

Форма связи и технический разбор реализации мультиязычности

Форма обратной связи настроена на параллельную отправку заявок на email и в Telegram-канал. Особый интерес представляет реализация быстрой смены языков на фронтенде без перезагрузки страницы. Контент переключается мгновенно с помощью JS-скрипта, который управляет видимостью блоков. В рамках этого релиза неиспользуемая языковая версия скрывается через CSS-свойство display:none. Как инженер я открыто обсудил с заказчиком SEO-нюансы данного метода (Google индексирует скрытый текст, что может усложнить продвижение по широким информационным запросам). Однако, поскольку основной задачей стоял быстрый старт под точечный брендовый трафик, данная архитектура полностью устроила клиента. В следующем обновлении запланирован переход на динамическую подгрузку локализации через Fetch API.

Дмитрий Кашевский - Fullstack разработчик
Автор кейса

Дмитрий Кашевский

Fullstack-разработчик и технический специалист.