Сайт для дочки «Газпрома»
АО «СтройТрансНефтеГаз» — одна из ведущих строительных компаний России, выполняющая полный комплекс работ в рамках инфраструктурных проектов нефтегазовой отрасли. Ключевые направления деятельности компании: проектирование, прокьюремент, строительство, реконструкция, ремонт и обслуживание объектов нефтегазовой инфраструктуры.
Клиент крупный, клиент серьезный, проект сложный, с точки зрения не только высокого уровня заказчика, но и того, что этот проект имеет свои уникальные особенности и наивысшие требования к качеству исполнения.
Задачи
Заказчик хотел обновить сайт, сохранив структуру текущего, у него были уже четкие требования к дизайну и вариантам оформления, ну, а как иначе, это ведь «Газпром». Первоначально мы заключили с ними договор только на дизайн макетов, с созданием растровых элементов макета, разрешение которых должно быть достаточным для нормального отображения на Retina-дисплеях. Также никуда без макетов для адаптивной верстки, наличия инфографики и перерисовки интерактивной карты проектов АО «СТНГ».
Аналитика
Итак, задание по редизайну сайта, входящие данные от клиента такие: при разработке нового дизайна ориентируемся на старое содержание и структуру, а так же на сайт http://www.gazprom.ru/.
Основные конкуренты:
«Стройгазмонтаж» и «Стройгазкосалтинг».
Эти «конкуренты» опережают нашего заказчика по объемам заказов и парку техники в 7-10 раз, с такими сайтами в кавычках... Как — загадка, нам в любом случае нужно создать сайты лучше, ориентир только на сайт «Газпрома», про древние сайты конкурентов — вопрос теперь один: «Как это развидеть?»
Нам передали техническое задание со структурой разделов сайта и даже ориентировочные техмакеты страниц, особое внимание просили нас уделить разделам «О персонале», «Карьера» и «Проекты». Еще раз повторимся: обязательно наличие динамики на сайте и корректное отображение на любых разрешениях, в том числе на дисплеях Retina.
Дизайн
Главная
Изначальная структура сайта была не совсем презентационная, блоки делили ее вертикально на две части, мы предложили иной вариант — горизонтальную раскладку. Структура получилась такая: шапка, слайдер с суперскими фотографиями с объектов, затем слайдер новостей, далее блок с видами услуг, информацией о компании и карьерой, красивая интерактивная карта проектов, партнер и подвал.
Фирменные цвета, отображение логотипа — все было строго по брендбуку
CMYK 100 44 0 0
RGB 0 121 194
RAL 5015
ORACAL 052
ORACAL 010
RAL 9006
Серебряная фольга
Серебристый металл
О компании
На странице планировался блок с видеопрезентацией, но в ходе разработки сайта заказчик от него отказался, заменили на статичную картинку. Страница «О компании» представлена в цифрах, тело страницы разбито на несколько блоков, каждый блок — это небольшое количество текста и инфографика, например, информация о сотрудниках, финансовых успехах, количественных показателях и партнерах.
Пресс-центр
Под тематическим слайдером с фотографиями — блок с подразделами раздела «Пресс-центр», далее плиткой идут превью новостей и событий, справа от них — календарь событий и поиск, чтобы можно было отфильтровать некоторые новости, события и т. д.
Ну, и отдельный блок с контактами для СМИ, чтобы не искать их на сайте.
Проекты
Проекты было решено представить в виде интерактивной карты, на которой, помимо наиболее значимых маркеров-проектов (каждый вид проекта обозначает свой тип иконки на карте), будут представлены линии газопроводов, нефтепроводов, зоны проектов по капитальному ремонту и многое другое.
А при наведении на маркеры (иконки) проектов появляется окно с кратким описанием и кнопкой «Подробнее», которая ведет уже на страницу с более развернутым описанием того или иного объекта.
Маркеры проектов не слишком ярко были обозначены на карте — чтобы было понятно, что при наведении там что-нибудь будет появляться, было решено включить автоматическое раскрытие информации у маркеров в рандомном порядке.
Под картой — своеобразный фильтр по дате, больше похожий на блок «История», в нем описаны все проекты компании: и значимые, и незначимые.
Руководство
Вверху — меню из подразделений (отделов), а ниже — ключевые фигуры АО «СТНГ» с фотографией, ФИО, должностью и контактными телефонами, электронной почтой.
Структура компании
Плитка из подразделений на фоне, при клике — снизу краткая информация о нем.
Карьера
Обширный блок, макеты для него мы практически выносили отдельным этапом, так как для одного раздела мы рисовали до семи макетов:
- основной макет «Карьера»;
- обращение руководства;
- профи;
- профи — внутренняя страница;
- карьера;
- список вакансий (с фильтром по регионам, направлению деятельности, организации и режиму работы);
- заполнение резюме.
Вакансии
Выполнен раздел в виде интерактивной карты вакансий, маркер показывает количество активных вакансий в определенном подразделении. При выборе конкретного маркера снизу отображается таблица с описанием вакансий и кнопки «Загрузить резюме» или «Заполнить резюме». Клик на кнопку «Загрузить резюме» активирует синхронизацию с сайтами hh.ru и superjob.ru.
Основные направления деятельности
Вместо текстового блока — шахматная раскладка из названия деятельности и фотографии, его олицетворяющей. Отдельно и более крупно выделены основные четыре типа услуг и ниже оставшиеся восемь поменьше.
Закупки
Раздел, в котором в самом начале яркий блок с ключевыми показателями относительно торгов. Далее — сами торги в табличном виде с пейджингом.
Контакты
Плиточное оформление контактов по отделам, с формой обратной связи и Яндекс.Картой.
Мобильная версия и Retina
Правок по макетам было мало, мы их быстро утвердили, следующими этапами были разработка мобильной версии сайта и версии для дисплеев Retina.
Мобильная версия строилась, исходя из готового контента, чтобы упростить задачу дизайнеру, мы практически сверстали все макеты. Да, немного нелогично, но это действительно помогло ускорить процесс подготовки мобильной версии и сократить издержки, плюс клиенту было удобнее утверждать этот этап работ.
Мы отрисовали каждый макет в более высоком разрешении, и также применили наработки в верстке.
Разработка
Видимо, нам помогла наша верстка, и заказчик решил с нами заключить отдельное дополнительное соглашение на верстку макетов, которая практически была готова. Допилив некоторые моменты с картой проектов и закупками, мы предоставили верстку на утверждение. Она была согласована!
ИТОГ?
Если вы посмотрите на сайт сейчас, то сможете найти кучу отличий от того, что рисовали и верстали мы и что было спрограммировано программистами АО «СТНГ».
После запуска сайта практически все разделы выглядели так же красиво, как и на прототипах, но спустя время, постепенно, от сайта начали потихоньку «отваливаться» то одни, то другие блоки или модули.
Но, несмотря на то, что готовый продукт сейчас выглядит несколько проще того, что мы тут расписали, с ним мы подняли нехилую планку для наших будущий проектов.
ГОТОВЫЙ ПРОЕКТ
Если макет не устроит - нарисуем еще 2!
+7 (495) 740 07 73