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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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