Цель
Главной целью проекта стало создание брендового сайта, который не только расскажет обо всех преимуществах сотрудничества и масштабах деятельности компании, но и будет достойным статуса заказчика – главного игрока и надежного партнера на нефтяном рынке. Поскольку компания стремится к сотрудничеству с иностранными инвесторами, у сайта должна была быть англоязычная версия, все материалы необходимо было перевести на английский язык.
Дмитрий Пасынков, руководитель проекта:
Этот проект оказался очень интересным, но весьма непростым. Визуальная концепция, разработанная нашими дизайнерами, подразумевала огромную нагрузку на систему со стороны frontend’а. С этой проблемой мы справились — оптимизировали загрузку сайта и работу скриптов с учетом параметров устройств, с которых заходят пользователи и скорости работы сети.
Функционал
Чтобы рассказать потенциальным инвесторам о преимуществе работы с компанией UDS OIL, мы разместили динамические слайды, состоящие из лаконичных блоков, совместив стандартный подход к анимации и HTML5:
Для презентации материально-технической базы компании, где реализуется полный производственный цикл от добычи нефти и газа до сбыта нефтепродуктов, была создана спрайтовая анимация из нескольких десятков рендеров 3D-модели реального месторождения компании UDS OIL.
На главной странице представлена карта месторождений, разработанная на основе Google Maps API.
В раскрывающемся правом сайдбаре, который делит сайт на брендовый и информационный разделы, размещены внутренние разделы меню, которые позволяют быстро находить нужный контент на сайте.
В качестве системы управления сайтом выбрана «1С-Битрикс: Управление сайтом» в редакции «Стандарт». Её инструменты позволили оптимизировать ряд процессов в администрировании ресурса, а также обеспечили комфортный процесс редактирования контента на сайте.
3D-модель месторождения
В презентации компании на сайте главное внимание фокусируется на информировании посетителей о полном производственном процессе — от добычи до транспортировки, что изображено в 3D-анимации. Чтобы ускорить загрузку анимации, мы пришли к решению сделать спрайтовую анимацию из десятков рендеров. После поездки на месторождение, где был сделан фото-отчет местности и оборудования, на основе карты была разработана 3D-модель. Далее оставалось раскрасить модель в брендовые цвета, анимировать элементы по функционалу (станки-качалки добывают нефть, автоцистерны заправляются и выезжают с месторождения). В завершение поработали над тем, с какого ракурса сюжет будет подаваться пользователю.
Юзабилити и дизайн
Для максимального удобства пользования сайтом мы уделили большое внимание структуре и дизайну ресурса:
Дизайн реализован в черном цвете разлитой нефти, тонкий шрифт подчеркивает глубину и массивность фона. Дополнительный желтый цвет ставит четкие акценты, чтобы максимально ясно разместить черный текст на белом фоне и наоборот.
Раскрыли концепцию эстетики нефти, что реализовали с помощью CSS:hover — при передвижении курсора «нефть» на бэкграунде переливается.
В нужный слайд или раздел меню можно попасть с первого клика, а помощью деления сайта на два экрана, пользователь всегда в курсе, в каком разделе он находится.
Выводы
Дмитрий Пасынков, Руководитель проекта:
Проекты, подобные этому, ставят перед нами ряд нетривиальных задач. Найти оригинальные решения и выйти в релиз к установленным срокам нам позволяет грамотное управление ресурсами и четко отлаженная работа всей команды.
Результат
- Адаптивный дизайн
- 3D-модель месторождения
- Оптимизация загрузки сайта и работы скриптов
- Англоязычная версия
- Анимация
Один из самых интересных проектов, посмотрите еще раз: udsoil.ru