Разработка сайта компании «УДС нефть»

Описание

Нефтяная компания UDS OIL ведет разработку месторождений нефти и газа на территории Удмуртской республики, Пермского края, Оренбургской области и Республики Башкортостан. Компания имеет полноценную материально-техническую базу и необходимое оборудование для добычи и подготовки нефти.

Цель

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

Этот проект оказался очень интересным, но весьма непростым. Визуальная концепция, разработанная нашими дизайнерами, подразумевала огромную нагрузку на систему со стороны frontend’а. С этой проблемой мы справились — оптимизировали загрузку сайта и работу скриптов с учетом параметров устройств, с которых заходят пользователи и скорости работы сети.

Функционал

Чтобы рассказать потенциальным инвесторам о преимуществе работы с компанией UDS OIL, мы разместили динамические слайды, состоящие из лаконичных блоков, совместив стандартный подход к анимации и HTML5:

Для презентации материально-технической базы компании, где реализуется полный производственный цикл от добычи нефти и газа до сбыта нефтепродуктов, была создана спрайтовая анимация из нескольких десятков рендеров 3D-модели реального месторождения компании UDS OIL.

На главной странице представлена карта месторождений, разработанная на основе Google Maps API.

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

В качестве системы управления сайтом выбрана «1С-Битрикс: Управление сайтом» в редакции «Стандарт». Её инструменты позволили оптимизировать ряд процессов в администрировании ресурса, а также обеспечили комфортный процесс редактирования контента на сайте.

3D-модель месторождения

В презентации компании на сайте главное внимание фокусируется на информировании посетителей о полном производственном процессе — от добычи до транспортировки, что изображено в 3D-анимации. Чтобы ускорить загрузку анимации, мы пришли к решению сделать спрайтовую анимацию из десятков рендеров. После поездки на месторождение, где был сделан фото-отчет местности и оборудования, на основе карты была разработана 3D-модель. Далее оставалось раскрасить модель в брендовые цвета, анимировать элементы по функционалу (станки-качалки добывают нефть, автоцистерны заправляются и выезжают с месторождения). В завершение поработали над тем, с какого ракурса сюжет будет подаваться пользователю.

Юзабилити и дизайн

Для максимального удобства пользования сайтом мы уделили большое внимание структуре и дизайну ресурса:

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

Раскрыли концепцию эстетики нефти, что реализовали с помощью CSS:hover — при передвижении курсора «нефть» на бэкграунде переливается.

В нужный слайд или раздел меню можно попасть с первого клика, а помощью деления сайта на два экрана, пользователь всегда в курсе, в каком разделе он находится.

Результат

• Адаптивный дизайн
• 3D-модель месторождения
• Оптимизация загрузки сайта и работы скриптов
• Англоязычная версия
• Анимация

Один из самых интересных проектов, посмотрите еще раз: udsoil.ru