13 примеров дизайна сайтов общественных организаций

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

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

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

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

Непросто было выбрать сайты общественных организаций для того, чтобы показать их вам. Каждая из них важна по-своему. Но нам нужно было сузить выбор, поэтому в качестве критерия для отбора мы руководствовались качеством UX/UI дизайна (и кстати, это была не самая простая задача). Итак, мы считаем лучшими сайтами общественных организация следующие:

Lewa House (Гостевой дом в Кении)

Lewa House — это гостевой дом в Кении, который принимает посетителей с 1970-х годов. Lewa House больше, чем просто туристический объект. В центре его внимания находится повышение осведомленности о диких животных, находящихся под угрозой исчезновения в Кении и в Африке в целом. Они учат людей жить в гармонии с природой, а также рассказывают о том, как обратить вспять опасные последствия браконьерства, эксплуатации дикой природы и пренебрежения окружающей средой. Веб-сайт прекрасно спроектирован и содержит множество интерактивных разделов. В первую очередь интерес представляет карта района, в котором расположен Lewa House. С помощью прокрутки и перетаскивания можно исследовать местность на карте. В цифровой форме сайт с помощью интересного рассказа и потрясающих визуальных эффектов раскрывает уникальную атмосферу Кении.

Listen and Donate («Слушай и жертвуй»)

Поне — французский музыкант и продюсер, который страдает болезнью Лу Герига или Боковым амиотрофическим склерозом (БАС). В 2019 году Поне совершил выдающийся подвиг: он записал и смикшировал студийный альбом, используя только глаза (единственное средство общения, которое оставила ему болезнь). Альбом называется «Слушай и пожертвуй». У него есть рекламный веб-сайт с таким же названием, который повышает осведомленность людей и собирает средства для работы патронажных служб. Как и сам Поне, этот веб-сайт просто невероятный. По нему можно перемещаться при помощи взгляда, если включить веб-камеру. Но он также предусматривает возможность обычной навигации с помощью мыши. В центре веб-сайта размещено видео глаза, которое следует за курсором по экрану. Оно также служит меню, из которого мы можем узнать невероятную историю Поне, заказать его альбом и сделать пожертвование в Trakadom, благотворительную организацию, которая финансирует программы обучения сиделок.

No Fishing («Нет рыболовным сетям»)

No Fishing — это онлайн-кампания эко-морской организации Sea Shepherd, созданная для повышения осведомленности об опасностях рыболовных сетей в океанах и сбора пожертвований на эту важную миссию. Сам проект и его веб-сайт невероятно крутые, они производят просто ВАУ-эффект. Сначала сайт знакомит посетителей со статистикой, которая свидетельствует о разрушительном влиянии рыболовных сетей на морскую жизнь во всем мире, а также о методах китобойного промысла и их катастрофических результатах. Далее мы отправляемся в кругосветное путешествие и видим корабли Sea Shepherd, которые помогают спасать морских животных. Их результаты по-настоящему впечатляют. 3D-объекты, интерактивность и, конечно же, мощное анимированное вступление точно вдохновят вас сделать пожертвование.

Fingerspelling («Язык жестов»)

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

At Glacier’s End («На краю ледника»)

Правда ли, что жизнь подражает искусству? Подражание также применимо и к природе. На нашей планете есть места, которые настолько сюрреалистичны и ошеломительны, что кажется, что они сошли с картин, коллажей или скульптур. В тот момент, когда американский фотограф-пейзажист Крис Буркард увидел исландские ледниковые реки, он понял, что должен внести вклад в их спасение. Дело в том, что невероятно красивые ледники и реки в Исландии находятся под угрозой, в частности из-за перекрытия дамбами для целей добычи алюминия. Чтобы помочь сохранить эти жемчужины природы, Буркард начал фотографировать их и снимать с высоты. Результатом стал потрясающий онлайн-проект под названием At Glacier’s End («На краю ледника»). Это кинематографический интерактивный сайт с потрясающими фотографиями и правильным балансом визуального и текстового контента. Впечатление от фотографий вызывает мгновенную реакцию, побуждая посетителя узнать, как помочь спасти сокровище Исландии (и всего мира), находящееся под угрозой исчезновения.

The Sea We Breathe («Море, которым мы дышим»)

