Розробка лендінгу для збору пожертв
Про проєкт
Після повномасштабного вторгнення російських військ в Україну активізувалася робота волонтерів у всіх куточках світу. До команди Webnauts звернулася учасниця Волонтерської команди Вадима Меліхова Наталя Сай, яка проживає в США. У неї була мета: допомогти волонтерам Харкова зібрати кошти на підтримку Збройних Сил України та допомогти людям, які залишилися жити в найнебезпечніших районах Харкова, які регулярно піддаються обстрілам і бомбардуванням.
З початку війни волонтери не припиняють:
- доставляти гуманітарну допомогу до Харкова;
- розподіляти та розносити продукти харчування людям, які живуть у будинках і бомбосховищах;
- доставляти людей, які потребують медичної допомоги, до лікарів або на головний вокзал для евакуації;
- готувати та передавати готову їжу воїнам ЗСУ, а також забезпечувати харчовими продуктами два військові офіси.
На момент звернення до нас волонтери відчували гостру потребу в фінансовій підтримці. Наша команда запропонувала швидке та оптимальне рішення — розробку лендінгу для збору пожертв волонтерам в Україні.
Завдання
Волонтерам потрібен був невеликий і зрозумілий користувачеві сайт, основна мета якого – збір коштів на потреби харків’ян і військових. Для цього нам необхідно було розповісти про існування самої волонтерської організації, про роботу, яку вони проводять, а також обов’язково забезпечити інтеграцію з платіжними системами. Таким чином, кожен, хто має можливість фінансово підтримати організацію, зміг би швидко і легко переказати кошти в будь-якій валюті, включно з різними видами криптовалюти, на рахунки членів організації.
Реалізація
Наша команда не роздумуючи відгукнулася на прохання Наталії та з великим ентузіазмом взялася за проєкт. У найкоротші терміни зверстали односторінковий сайт із застосуванням CSS / HTML / JS і мови PHP, з дизайном, що повністю відповідає попередньо відмальованому макету. А також зробили його адаптивним під всілякі мобільні пристрої.
Односторінковий сайт = посадкова сторінка = лендінг. Такий формат для сайтів, де відсутня розгалужена структура, сьогодні досить популярний. Усю інформацію вміщують на одну сторінку, і користувач переглядає її в рамках однієї сесії.
Вибір односторінника був обумовлений тим, що саме такий тип сайту дозволяє містко викласти важливу інформацію та зробити акцент на найважливішому. В нашому випадку — це пожертвування.
Створення дизайну
Оскільки тематика сайту пов’язана з війною та її наслідками, ми не стали мудрувати з дизайном, витрачаючи час на складності та вишуканості. З огляду на побажання замовника, намагалися, щоб сайт вийшов акуратним, зрозумілим і простим у використанні. Тому при розробці дизайну віддали перевагу простій і легкій стилістиці. Кольори сайту були підібрані з певним символізмом:
- білий — асоціювали з добром, яке несуть самовіддані волонтери,
- синій і жовтий — кольори українського прапора — як символ того, що допомога призначена народу України,
- а те, що сам сайт вийшов світлим і прозорим, говорить про такі ж наміри учасників організації та про те, що надана допомога буде доступна всім, хто так її потребує.
Весь односторінник умовно можна поділити на 7 невеликих блоків:
- «Волонтерська команда Вадима Меліхова» — короткий опис про те, чим займається команда,
- «Що ми робимо» — більш детальна розповідь про види допомоги, які надають волонтери,
- «Підтримати волонтерів», зробивши внесок — основний цільовий блок із кнопками платіжних систем для фінансової допомоги,
- «Галерея» — відмальована та реалізована з повним фото- та відеозвітом про роботу команди,
- «Тактичне спорядження» — своєрідний меседж від друзів-волонтерів із США із закликом зібрати допомогу українським військовим,
- «Допомога сім’ям біженців» — із закликом «Зв’язатися з нами» для надання допомоги сім’ям біженців із Харкова,
- «Команда волонтерів» — фотогалерея самовідданих і безстрашних членів команди Вадима Меліхова.
Розробка
Серверну частину сайту наші розробники написали за допомогою мови програмування PHP.
PHP — C-подібна скриптова мова загального призначення з відкритим вихідним кодом. Її використовують для створення динамічних вебресурсів і підтримують практично всі хостинг-провайдери. PHP код може впроваджуватися безпосередньо в HTML і має широкі можливості та великий набір вбудованих інструментів для розробки вебдодатків.
За допомогою простого редактора коду та стандартизованої мови розмітки HTML документів наші розробники наповнили шаблон, структуруючи контент на сторінці. І, використовуючи мову розмітки CSS, що використовується для візуального оформлення ресурсу, відформатували вміст сайту, зробивши його привабливим для користувачів. Також залучити збирач проєктів Gulp.
Gulp — це таск-менеджер, написаний мовою програмування JavaScript, що автоматизує завдання, які часто використовуються у веброзробці, допомагаючи тим самим прискорити процес розробки.
За допомогою цієї програми ми змогли досить швидко впорядкувати та перетворити набір окремих файлів на односторінковий сайт, логічно структурований і вибудуваний у секціях.
Мультимовність
Оскільки сайт спочатку був розрахований на українську та західну аудиторії, ми зробили його двомовним — всю необхідну інформацію користувач може прочитати українською або англійською мовою. В цьому випадку мультимовність ми реалізували шляхом створення двох сторінок різними мовами в рамках нашого сайту. Необхідну мову можна вибрати за допомогою перемикача у верхній частині вебресурс, поряд із меню.
Додавання форм для внесків
Основний блок проєкту знаходиться практично в центрі односторінника.
На синьому фоні розміщені білі великі кнопки, із зазначенням різних видів платіжних сервісів і посиланнями на форми для того, щоб пожертви можна було вносити в будь-якій валюті та зручними способами:
- Credit Card — оплата банківською картою,
- PayPal — найбільша дебетова електронна платіжна система, що забезпечує безконтактні платежі у 25-ти видах валют,
- Crypto — оплата криптовалютою. Тут ви можете в залежності від виду валюти скопіювати номер потрібного електронного гаманця, щоб зробити перерахування.
Підсумок
У результаті виконаної роботи ми в досить стислі терміни відмалювали та зверстали двомовний односторінковий сайт (лендінг) для збору пожертв одержувачам в Україні. Під’єднавши до нього платіжні системи, швидко реалізували завдання, поставлене замовником-волонтером. Цей функціонал уже показав свою ефективність і чудово впорався з покладеною місією: перші надходження не змусили себе довго чекати. Дякуємо всім і кожному, хто вірить в Україну та підтримує, чим може, в цей страшний для нашої країни час.
