Сайт благотворительной организации
О проекте и задаче
Нашей команде нравится создавать сайты для благотворительных организаций и фондов. Криворожская благотворительный фонд «Час чистого довкілля» собрала вокруг себя большую команду в лице проджект-менеджера, дизайнера, разработчика и копирайтера. Все для того, чтобы создать удобный минималистичный сайт, вызывающий доверие общества, с функциями мультиязычности и осуществления платежей.
Уникальный дизайн
Над проектом работали графический и веб-дизайнер, которые параллельно занимались разработкой логотипа и проектированием сайта.
Логотип
Редизайн логотипа — решение, за которым стоит не просто графический образ организации, а вся многогранность её деятельности. Поскольку благотворительный фонд охватывает несколько направлений (среди которых здравоохранение, развитие общин, социальные и гуманитарные программы), мы воплотили это в форме четырёхлепесткового цветка.
Было:
Стало:
Зеленый цвет логотипа подчеркивает название благотворительного фонда и ассоциируется с природой, жизненной силой и достатком. Округленные углы и плавный градиент от светло- до тёмно-зеленого оттенка придают логотипу объёма, мягкости и гармоничности.
UI/UX дизайн
Создавая UI/UX дизайн для благотворительной организации, мы сделали ставку на минимализм. Мягкий характер сайта проявляется в округлости не только элементов (кнопок, фотографий и карточек), но и букв шрифта Comfortaa. Благодаря структурированности и сбалансированности функциональных блоков весь массив контента легко воспринимается, а каждый элемент на сайте довольствуется достаточным визуальным пространством. Плавная микроанимация добавляет сайту жизни и динамики, а спокойная гамма цветов во главе с сочным зеленым ещё сильнее подчеркивает экологичность, заботу и доброту организации.
Разработка на WordPress
Интерактивный интерфейс
В основе разработки сайта благотворительной организации лежит самая популярная в мире платформа — WordPress. Правда, она не совсем стандартная, а адаптирована под оригинальный дизайн-концепт от нашей UI/UX команды. Разработчик превратил дизайнерские макеты в осязаемый интерактивный продукт благодаря следующим инструментам:
- Grid и Flexbox — CSS макеты, обеспечивающие грамотную верстку сайта, адаптируемого под размер экрана любого устройства.
- Swiper — мобильный сенсорный слайдер.
- Locomotive Scroll — библиотека, обеспечивающая плавную прокрутку элементов сайта с эффектом параллакса. Дополнительно мы применили кастомные функции разделения текста на строки и таким образом обошлись без платного плагина от JavaScript-библиотеки GSAP.
Административная панель
В разработке программно-административной части сайта мы использовали несколько важных плагинов.
- ACF (Advanced Custom Fields) — для создания полей к экранам редактирования WordPress.
- CF7 (Contact Form 7) — для управления контактными формами:
- reCaptcha 3 — технология для защиты от спама, которую мы подключили через интеграцию с плагином CF7:
- WP Mail SMTP by WPForms — для отправки форм через стандарт пересылки электронной почты SMTP (Simple Mail Transfer Protocol):
- Smush — для оптимизации изображений на сайте:
Кроме того на странице «Контакты» мы реализовали возможность добавлять интерактивную Google-карту двумя способами: через код iframe и через API Google Maps.
Как результат — удобная админ-панель, позволяющая клиенту легко и быстро управлять сайтом: редактировать тексты, загружать фото, добавлять контент на разных языках и т. д.
Кстати, о языках…
Мультиязычность
У сайта есть 3 языковые версии: украинская, польская и английская. Такое решение вполне понятно: чем большую аудиторию охватит благотворительный фонд, тем больше донатов он сможет аккумулировать.
В этом проекте мы отказались от автоматического перевода. Да, это стоит дополнительных средств на профессиональный перевод контента, однако когда речь идет о создании положительного имиджа организации, вызывающей чувство доверия, надежности и причастности к доброму делу, отбрасываются любые компромиссы. Тем более если главный инструмент взаимодействия с обществом — это контент, отображенный на сайте.
Технически функция мультиязычности была реализована через плагин Polylang:
Автоматический перевод осуществляется только в пределах административной панели, невидимой пользователям. Для этого мы применили ещё один плагин Loco Translate, отвечающий за перевод строк внутри админки WordPress:
Интеграция платёжной системы
Чтобы интегрировать сайт с платежной системой LiqPay, мы написали кастомную функцию и добавили в админку сайта ACF-поля для ввода ключей (частный, публичный):
Кроме того мы реализовали возможность выбора доната на произвольную сумму прямо в форме оплаты:
Текстовое наполнение
Лучше дизайна говорит разве что текст. Так, перед копирайтером Webnauts встала задача лаконично и в то же время содержательно рассказать историю организации, раскрыть её миссию и основные направления деятельности. Словом, донести информацию так, чтобы через текст транслировалось чувство доверия и надежности, в частности, преданность своему делу всех участников организации и волонтеров благотворительного фонда.
Итоги
Разработанный на WordPress, выдержанный в лучших традициях минимализма и наполненный только важной пользователю информацией, сайт благотворительной организации излучает абсолютную уверенность и надежность. Интегрированная платежная система LiqPay с продуманной и лаконичной формой оплаты на первом экране значительно упрощает сбор донатов. Функция мультиязычности также существенно расширяет радиус действия благотворительности далеко за пределы Украины, в частности, на польско- и англоязычных пользователей.