Проект The Sea We Breathe, созданный фондом Blue Marine Foundation, представляет собой захватывающее онлайн-путешествие по Мировому океану, его течениям и экосистемам. Он рассказывает о влиянии изменения климата на морскую жизнь. Сайт начинается со страницы с медитативным звучанием, на которой нам предлагают сделать несколько глубоких вдохов вслед за нежным покачиванием волн. Дальше пользователь может погрузиться в океан и выбрать одно из направлений — Паутина Жизни в Океане, Защита подводного мира и «Джунгли моря» (прим. коралловые рифы). Каждое путешествие демонстрирует экологические проблемы, которые оказывают пагубное влияние не только на океаны и обитающих в них существ, но и на человека. Красиво анимированный, увлекательный, с захватывающими визуальными эффектами и прекрасно подобранной музыкой, «Море, которым мы дышим» — это проект, который никого не оставит равнодушным к судьбе океанов.

The Hiring Chain («Цепочка найма»)

The Hiring Chain — это замечательная кампания, которую осуществляет CoorDown, итальянский национальный координационный совет, созданный для помощи людям с синдромом Дауна. Поразительно простая концепция проекта действительно работает: нанимая человека с синдромом Дауна, вы даете ему шанс показать, что он ценный сотрудник. Этим вы вдохновляете других работодателей делать то же самое, формируя таким образом цепочку найма.

Посетитель начинает знакомство с сайтом, соединяя две руки вместе с помощью курсора мыши. Это является прекрасным символичным началом проекта, в основе которого лежат принципы солидарности и помощи. Далее следует полноэкранное видео, состоящее из короткого трогательного фильма о цепочке найма, с запоминающейся, воодушевляющей музыкой в исполнении Стинга. Оно рассказывает историю о том, как одна компания наняла человека с синдромом Дауна, а представители другой организации, увидев это, тоже захотели повторить этот опыт. Сайт доступен в двух режимах — с субтитрами на экране и без них. Благодаря музыке и типографике создана винтажная позитивная атмосфера, которая воодушевляет настолько, что вы еще несколько дней будете насвистывать мелодию Hiring Chain.

The Year of Greta («Год Греты»)

Грета Тунберг, одна из самых влиятельных активисток последнего десятилетия, а может быть, и столетия. Она стала представителем движения в защиту окружающей среды. В 2019 году Грета попала в список 100 самых влиятельных людей мира по версии журнала Time. Она выступала с докладом в Организации Объединенных Наций и признана «Человеком года» по версии журнала Time. Голландская творческая студия Superhero Cheesecake создала сайт под названием «Год Греты». Таким образом они выразили дань уважения этой молодой девушке, которая внесла огромный вклад в решение экологических проблем. На главной странице посетителя встречает трехмерная фигуры Греты, стоящей на скале, словно подвешенной в пустом пространстве. Начиная с участия в школьных забастовках, за год она стала международной активисткой-суперзвездой. Хронологию ее восхождения можно изучить, перетаскивая или прокручивая видео, которые погружают посетителя в эту историю. Независимо от того, знакомы ли посетители сайта с деятельностью Греты, к концу рассказа благодаря этому трогательному, честному проекту они остаются под впечатлением от ее самоотверженности, силы и стойкости.

Save Whales («Спасите китов»)

В чем-то похожий на проект The Sea We Breathe («Море, которым мы дышим»), Save Whales («Спасите китов») — это сайт, разработанный агентством Red Collar. В нем используются анимация, интерактивные элементы и превосходные цифровые изображения. Его цель состоит в том, чтобы повысить осведомленность о находящихся под угрозой исчезновения морских обитателях, в частности о пяти видах китов. На сайте представлены красивые переходы в виде набегающих волн, которые были созданы вручную. Еще одним впечатляющим элементом являются потрясающие 3D-модели китов, некоторые из которых было довольно сложно сделать, учитывая, что доступные изображения сильно отличались друг от друга. Впечатляет срок реализации проекта. Он был сделан всего за 14 дней. На сайте также есть практический раздел с рекомендациями и информацией о том, что каждый из нас может сделать, чтобы помочь этим величественным существам, которые находятся под угрозой исчезновения.

Stonewall Forever («Стоунволл навсегда»)

Стоунволлские бунты считаются поворотным моментом в истории освободительного движения ЛГБТ. В 1969 году ожесточенное столкновение между бунтовщиками, в основном покровителями и владельцами заведений для геев и лесбиянок в Гринвич-Виллидж, и полицией, проявившей жестокость во время мероприятия, стало причиной появления первых гей-парадов. Эта традиция живет по сей день во всем мире. Stonewall Forever — это сайт, созданный в качестве живого памятника этому событию, объединяющий активистов ЛГБТК, оглядывающихся назад и размышляющих о Stonewall и своих правах до и после беспорядков.

