Оценить проект Online
назад в журнал

Сайт для дочки «Газпрома»

Первый наш сайт для компании, входящей в ТОП 500 крупных корпораций России

АО «СтройТрансНефтеГаз» — одна из ведущих строительных компаний России, выполняющая полный комплекс работ в рамках инфраструктурных проектов нефтегазовой отрасли. Ключевые направления деятельности компании: проектирование, прокьюремент, строительство, реконструкция, ремонт и обслуживание объектов нефтегазовой инфраструктуры.

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

 

Задачи

Заказчик хотел обновить сайт, сохранив структуру текущего, у него были уже четкие требования к дизайну и вариантам оформления, ну, а как иначе, это ведь «Газпром». Первоначально мы заключили с ними договор только на дизайн макетов, с созданием растровых элементов макета, разрешение которых должно быть достаточным для нормального отображения на Retina-дисплеях. Также никуда без макетов для адаптивной верстки, наличия инфографики и перерисовки интерактивной карты проектов АО «СТНГ».

 

Аналитика

Итак, задание по редизайну сайта, входящие данные от клиента такие: при разработке нового дизайна ориентируемся на старое содержание и структуру, а так же на сайт http://www.gazprom.ru/.

Основные конкуренты:

«Стройгазмонтаж» — http://www.ooosgm.ru/,

«Стройгазкосалтинг» — http://www.sgc.ru/.

Эти «конкуренты» опережают нашего заказчика по объемам заказов и парку техники в 7-10 раз, с такими сайтами в кавычках... Как — загадка, нам в любом случае нужно создать сайты лучше, ориентир только на сайт «Газпрома», про древние сайты конкурентов — вопрос теперь один: «Как это развидеть?»

Нам передали техническое задание со структурой разделов сайта и даже ориентировочные техмакеты страниц, особое внимание просили нас уделить разделам «О персонале», «Карьера» и «Проекты». Еще раз повторимся: обязательно наличие динамики на сайте и корректное отображение на любых разрешениях, в том числе на дисплеях Retina.

 

Дизайн

Главная

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

 

 

 

 

Еще по теме:

Фирменные цвета, отображение логотипа — все было строго по брендбуку

Pantone 300 СV
CMYK 100 44 0 0
RGB 0 121 194
RAL 5015
ORACAL 052
RAL 9016
ORACAL 010
Pantone 877 СV
RAL 9006
Серебряная фольга
Серебристый металл

О компании

На странице планировался блок с видеопрезентацией, но в ходе разработки сайта заказчик от него отказался, заменили на статичную картинку. Страница «О компании» представлена в цифрах, тело страницы разбито на несколько блоков, каждый блок — это небольшое количество текста и инфографика, например, информация о сотрудниках, финансовых успехах, количественных показателях и партнерах.

  

  

  

  

Пресс-центр

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

Ну, и отдельный блок с контактами для СМИ, чтобы не искать их на сайте.

  

  

  

  

Проекты

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

А при наведении на маркеры (иконки) проектов появляется окно с кратким описанием и кнопкой «Подробнее», которая ведет уже на страницу с более развернутым описанием того или иного объекта.

Маркеры проектов не слишком ярко были обозначены на карте — чтобы было понятно, что при наведении там что-нибудь будет появляться, было решено включить автоматическое раскрытие информации у маркеров в рандомном порядке.

  

  

  

Под картой — своеобразный фильтр по дате, больше похожий на блок «История», в нем описаны все проекты компании: и значимые, и незначимые.

  

  

  

Руководство

Вверху — меню из подразделений (отделов), а ниже — ключевые фигуры АО «СТНГ» с фотографией, ФИО, должностью и контактными телефонами, электронной почтой.

Структура компании

Плитка из подразделений на фоне, при клике — снизу краткая информация о нем.

  

  

  

  

Карьера

Обширный блок, макеты для него мы практически выносили отдельным этапом, так как для одного раздела мы рисовали до семи макетов:

  • основной макет «Карьера»;
  • обращение руководства;
  • профи;
  • профи — внутренняя страница;
  • карьера;
  • список вакансий (с фильтром по регионам, направлению деятельности, организации и режиму работы);
  • заполнение резюме.

  

КАРЬЕРА
ОБРАЩЕНИЕ РУКОВОДСТВА
ПРОФИ
ПРОФИ - ВНУТРЕННЯЯ СТРАНИЦЫ
СПИСОК ВАКАНСИЙ

Вакансии

Выполнен раздел в виде интерактивной карты вакансий, маркер показывает количество активных вакансий в определенном подразделении. При выборе конкретного маркера снизу отображается таблица с описанием вакансий и кнопки «Загрузить резюме» или «Заполнить резюме». Клик на кнопку «Загрузить резюме» активирует синхронизацию с сайтами hh.ru и superjob.ru.

Основные направления деятельности

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

  

  

  

  

Закупки

Раздел, в котором в самом начале яркий блок с ключевыми показателями относительно торгов. Далее — сами торги в табличном виде с пейджингом.

Контакты

Плиточное оформление контактов по отделам, с формой обратной связи и Яндекс.Картой.

Мобильная версия и Retina

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

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

Мы отрисовали каждый макет в более высоком разрешении, и также применили наработки в верстке.

Разработка

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

ИТОГ?

Если вы посмотрите на сайт сейчас, то сможете найти кучу отличий от того, что рисовали и верстали мы и что было спрограммировано программистами АО «СТНГ».

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

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


ГОТОВЫЙ ПРОЕКТ

Облизать клиента - мы приложим максимум усилий, чтоб каждый из наших клентов остался доволен результатом и процессом разработки и продвижения сайта. Это отражено в условиях работы с нами и в договоре. Где надо - подсказажем, где надо - поможем. И даже направим.
Дизайн сперва должен понравиться — зачем платить за дизайн, который еще не видели?
Рассчитайте стоимость Вашего сайта онлайн и скачайте индивидуальное коммерческое предложение.
Пожизненная гарантия работоспособности сайта.
Стоимость продвижения сайта рассчитываем индивидуально в каждом конкретном случае.
90% наших клиентов нравится первый макет дизайна.
Если макет не устроит - нарисуем еще 2!
Сайт разрабатывается по поэтапной постоплате и клиент платит за этапы после выполнения и согласования работ по этапу.
Перед тем, как разрабатывать сайт - подумай откуда возьмешь трафик!
Моделируем поведение посетителей на сайте до оформления заявки или других целей.
Оказываем бесплатную информационную поддержку в течении 6 месяцев после завершения работ по разработке сайта.
Даем гарантии в договоре: никакой предоплаты — оплата только за результат!
А еще мы очень прозрачные - вы можете самостоятельно оценить свой сайт. Если вам нравится наш подход — давайте знакомиться:
+7 (495) 740 07 73