+7 (495) 105-99-69
Москва, ул. Ленинская Слобода,
д. 19, стр. 1, БЦ Омега Плаза

Разработка Сайт hepatitc.ru – портфолио

hepatitc.ru

Результат
Процесс

Задача: разработать информационный портал о Гепатите C.

Проект hepatitc. ru был разработан для ознакомления пользователей с особенностями вируса Гепатита C и возможностями, существующими для людей, у которых удалось диагностировать данное заболевание.

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

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

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

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

Инфографика клинических исследований

Инфографика клинических исследований

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

В качестве референсов были предложены сайты Volvocars и пара ресурсов LookatMedia — Lookatme и The Village. Сайт бренда Volvo понравился заказчику эффектом «погружения», крупными изображениями и общим впечатлением «дороговизны» проекта. Информационные ресурсы LookatMedia привлекли подачей информации — «чистотой» представления в контент-области, простой и классной инфографикой.

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


Открытый раздел.gif

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

Варианты оформления контента и смысловых блоков

Варианты оформления контента и смысловых блоков

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

Главное меню сайта

Главное меню сайта

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

Типовая инфографика для сайта

Типовая инфографика для сайта

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

Многоуровневое меню на внутренних страницах

Многоуровневое меню на внутренних страницах

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

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

Категория разработки:
Информационный портал
  • Сроки 3-5 месяцев
  • Цена от 1 000 000 рублей
Участники
Директор по работе с клиентами:
  • Илья Сабуров
Дизайнер:
  • Мария Русакова
  • Ольга Чухаленко
Менеджер:
  • Ольга Бояршинова
  • Алла Молчанова
Срок 4-5 месяцев
Цена от 790 000 руб.
Бюджет от 790 000 руб.