Сайт благодійної організації
Про проєкт і задачі
Бути причетними до розробки подібних сайтів викликає в нас неабияке задоволення. Криворізька благодійна організація «Благодійний фонд “Час чистого довкілля”» зібрала навколо себе велику команду в обличчі проджект-менеджера, дизайнера, розробника та копірайтера. Все для того, аби створити зручний мінімалістичний сайт, що викликає довіру суспільства, з функціями мультимовності та здійснення платежів.
Унікальний дизайн
До проєкту були залучені графічний і вебдизайнер, які паралельно займалися розробкою логотипа та проєктуванням сайту.
Логотип
Редизайн логотипа — необхідне рішення, за яким стоїть не просто графічний образ організації, а вся багатогранність її діяльності. Оскільки благодійний фонд охоплює декілька напрямків (серед яких охорона здоров’я, розбудова громад, соціальні та гуманітарні програми), ми втілили це у формі чотирипелюсткової квітки.
Було:
Стало:
Зелений колір логотипа підкреслює назву благодійного фонду й асоціюється з природою, життєвою силою та достатком. Заокруглені кути та плавний градієнт від світло- до темно-зеленого відтінку додають логотипу об’єму, м’якості та гармонійності.
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 з продуманою та лаконічною формою оплати на першому екрані сайту значно спрощує збір донатів. Функція мультимовності теж істотно розширює радіус дії благодійництва далеко за межі України, зокрема на польсько- та англомовних користувачів.
