Дизайн
Chipsa
624

Как современный веб-дизайн решает задачи энергетики

Всем привет! Меня зовут Максим, я CEO студии дизайна Chipsa. Расскажу о том, как сделать современный и дружелюбный сайт для игрока такой непростой отрасли бизнеса, как энергетика.

В закладки
Главная страница сайта о компании.

Сибирская генерирующая компания — это крупный производитель электрической и тепловой энергии в Сибири. Работает на территории Алтайского края, Кемеровской области, Новосибирской и Свердловской областей, Красноярского края, Республики Тыва и Республики Хакасия. СГК обеспечивает теплоснабжением и горячим водоснабжением жителей и промышленные предприятия.

В 2015 году мы запустили сайт для этой компании и осуществляли его техническую и дизайн-поддержку. Спустя три года назревает необходимость перемен. Приходят новые технологии и идеи, которые могут сделать сайт легче и быстрее. К этому времени компания визуально обновляется, у СГК появляется новый брендбук. Заказчик хочет кардинальной переработки, из-за чего приходим к решению отказаться от старой версии сайта и начать работу с нуля.

Главные задачи проекта

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

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

Татьяна Кыштымова
Менеджер проекта

Сложность номер 1 — структура сайта

Во-первых, структура сайта была огромна! Большие разделы для потребителей, разделы по закупочной деятельности, HR и охрана труда, информация обязательная к раскрытию по закону и прочее. Из песни слов не выкинуть. Нам остаётся грамотно уложить все по полкам, визуально не перегрузить сайт и предоставить легкий доступ к информации. Совместно с заказчиком мы решаем упростить структуру, разбив ее на три сайта:

  • Основной сайт о компании;
  • Медиапортал;
  • Отдельный портал для потребителей (в разработке, появится уже в следующем году).

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

Сложность номер 2 — работа с 3D

Это первый наш сайт, где мы используем API WebGL для работы с 3D-графикой. Когда секвенции изображений слишком громоздкие, эта технология позволяет сократить расход ресурсов. Но, к сожалению, WebGL не поддерживается старыми версиями браузеров, а часть аудитории заказчика заходит в интернет именно с них (об этом говорит Яндекс.Метрика). С такими ситуациями приходится сталкиваться, когда вы идете в ногу со временем, но к этому еще не готовы остальные. Мы скрепя сердце упрощаем анимацию 3D-моделей для таких браузеров. Звучит легко, но с этим приходится ох как повозиться.

Особенности сайта о компании

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

Как работает ТЭЦ. Рассказ об основных функциях на основе 3D-модели.
Откуда везут уголь для станций. Инфографика на основе Google карт.

Здесь приходится серьезно потрудиться нашему разработчику.

«Нужно сделать кривые, которые показывают с каких шахт/разрезов на какие станции возят уголь. Трудность, во-первых, в реализации самих линий — приходится использовать уравнения «кривых Безье», чтобы линии были не прямые, а изогнутые. Во-вторых, чтобы путь транспортировки угля и названия станций/шахт не перекрывали друг друга, мы используем множество формул, которые скрывают неактивные в текущий момент элементы и корректно располагают pop-up окна с названиями объектов».

Иван Решетило
Технический директор
Пройти виртуальный тур по станции или записаться на реальную экскурсию.​

Мы перерабатываем базу — сайт становится быстрее. В визуальную часть встраиваем анимацию элементов фирменного стиля в виде точек. Переход между страницами происходит без перезагрузки за счет использования SPA-технологии. Недавно интегрировали закупочную деятельность с Единой информационной системой закупок. Теперь не нужно загружать информацию на сайт вручную — закупки парсятся и автоматически обновляются с ЕИС.

Цели и задачи медиапортала

Основная цель — информирование посетителей сайта о деятельности компании СГК, важных событиях, новостях энергетики.

Второстепенные цели сайта:

  • Укрепить имидж компании за счет оперативного и честного информирования посетителей сайта о новостях компании, событиях и мероприятиях;
  • Подчеркнуть открытость компании;
  • Оперативно уведомлять СМИ о важных событиях компании.

Особенности медиапортала

Здесь компания рассказывает о своей жизни в режиме реального времени. Мы разрабатываем медиаресурс, который становится полноценным средством массовой информации СГК:

