Цифрабанк
Дизайн мобильного портала для цифровой экосистемы банка и брокера
кейс
Медисорб
Дизайн и разработка сайта для одной из крупнейших в России фармацевтических компаний
задача
Создать интуитивно понятный сайт сразу для двух целевых аудиторий: партнеров и частных клиентов. Использовать технологичные решения, которые отразят имидж современной фармацевтической компании. Сделать упор на адаптивной версии сайта.
клиент
Медисорб
отрасль
Фармацевтика
год запуска
2019
что сделали
Frontend-разработка
Backend-разработка
Дизайн сайта
3D-дизайн
награды
Ключевая идея
На первый экран вывести одну фразу, которая описывает все направления деятельности. Ключевые слова направляют пользователя на соответствующие разделы. Современный характер передали через смелые для фармацевтических сайтов решения: чистый «воздушный» сайт, 3D-модели и яркие цвета.
3D вместо фото
Медисорб — технологичная компания, за счёт смелых дизайн-решений подчеркнули имидж и выделили на фоне конкурентов. Вместо стандартных фотографий вывели на первый экран паттерн с 3D-объектами: таблетки иллюстрируют производство, книги — информирование специалистов, колбы — сотрудничество с аптеками.
Всего одна фраза на приветственном экране направляет категории клиентов по нужным разделам.
У компании большой объем производства. Показали это иллюзией бесконечного количества колб, таблеток и книг на главном экране.
Каталог
В сетке первый препарат выведен крупнее остальных, здесь производитель может разместить товар для своих задач: например, показать позицию с высоким спросом. Новинка выделяется яркой плашкой, которая по форме напоминает линии с упаковки. Так мы позволили акцентировать внимание b2b на желаемых препаратах. Товары можно представить плиткой, если достаточно названий и упаковки, или более подробным списком с информацией о размере упаковки и сфере применения.
Карточка товара
На странице продукта разместили информацию о препарате для b2b и b2c аудитории. Сделали акцент на цифровых показателях, прописали показания и способ применения, а полную инструкцию можно скачать в формате pdf для детального изучения.
Всегда на связи
Компания заботится о качестве, поэтому бережно собирает обратную связь. Для обращений создали органичную, но заметную кнопку: яркий ярлычок с крестом является традиционным символом медицины и перекликается с привычным для пользователя символом: «узнать больше». Этот знак также использовали вместо курсора в каталоге товаров и блоке: он подсказывает, что можно открыть страницу с подробностями.
Блог-платформа
Компания принимает активное участие в развитии медицинского сообщества. Сделали два медийных раздела для разных аудиторий: блог для потребителей и «специалистам» для профессионалов. Все легко наполняется из административной части сайта, где понятный интерфейс для любого пользователа ПК.
Плавность и скорость
Использовали AJAX-загрузку: страницы, на которые может перейти пользователь, заранее подгружаются для быстрой смены контента. Благодаря этому сайт не тормозит даже на компьютерах с устаревшим процессором или системой.
Счётчик новых записей в блоке призывает прочитать свежую статью.
Контакты
Страница контактов продолжает идею главного экрана: она смотрится минималистично, но при наведении курсора на адрес на фоне появляется карта. Это позволяет не перегружать восприятие пользователя, если нужен только номер телефона или электронная почта.
Адаптив
Клиенты современной, технологичной компании чаще пользуются смартфоном, чем компьютером или планшетом. Поэтому клиенту был важен хороший адаптив. В мобильной версии сохранили все функции основного сайта, и без потери скорости перенесли многие эффекты, градиенты и анимации для полноценного UX.
технологии
Vanilla JS
JavaScript
Three.js
WebGL
PHP
UMI
CAjax
смотрите также
связаться