Веб-сайт был создан в качестве сопровождения одноименного документального фильма и содержит замечательную серию фотографий, рассказов и отзывов, разделенных на шесть глав. Он начинается с красивого 3D-изображения радуги, которая состоит из частиц, взмывающих в чистое голубое небо над знаменитым районом Нью-Йорка. Далее мы знакомимся с историей Стоунволла и развитием ЛГБТ-движения с помощью прекрасно анимированной навигации посредством перетаскивания и прокрутки, выбирая главы и погружаясь в замечательные истории старых и новых активистов. Это настоящий живой памятник борьбе и любви, которые являются неотъемлемой частью этого движения, представленный в цифровой форме.

Your Plan Your Planet («Твой план, твоя планета»)

Проект Your Plan Your Planet (Твой план, твоя планета) был создан при сотрудничестве Калифорнийской академии наук и Фонда Эллен Макартур. Он представляет собой проект Google в области устойчивого развития, целью которого является научить людей экономить воду, продовольствие и энергию, а также продлевать срок службы различных предметов личного использования и домашнего обихода. Проект разделен на четыре категории, каждая из которых содержит практические рекомендации по экономии энергии, воды, еды и пр. Факты и советы представлены в виде простых анимированных иллюстраций. Их можно скачать для использования в автономном режиме. Для поддержания интереса вы можете дать обещание следовать определенной рекомендации. Например, можно пообещать установить специальную насадку для душа с целью экономии воды. И даже поставить напоминание на случай, если вы забудете.

Blue Heart by Patagonia («Голубое сердце» Патагония)

Blue Heart («Голубое сердце») — проект известного бренда одежды и снаряжения для активного отдыха — Patagonia. Его цель заключается в том, чтобы повысить уровень осведомленности и защитить некоторые дикие реки Европы, особенно на Балканах. Если вам интересно, «дикие реки» — это большие, мощные реки, на которых нет плотины. Согласно проекту плотины вредны для рек: они мешают производить чистую энергию и вызывают экологические проблемы в близлежащих регионах. «Голубое сердце» — документальный фильм, посвященный крупнейшей нетронутой плотинами реке в Европе — албанской Вьосе. Веб-сайт проекта поразителен и прямолинеен — красивые полноэкранные изображения и умело расположенные призывы к действию предлагают посетителям узнать больше о проблеме, связанной с плотинами, посмотреть видео и, конечно же, принять непосредственное участие в её решении.

Restore Hope Appeal by Compassion («Вернем надежду». Ассоциация “Сострадание”)

Restore Hope Appeal («Вернем надежду») — это сайт по сбору средств, созданный австралийской христианской благотворительной организацией Compassion («Сострадание»). Она помогает пострадавшим из любых районов мира, где произошли стихийные бедствия. Они разделили главную страницу на два раздела: один с формой для пожертвований, а другой — с краткой информацией о цели сбора средств и ссылками на страницы, где можно узнать больше о пострадавших от наводнений, тайфунов, циклонов, нашествий саранчи и многих других стихийных бедствий, которые происходят в мире каждую минуту. Минималистичный и одновременно эффектный сайт, который отличается наличием прекрасных дизайнерских решений, является отличным средством сбора столь необходимых благотворительных средств.

Заключение

Мы посмотрели несколько действительно вдохновляющих примеров сайтов различных общественных организаций. В дизайне каждого из них использованы уникальные решения, которые улучшают впечатление о сайте и способствуют вовлечению аудитории. Анимация и взаимодействие являются обязательными элементами, так как они разрушают барьер между цифровым и физическим (или, по крайней мере, имитируют его преодоление), тем самым затягивая посетителей все глубже в пучину повествования. Грамотно расположенные и хорошо продуманные призывы к действию, высококачественные изображения, видео, музыка и звуковые эффекты, 3D-анимация — все это крайне важные элементы веб-сайта, целью которого является повышение осведомленности, продвижение деятельности и достижение конечной цели. Плоский, статичный дизайн хорош для баннеров протеста. Веб-дизайн — это глубина, взаимодействие и движение. На самом деле все сводится к сторителлингу. Чтобы вдохновить людей на оказание помощи, важно рассказать им захватывающую историю. При этом необходимо использовать все доступные средства, тщательно продумать их применение, чтобы сформировать уникальный голос призыва к действию, который невозможно не услышать.

Больше классных проектов в uprock.design

Источник:

Muzli - Design Inspiration