Landing page социального проекта "День воды" для ПАО "РусГидро"
О социальном проекте «День воды»
Социальный проект под названием «День воды» направлен на формирование ответственного отношения к природным ресурсам и водосбережению. Он ежегодно реализуется во всех регионах присутствия РусГидро — от Северного Кавказа до Дальнего Востока — и приурочен к празднованию Всемирного дня водных ресурсов, в рамках которого филиалы холдинга проводят различные эколого-просветительские акции и мероприятия.
Исходные данные — основа эффективного лендинга
Заказчик подробно заполнил бриф на разработку страницы, указав пожелания к структуре, дизайну и навигации. Согласно брифу, на странице должны быть представлены следующие ключевые блоки:
- Шапка сайта, включающая следующие элементы: слайд-шоу энергообъектов «РусГидро», фирменный логотип холдинга, название страницы — «День воды с РусГидро» и небольшой текстовый блок с информацией.
- 2 информационных блока: «РусГидро и вода», «Что РусГидро делает с водой?».
- Блок «Интересные факты о РусГидро».
- Блок «Стена с постами пользователей из социальных сетей»
- Футер (подвал сайта), содержащий советы по сбережению водных ресурсов.
Получив бриф, наши специалисты разработали общую концепцию проекта и, по согласованию с заказчиком, приступили к реализации дизайн-макета промо-сайта «День воды».
В основу построения юзабилити сайта легла качественная и удобная система навигации. Она обеспечивает простой и быстрый переход ко всем информационным блокам, чтобы пользователь мог проводить время на сайте с максимальным удобством и пользой для себя.
Элементы дизайна и их блоки организованы и расположены на странице таким образом, что на сайте не создается эффекта нагромождения и пестроты.
Верхнее горизонтальное меню — перемещение на нужную часть лендинга
Для удобного, плавного перемещения пользователя на нужную часть лендинга, наши разработчики реализовали функцию «якорь», которая значительно упрощает навигацию по странице с большим числом прокруток. Благодаря этому пользователь может переключаться между блоками в один клик, выбирать последовательность изучения информации, а также избежать долгих поисков на странице.
В шапку сайта встроен слайдер изображений с выводом энергообъектов «РусГидро» — ГЭС и ТЭЦ на фоне воды, присланных заказчиком:
При нажатии кнопки «Узнать больше» пользователь переходит к следующему информационному блоку.
Информационный блок «РусГидро и вода»
Первым в структуре сайта следует текстовый блок с информацией о том, что такое «День воды» и почему компания его отмечает, а также об использовании компанией водных ресурсов.
Справа от блока реализована рубрика-«карусель» «А знаешь ли ты?» с познавательными фактами о воде. Пользователь самостоятельно «перелистывает» слайды с помощью навигационных стрелок.
Информационный блок «Что «РусГидро» делает с водой?» Далее следует информационный блок с двумя кликабельными вкладками — «Сохраняет» и «Осваивает». Под каждой вкладкой отображается информация о деятельности компании «РусГидро» в направлении сохранения/освоения воды в виде текста и интерактивного контента (фото, инфографика).
В раскрываемой вкладке «Сохраняет» содержатся 4 элемента:
1. Подраздел «оБЕРЕГАЙ» с функциональной кнопкой, ведущей на сайт благотворительной экологической акции «оБЕРЕГАЙ»:
2. Подраздел «Зарыбление» — статистика по зарыблению за 2018 год, инфографика с разбивкой по видам рыб и рек:
3. Подраздел «Экология» с функциональной кнопкой «Экологическая политика «РусГидро», ведущей в раздел головного сайта «РусГидро», описывающий деятельность компании в области охраны окружающей среды и природопользования.
4. Подраздел «Уроки воды» с информацией о местах проведения, целях и количестве образовательных уроков по сбережению водных ресурсов, проведенных компанией «РусГидро в 2018 году.
Соседняя вкладка «Осваивает» содержит один текстовый блок с информацией по освоению водных ресурсов.
Блок «Интересные факты о «РусГидро»
Далее представлен блок с интересными фактами о деятельности/объектах компании. Они отображаются в автоматически вращающейся «карусели». Пользователь может и самостоятельно «перелистывать» слайды с помощью навигационных стрелок.
Блок «Стена с постами пользователей из социальных сетей»
Особо хочется отметить работу наших специалистов в отношении процесса синхронизации промо-сайта с соцсетями.
Перед нами стояла задача интегрировать сайт промо-акции с социальными сетями «ВКонтакте», «Facebook», «Твиттер» и «Одноклассники». Согласно ТЗ, сообщения пользователей по определенным хештегам из социальных сетей должны подтягиваться на «стену» блока «Как РусГидро отмечает #ДеньВоды2019».
Для этой цели нами был разработан специализированный модуль для платформы 1С-Битрикс, который использует API социальных сетей для поиска публикаций пользователей с указанными хештегами (при этом администратор сайта может задать хештег (и) самостоятельно) и их выведения на сайте.
Таким образом, в настоящее время на сайте реализована возможность автоматически выводить посты людей, которые указали нужный нам тег. Благодаря этому пользователи стали еще активнее делиться публикациями в социальных сетях, а люди, пришедшие на сайт, впервые узнали о масштабах акции и поддержке её обществом.
Резиновая верстка
Одним из обязательных требований заказчика было удобство использования интернет-ресурса на устройствах независимо от разрешения их экрана.
Для решения этой задачи нашими специалистами была использована резиновая верстка с ограничениями, включающая в себя все основные разрешения экрана, в том числе мобильные.
*Резиновая верстка сайта отличается от фиксированной верстки относительными размерами элементов веб-страницы (в процентном соотношении). То есть при резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера.
Итоги
Цели и задачи этого лендинга — экологическое просвещение и привлечение внимания общественности к проблемам сохранения водных ресурсов, а также обеспечение информационной открытости и доступности деятельности ПАО «РусГидро», посвященной данному направлению.
На странице этому посвящено все:
- Индивидуализированная информация. Информация специального назначения, раскрывающая суть социального проекта «День воды», направлена на формирование ответственного отношения к природным ресурсам и водосбережению.
- Простая, интуитивно понятная навигация. Баланс между текстовым и визуальным контентом, четко продуманное структурирование информации по блокам и реализованное плавное перемещение по ним, удачно расставленные акценты — нашими специалистами созданы все условия для комфортного пребывания на странице.
- Эмоциональная связь. Размещение на странице, ориентированной на экологическое просвещение, постов пользователей, участвующих в праздновании «Дня Воды» в социальных сетях, пробуждает и подогревает у посетителя интерес в отношении проекта. Хотите поучаствовать? Отметьте пост тегом!
- Оптимизация под мобильные устройства. Страница удобна для навигации и просмотра на мобильных гаджетах.
Заказчик остался доволен не только качественным конечным результатом, но и самим ходом нашей работы. Все возникающие в этой связи проблемы решались оперативно и успешно, а требования заказчика были выполнены на все сто процентов!
На нашем сайте вы найдете еще больше кейсов, полезных материалов и отзывов — RuNetSoft
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
