лендинг о глобальной экологической проблеме
мусор
Задача
Показать масштаб глобальной мусорной проблемы и показать способы ее решения, используя визуальные элементы и необычную анимацию.
О проекте
Проект создан в рамках прохождения курса по креативной верстке от Ани Мельник и Саши Васильева. Задача была — создать информативный лендинг на любую тематику.
Я много слышала о мусорной проблеме, поэтому начала развивать идеи вокруг нее. Сначала я нашла инфо о музее мусора — люди дают мусору вторую жизнь и создают интересные скульптуры. Меня вдохновил такой подход к переработке мусора, и я решила сделать сайт, посвященный таким скульптурам.
{первый концепт}
Спустя какое-то время меня перестала удовлетворять эта идея, я решила ее усилить.
Так мне пришла идея создать лендинг, который будет побуждать людей внести свой вклад в решение глобальной мусорной проблемы
Мне хотелось показать, что каждый человек такими простыми действиями как снижение потребления товаров, сортировка мусора, переоценка своей потребительской активности вносит свой вклад в решение глобальной проблемы.
Анализ и структура
Так как проект вероятнее всего, будет социальный, необходимо сразу же привлечь внимание посетителя и постепенно погружать его в контекст проблемы. В начале повествования использую статистические данные — показываю масштаб проблемы, далее яркие визуальные элементы и сложную анимацию для привлечения внимания.

Я спроектировала несколько этапов донесения информации до аудитории:

  1. На главный экран выношу главное послание — здесь ты узнаешь о способах, которые помогут решить глобальную мусорную проблему.
  2. Вводим в контекст проблемы — приводим статистические показатели о количестве выброшенного мусора в день.
  3. Усиливаю восприятие проблемы — указываю на риски, которые получит каждый человек, если не начнет принимать действия по решению проблемы.
  4. Рассказываю какие пути есть у нашего мусора. (В каждом из них описываю риски, вызываемые мусором, как объектом, загрязняющим среду, и тем самым подчеркиваю, что просто выбрасывать мусор недостаточно).
  5. Привожу способы решения проблемы на конкретных понятных каждому примерах
  6. Формирую 5 простых действий, которые каждый человек может внедрить в свою жизнь уже сейчас, для того чтобы спасти окружающую среду.
  7. Утверждаю, что наша сила в объединении усилий)
Дизайн решения
В основу дизайна сайта я решила заложить метафору упаковки и использовать ее для передачи смыслов. Текстура пластиковых упаковок, трафареты, наклейки, линии отрыва, символы переработки и транспортировки хорошо отобразят идеи проекта и свяжут с контекстом сообщения, которое я передаю посетителю.
{референсы упаковки}
Для четкого восприятия контента пользователем я решила использовать крупную типографику. Статистические данные оформлять в таблицы — это вяжется и с идеей упаковки и подчеркивает важность данных.
В качестве ключевого бекграунда сайта выбрала текстуру пластиковой упаковки. А блоки сайта будут оформлены в виде транспортных наклеек на этой самой упаковке.
{наброски композиции}
дизайн-концепт сайтадизайн-макет сайта
Цвет сайта выбран неслучайно — ярко-оранжевый. Неприятный, что он режет глаз. Эта идея подчеркивает дискомфорт проблемы мусора как явления.
Текст сложно читать, но за счет приемов композиции и анимации все же хочется это сделать.

Первоначально была идея создать дизайн всего сайта с использованием этого одного фона. Но такое цветовое решение сохраняет эмоциональное напряжение на протяжении всего повествования. А мне бы хотелось создать его только в нужных местах — когда я говорю о проблеме. Далее нужно показать посетителю, что проблема решаема, и успокоить его.
Поэтому я решила разбить сайт на 2 основные части (как по повествованию так и по цветовому решению):
  1. Демонстрация остроты проблемы и ее резонансности. Это создает эмоциональный накал.
  2. Способы решения проблемы, сделаю ее более приятной для восприятия. Это успокаивает и оставляет приятное впечатление от сайта
{связь эмоционального и визуального восприятия}
Иллюстрации
Визуальные инструменты, выбранные мною раннее — иконки, четкая типографика и простые прямоугольные формы на фоне контента создают очень четкую визуальную структуру. Поэтому для иллюстраций я выбрала свободный небрежный стиль «от руки». Это отлично подходит к теме мусора, которая также являет собой некий хаос)
иллюстрации к сайту
иллюстрации к сайту
Анимация
Главный акцент в анимации сделан на блок с максимальным эмоциональным напряжением и фразой «закрывать глаза — на выход». Такое решение помогает держать внимание пользователя на максимуме и доносит главную мысль проекта.

Иллюстрации мусора анимированы циклично и двигаются в обе стороны от своего центра, создавая назойливый эффект и надоедая зрителю, как и сам мусор))

Дополнительные элементы и стикеры появляются с разных сторон и наклеиваются на лендинг, словно наклейки.
{фрагмент анимации сайта}
Страница 404
Сортировка мусора сделана отдельной страницей для того, чтобы не сбивать пользователя с повествования и не дать потерять нить повествования. К тому же, случайно допустив ошибку в адресе сайта пользователя ждет такая неожиданность)

На десктопной версии сортировка возможна с помощью перетягивания элементов по категориям, а на мобильной — при нажатии на элемент он сам попадает в нужный сегмент.
{фрагмент анимации сайта}
Результат
Проект получил широкий охват и большой резонанс в сообществе, ушел за пределы моей личной аудитории и стал объектом одобрения у специалистов мусороперерабатывающих организаций и дизайнеров.
{соцсети и слова людей о проекте}
Награды
Сайт получил международные профессиональные премии в области дизайна на таких платформах как Awwwards и CSS Design Awards. А также попал в подборку лучших проектов, созданных в рамках фреймворка Tilda Publishing.
{SITE OF THE DAY DESIGN AWWWARDS}
{SITE OF THE DAY CSS DESIGN AWWWARDS}
{MADE ON TILDA}
Сайт доступен по ссылке – mooosor.ru
Если вас заинтересовал мой подход к работе, мои идеи и способы их реализации — напишите мне))
Made on
Tilda