Биттехника - функциональная красота и красивая функциональность

Grigoriy Sokolov GSokolov.com

ФУНКЦИОНАЛЬНАЯ КРАСОТА VS. КРАСИВАЯ ФУНКЦИОНАЛЬНОСТЬ. САЙТ ДЛЯ ПРОИЗВОДИТЕЛЯ БУРОВОГО ОБОРУДОВАНИЯ

ЗАКАЗЧИК ООО «БИТТЕХНИКА» — предприятие по производству оборудования для скважин. География поставок и сервисных услуг охватывает всю Россию (от Калининграда до Камчатки) и постоянно расширяется благодаря новым партнерам из ближнего и дальнего зарубежья.

ЗАДАЧА Создать современный ресурс с эффектным и модным интерфейсом, значительно облегчающий процесс заказа продукции по каталогу.

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


Цели проекта. Ветер перемен

В 2015 году получил приглашение принять участие в тендере на разработку нового сайта ООО «БИТТЕХНИКА», пермского предприятия по производству оборудования для скважин.

Существующий сайт компании устарел и морально, и стилистически, не отвечал поставленным задачам и был крайне не удобен в плане использования (самостоятельное управление сайтом было невозможно). Пришло время для обновления.

Заказчик хотел получить современный ресурс, который, с одной стороны, поразил бы клиентов модным интерфейсом, с другой, значительно облегчил процесс заказа продукции по каталогу (на тот момент - совершенно не работоспособному).

Этапы работы. Начнём с конца!


Обычно работа над проектом начинается с исследования всех необходимых данных, в частности, пользовательских запросов в интернете. Затем на основе полученной информации решается, какой будет структура сайта и создаётся его прототип. И только потом наступает очередь дизайн-концепции.

В этот раз стандартная этапность была полностью перекроена по причине двух объективных факторов: 1. Клиент сам определил правила игры, сделав условием конкурсного отбора 3 варианта дизайн-концепции будущего сайта. Серьезность намерений подтверждал тот факт, что это был оплачиваемый тендер, наиболее цивилизованная форма проведения подобных мероприятий. 2. Специфика продукции (буровое оборудование) такова, что клиентура ООО «БИТТЕХНИКА» представляет собой достаточно узкий круг постоянных покупателей. Все связи уже налажены, потоки сформированы. Соответственно, изучение целевой аудитории не потребовалось.

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

Дизайн. Функциональная красота vs. красивая функциональность

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


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

Как «дорого-богато» изобразить то, что используется глубоко под землёй? Главной деталью нового интерфейса стала... деталь.


Креативный разум дизайнера разместил крупным планом фрезу, динамично вращающуюся в ярком свете прожекторов. Для создания этого эффекта была проведена фотосессия, отсняли порядка 200 фотографий реальной фрезы производства ООО «БИТТЕХНИКА», из которых затем собрали видеоряд.


Мерцающий металл, непрерывное движение, благородный тёмно-синий фон — каждый элемент работает на то, чтобы сделать функциональность по-настоящему красивой.

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

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


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



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


Всего было отрисовано 42 макета страниц.

Обратная связь

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


Итоги проекта

Смена подхода, при котором разработка дизайн- концепции предшествовала созданию прототипа, продемонстрировала достаточную эффективность.


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

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

Технологии:

Набор шрифтов Google Font API

Язык программирования PHP

CMS 1C-Bitrix

Хостинг панель Plesk

Веб-сервер Nginx

Documents

Биттехника - функциональная красота и красивая функциональность