Новости с медиа-портала отображаются на сайте о компании, при этом подтягиваются по специально отобранным тегам. Так, например в раздел «карьера» тянутся новости по тегу «Жизнь коллектива».​
​Видео и текстовые трансляции в прямом эфире. В случае если их нет, свободное место занимает блок подписки на новости.
Фильтр новостей не только по привычным темам, тегам или регионам, но еще и по типу контента. Сортируются публикации, которые содержат видео или аудио контент.​
​Большинство публикаций авторские. Журналисты компании пишут и ведут блоги (том числе и видео), и если вас интересует конкретный автор, то на него можно легко подписаться.
Когда публикации освящают одну тему, происходит группировка в сюжеты. Если пользователя интересует конкретная тема, на неё так же легко можно подписаться.​
​После прочтения публикации пользователь плавно переходит на следующую новость — это происходит без перезагрузки страницы.

Другие функции:

  • Функционал комментирования;

  • Поделиться публикацией в соц сетях;
  • Поиск;
  • Бегущая строка;
  • Счетчик просмотра публикаций;
  • Анонсы предстоящих мероприятий и отчеты о прошедших.

Мы продолжаем работать над редизайном существующего медиапортала. Функции будут сохранены, но появится явная выделенная структура: главное, новости, видео. Публикации будут разделены на 5 наиболее интересных тем по результатам опросов пользователей. Реализуем автоматическое определение города, и явное разделение публикаций по регионам.

Результаты

Разделив сайт на три основных направления, мы упростили его структуру и восприятие информации стало легче. Используя SPA-технологию и ряд других технических решений, мы оптимизировали скорость работы. Теперь пользователь может быстро перемещаться по всему порталу, не дожидаясь дополнительной загрузки страниц. Виртуальные туры, реальные экскурсии по станциям и эффективная работа функционального медиаресурса вовлекает пользователей в жизнь СГК и показывает компанию с тех лучших сторон, о которых люди ранее не знали.

В России очень остро стоит вопрос охраны окружающей среды. Все привыкли к городскому комфорту и даже не задумываются о том, что горячая вода, свет и тепло есть в наших домах благодаря прогрессу и техническому развитию. Люди винят промышленность в загрязнении окружающей среды, несоблюдении экологических норм и использовании некачественного сырья. В СГК всерьез задумались о том, что важно иметь эффективный веб-ресурс, где можно рассказать о том, как компания поддерживает экосистему в регионах, помогает людям, использует современные технологии и просто о жизни организации и ее сотрудников. Развитие такого предприятия в медийном пространстве это мудрый взгляд в будущее, в котором общественное мнение и СМИ будут становиться всё более влиятельными на происходящее в мире.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Chipsa", "author_type": "editor", "tags": [], "comments": 2, "likes": 0, "favorites": 17, "is_advertisement": false, "subsite_label": "design", "id": 90514, "is_wide": false, "is_ugc": false, "date": "Fri, 01 Nov 2019 07:05:15 +0300", "is_special": false }
0
{ "id": 90514, "author_id": 385610, "diff_limit": 1000, "urls": {"diff":"\/comments\/90514\/get","add":"\/comments\/90514\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/90514"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
2 комментария
Популярные
По порядку
2

У чипсы очень креативные и навороченные сайты, да и девиз у них "делать сайты не как у всех", но иногда стоит себя притормозить, в данном случае на этом проекте (подписан на вас в FB). Смотрел пока только 5 страниц, остальное позже гляну.

https://sibgenco.ru/main/ - вполне можно было оставить только нижний 3 экран (наша компания) доработав страницу на основание иллюстрации. Видео на весь экран (1 экран), Новостной слайдер с изображениями с максимальной шириной 1300 (2 экран) - зачем??? Этой страницей посетителя вы нагружаете информацией. Стоит доработать и облегчить восприятие информации. Ещё есть много чего прокомментировать, но не хочу быть критикующим.

Вообще советую Чипсе присмотреться к работам от only, у них есть проекты в сфере энергетики и на порядок лучше всё реализовано.

Удачи!

Ответить
0

Вы площадку с бехансом не перепутали? =)

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }