Landing page социального проекта "День воды" для ПАО "РусГидро"

О социальном проекте «День воды»

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

Исходные данные — основа эффективного лендинга

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

  • Шапка сайта, включающая следующие элементы: слайд-шоу энергообъектов «РусГидро», фирменный логотип холдинга, название страницы — «День воды с РусГидро» и небольшой текстовый блок с информацией.
  • 2 информационных блока: «РусГидро и вода», «Что РусГидро делает с водой?».
  • Блок «Интересные факты о РусГидро».
  • Блок «Стена с постами пользователей из социальных сетей»
  • Футер (подвал сайта), содержащий советы по сбережению водных ресурсов.

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

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

Элементы дизайна и их блоки организованы и расположены на странице таким образом, что на сайте не создается эффекта нагромождения и пестроты.

Верхнее горизонтальное меню — перемещение на нужную часть лендинга

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

d09496708f6e407ef6a143b34519ff0c.png

В шапку сайта встроен слайдер изображений с выводом энергообъектов «РусГидро» — ГЭС и ТЭЦ на фоне воды, присланных заказчиком:

6c7e9f607bf46c2db6dae14233a104ab.jpg

При нажатии кнопки «Узнать больше» пользователь переходит к следующему информационному блоку.

Информационный блок «РусГидро и вода»

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

89d26c0907c4088572451baa7810b5d9.jpg

Справа от блока реализована рубрика-«карусель» «А знаешь ли ты?» с познавательными фактами о воде. Пользователь самостоятельно «перелистывает» слайды с помощью навигационных стрелок.

321dd431a4d654d1e065a3b5940cfa91.png

Информационный блок «Что «РусГидро» делает с водой?» Далее следует информационный блок с двумя кликабельными вкладками — «Сохраняет» и «Осваивает». Под каждой вкладкой отображается информация о деятельности компании «РусГидро» в направлении сохранения/освоения воды в виде текста и интерактивного контента (фото, инфографика).

В раскрываемой вкладке «Сохраняет» содержатся 4 элемента:

1. Подраздел «оБЕРЕГАЙ» с функциональной кнопкой, ведущей на сайт благотворительной экологической акции «оБЕРЕГАЙ»:

88a88eaf6d8c87ee7451b7f443b08ac1.jpg

2. Подраздел «Зарыбление» — статистика по зарыблению за 2018 год, инфографика с разбивкой по видам рыб и рек:

292cf87f8ca6383736ef12e8f911e156.jpg

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

cdc58bbcf8ef8b9798e6486372fe257f.jpg

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

598d83981f8c7194524ad985f9fe6f8b.jpg

Соседняя вкладка «Осваивает» содержит один текстовый блок с информацией по освоению водных ресурсов.

Блок «Интересные факты о «РусГидро»

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

c66fd0c78a7d1374e7dc045df0d49243.jpg

Блок «Стена с постами пользователей из социальных сетей»

Особо хочется отметить работу наших специалистов в отношении процесса синхронизации промо-сайта с соцсетями.

Перед нами стояла задача интегрировать сайт промо-акции с социальными сетями «ВКонтакте», «Facebook», «Твиттер» и «Одноклассники». Согласно ТЗ, сообщения пользователей по определенным хештегам из социальных сетей должны подтягиваться на «стену» блока «Как РусГидро отмечает #ДеньВоды2019».

Для этой цели нами был разработан специализированный модуль для платформы 1С-Битрикс, который использует API социальных сетей для поиска публикаций пользователей с указанными хештегами (при этом администратор сайта может задать хештег (и) самостоятельно) и их выведения на сайте.

01de6e445ba59e952c573b3ab452ae1c.jpg

16a70ee74f318602db9a23a3a31f7149.jpg

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

771cfb9d59156f4dbdb1a4c76b322f42.png

Резиновая верстка

Одним из обязательных требований заказчика было удобство использования интернет-ресурса на устройствах независимо от разрешения их экрана.

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

dad9a068712c7bff623349c291966ca6.jpg

*Резиновая верстка сайта отличается от фиксированной верстки относительными размерами элементов веб-страницы (в процентном соотношении). То есть при резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера.

Итоги

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

На странице этому посвящено все:

  • Индивидуализированная информация. Информация специального назначения, раскрывающая суть социального проекта «День воды», направлена на формирование ответственного отношения к природным ресурсам и водосбережению.
  • Простая, интуитивно понятная навигация. Баланс между текстовым и визуальным контентом, четко продуманное структурирование информации по блокам и реализованное плавное перемещение по ним, удачно расставленные акценты — нашими специалистами созданы все условия для комфортного пребывания на странице.
  • Эмоциональная связь. Размещение на странице, ориентированной на экологическое просвещение, постов пользователей, участвующих в праздновании «Дня Воды» в социальных сетях, пробуждает и подогревает у посетителя интерес в отношении проекта. Хотите поучаствовать? Отметьте пост тегом!
  • Оптимизация под мобильные устройства. Страница удобна для навигации и просмотра на мобильных гаджетах.

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

На нашем сайте вы найдете еще больше кейсов, полезных материалов и отзывов — RuNetSoft

Перейти на сайт

Полный текст статьи читайте на CMS Magazine