• Корпоративный сайт
  • UX/UI-дизайн
  • Разработка

Medi-Art.
Забота начинается со знакомства

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

Обсудить проект
Мобильная версия Medi-Art
Клиент
Medi-Art
Сфера
Медицинский центр
Работа ABC
Разработка под ключ
Статус
Готовится к запуску

Задача проекта

Понятный маршрут к первому обращению

Обновить образ Medi-Art в интернете и сделать знакомство с клиникой последовательным: помочь посетителю найти направление, изучить специалистов и выбрать способ связи.

Мы связали знакомство с брендом с конкретными действиями посетителя. У информационных разделов и пользовательских сервисов — свои места в общей структуре.

ABC Design выполнила дизайн и разработку. В кейсе показываем визуальную систему и ключевые сценарии проекта.

Три задачи — три понятных маршрута

Начать со своей цели и перейти к нужному разделу.

Найти направление

Найти направление

Перейти от своей задачи к профилям клиники и программам.

Профили · Программы
Выбрать специалиста

Выбрать специалиста

Познакомиться с командой и изучить страницу врача.

Врачи · Специализации
Обратиться в клинику

Обратиться в клинику

Выбрать удобный способ связи после знакомства.

Контакты · Заявка

Концепция и визуальный язык

Спокойствие — в самой композиции

Глубокий зелёный, светлые поверхности и крупные фотографии задают характер сайта. Свободное пространство отделяет смысловые блоки, а выразительная типографика помогает быстро понять главное.

Визуальный язык Medi-Art
Визуальный язык Medi-Art
Один визуальный язык

От знакомства
к следующему действию

Детали визуальной системы

Впечатление складывается из деталей

Для каждого приёма — своя роль в общей истории.

Визуальный язык Medi-ArtЦвет · Образ · Композиция

Первое впечатление

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

Визуальный язык Medi-ArtСтруктура · Акценты · Иерархия

Последовательный ритм

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

Визуальный язык Medi-ArtИзображения · Типографика · Цвет

Общий характер материалов

Фотографии, предметная графика и интерфейс собраны в согласованную систему. Детали поддерживают общую подачу сайта.

Структура и подача

От впечатления —
к содержанию

Глубокий зелёный, светлые поверхности и крупные фотографии задают характер сайта. Свободное пространство отделяет смысловые блоки, а выразительная типографика помогает быстро понять главное.

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

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

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

Тот же характер.
Другой масштаб

Визуальная система продолжается на небольшом экране.

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

Каждый экран продолжает общий визуальный язык проекта.

Мобильный экран Medi-Art
Самостоятельный сценарий
Мобильный экран Medi-Art
Согласованная иерархия

Сценарии сайта

Команда клиники

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

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

Интерфейс поддерживает конкретную задачу посетителя и сохраняет связь с общей структурой сайта.

Рабочий сценарий Medi-Art
Экран Medi-Art. Длинное изображение можно прокрутить или открыть отдельно.
Пользовательская задача

Найти нужное.
Изучить детали.
Продолжить действие.

От общего представления — к деталям

У каждого раздела — собственная роль в маршруте посетителя.

Рабочий сценарий Medi-Art
Знакомство

Команда клиники

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

Рабочий сценарий Medi-Art
Подробности

Программы и направления

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

Навигация и контакты на сайте
Продолжение маршрута

Понятный следующий шаг

Информация и навигация помогают продолжить знакомство с проектом без поиска среди несвязанных страниц.

Рассмотреть экраны подробнее
Рабочий сценарий Medi-Art
Экран Medi-Art. Длинное изображение можно прокрутить или открыть отдельно.
Рабочий сценарий Medi-Art
Экран Medi-Art. Длинное изображение можно прокрутить или открыть отдельно.

Дизайн в работе

Самостоятельные разделы.
Общий язык интерфейса

Разные задачи раскрыты на отдельных страницах. Общая навигация и согласованная подача связывают их в один сайт.

Команда клиники — Medi-Art
Команда клиники. Экран можно прокрутить внутри ноутбука.

Связь между сценариями

Одна структура.
Разные точки входа

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

Экран Medi-Art. Длинное изображение можно прокрутить или открыть отдельно.Структура сайта Medi-Art
Знакомство с брендомОбраз и ключевая информацияКонкретная задачаПодробности и следующий шаг

Итог работы

Новый образ клиники. Понятная структура

Для Medi-Art подготовлен редизайн: визуальная система, страницы специалистов и программ, мобильные композиции и сценарий обращения. Новая версия готовится к запуску.

Результат работы над Medi-Art
Визуальная система

Спокойствие — в самой композиции

Глубокий зелёный, светлые поверхности и крупные фотографии задают характер сайта. Свободное пространство отделяет смысловые блоки, а выразительная типографика помогает быстро понять главное.

Результат работы над Medi-Art
Рабочие сценарии

Команда клиники

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

Обсудим вашу задачу

Ваш следующий проект

Расскажите, что хотите изменить. Обсудим сайт и цифровые инструменты для вашей команды.

Обсудить проект в WhatsApp
↑