мусор

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

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

Спустя какое-то время меня перестала удовлетворять эта идея, я решила ее усилить.

Так мне пришла идея создать лендинг, который будет побуждать людей внести свой вклад в решение глобальной мусорной проблемы

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

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

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

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

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

Для четкого восприятия контента пользователем я решила использовать крупную типографику. Статистические данные оформлять в таблицы — это вяжется и с идеей упаковки и подчеркивает важность данных.
В качестве ключевого бекграунда сайта выбрала текстуру пластиковой упаковки. А блоки сайта будут оформлены в виде транспортных наклеек на этой самой упаковке.

Цвет сайта выбран неслучайно — ярко-оранжевый. Неприятный, что он режет глаз. Эта идея подчеркивает дискомфорт проблемы мусора как явления.

Текст сложно читать, но за счет приемов композиции и анимации все же хочется это сделать.

Первоначально была идея создать дизайн всего сайта с использованием этого одного фона. Но такое цветовое решение сохраняет эмоциональное напряжение на протяжении всего повествования. А мне бы хотелось создать его только в нужных местах — когда я говорю о проблеме. Далее нужно показать посетителю, что проблема решаема, и успокоить его.
Поэтому я решила разбить сайт на 2 основные части (как по повествованию так и по цветовому решению):

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

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

Главный акцент в анимации сделан на блок с максимальным эмоциональным напряжением и фразой «закрывать глаза — на выход». Такое решение помогает держать внимание пользователя на максимуме и доносит главную мысль проекта.

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

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

Сортировка мусора сделана отдельной страницей для того, чтобы не сбивать пользователя с повествования и не дать потерять нить повествования. К тому же, случайно допустив ошибку в адресе сайта пользователя ждет такая неожиданность)

На десктопной версии сортировка возможна с помощью перетягивания элементов по категориям, а на мобильной — при нажатии на элемент он сам попадает в нужный сегмент.

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

Сайт получил международные профессиональные премии в области дизайна на таких платформах как Awwwards и CSS Design Awards. А также попал в подборку лучших проектов, созданных в рамках фреймворка Tilda Publishing.