Компания Болеар Медика занимается дистрибуцией товаров медицинского назначения. Присутствует на рынке 24 года, успела занять свою нишу и выстроить прочную сеть партнеров в разных городах. Также компания является единственным в России дистрибьютором торговых марок Sico и Babe laboratorios. Читайте историю разработки проекта.
Результат Процесс
Болеар Медика — сайт медицинской компании
Компания Болеар Медика занимается дистрибуцией товаров медицинского назначения. Присутствует на рынке 24 года, успела занять свою нишу и выстроить прочную сеть партнеров в разных городах. Также компания является единственным в России дистрибьютором торговых марок Sico и Babe laboratorios. Читайте историю разработки проекта.

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

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

Дизайн и разработка

Продукция четко разделяется на категории: ортопедические изделия, медицинские расходные материалы, пластыри, косметика, — всего 8 категорий. Решаем отталкиваться от этого в дизайне. Фирменные иконки компании заказчика:

Предлагаем следующую концепцию:

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

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

Советуемся с разработчиком, находится простое и изящное решение — привести все в движение с помощью 3D-анимации на CSS.

Пока утвержденная главная страница верстается, у нас есть еще задачи. Предлагаем макет каталога продукции:

Андрей дизайнер

Мы предложили не открывать карточку товара сразу в новом окне, а разворачивать ее прямо здесь, в каталоге. Все работает по принципу поиска картинок в Google — соседние элементы развигаются, перед нами появляется увеличенная карточка. Удобно.

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

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

Евгений разработчик

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

Если вы интересуетесь компанией не просто как покупатель — можете здесь же оформить заявку на партнерство:

Еще особенности проекта

  1. Навигация по каталогу работает без обновления страницы, «на лету».
  2. Анимированный с помощью CSS промо-блок на главной странице.
  3. Загружаемый PDF-каталог всей продукции.
  4. Тематический логотип студии, конечно же! ;)

Результат

Готовый сайт: bolear.ru

И по традиции: не болейте!