Сайт некомерційної організації
Тішимося, що ще один благодійний фонд обзавівся власним сайтом. Як звичайно буває, некомерційні організації нагально потребують інтернет-присутності, проте часто обмежені в ресурсах. Однак якщо українським волонтерам під силу майже все, то що тоді говорити про айтівців? Поки благодійництво рухає країну, ми рухаємо благодійництво. А кінцевою точкою нашого маршруту став акуратний і привабливий сайт на платформі WordPress.
Про проєкт і завдання
Історія співпраці з благодійним фондом «Rishuchi» почалася з доволі буденного завдання — допрацювати сайт, започаткований власними силами волонтерів на простому конструкторі . Але згодом дизайн, вписаний у готовий , не виправдав очікувань клієнта, тим паче напередодні ребрендингу. Така вона, ціна за простоту використання платформи без коду. Вся річ у тому, що класичний редактор не дозволяє змінювати шаблон, тому персоналізувати сайт на WIX доволі складно. Тоді ми запропонували клієнту закласти сайт на більш дорослу технологію WordPress, яка має ширші можливості з налаштування готових тем.
Отже, сайт організації мав стати приємним місцем для знайомства з командою та діяльністю волонтерів і, звичайно, для фінансової підтримки благодійних ініціатив. Очікуваний результат — це простий, зручний і людяний сайт БО у новому фірмовому стилі фонду:
Читайте також:
Розробка лендингу для збору донатівВерстка сайту
Благодійним фондам з обмеженим бюджетом зовсім не обов’язково йти на компроміс щодо розробки функціонального та привабливого сайту. Каталог WordPress пропонує не лише безліч безплатних тем, а й спеціальні плагіни-конструктори сторінок з готовими шаблонами та віджетами. За основу для нашого сайту ми взяли одну з таких , запропоновану плагіном :
Дизайн та структура сайту
Невелика ремарка: команду благодійного фонду складають суто творчі люди — столичні фото- та відеографи, які почали висвітлювати свою діяльність в через глибокі світлини та вичерпні відеозвіти. Тому для волонтерів було важливо, щоб Головна сторінка сайту зустрічала користувачів фоновим відео актуального благодійного проєкту. Наразі це відеокадри старої теплиці школи-інтернату, що потребує донатів на відновлення після російських обстрілів.
Меню навігації полегшує доступ до контактів і головних розділів сайту, а також дублює кнопку із закликом задонатити:
Другий екран конкретизує діяльність організації у вигляді лаконічних карток, які після наведення курсора можуть розповісти більше.
Треба сказати, що головна сторінка часто являє собою скорочену версію всього сайту. Так, відповідна кнопка в блоці «Хто ми» дозволяє продовжити знайомство з фондом на окремій сторінці Про нас. Вона своєю чергою містить коротку довідку про фонд і його місію, а також ілюструє його історію у вигляді невеличкої хроніки. Далі сторінка знайомить користувачів з цілями фонду та людьми, які щоденно працюють для їх досягнення:
Інформація про діяльність Рішучих представлена у вигляді структурованого блоку та цифр організації. Звідси можна потрапити на сторінку Проєкти, що має вигляд списку благодійних ініціатив, які можна легко відфільтрувати за напрямком. Тут же міститься мініблок «Інші проєкти» та віджет-нагадування про фінансову підтримку. Кожна картка своєю чергою переносить користувача на окрему сторінку з описом, фото та відео проєкту, який можна прокоментувати та поширити в соціальних мережах:
Головна сторінка продовжує розповідати про благодійні плани фонду. Так, у наступному блоці ми вирішили привернути додаткову увагу до нагального проєкту, реалізація якого вимагає значних коштів. Для цього ми використали фото вихованців школи-інтернату, для навчальних потреб яких організовано збір; структурований текст про особливості проєкту та додаткові посилання на документ і відеоролик з презентацією:
Наступною зупинкою на шляху користувача є компактний блок, який знайомить з місією благодійної організації, «цитує» її співзасновників та ілюструє гуманітарний напрям діяльності. Наступний блок розкриває роботу фонду: окреслює конкретні проєкти та дає можливість дізнатися більше про кожен з них на окремій сторінці:
Зважаючи на те, що волонтери активно висвітлюють свою діяльність в Instagram і не мають часу на наповнення сайту, ми відмовились від новинної сторінки та реалізували відповідний блок з посиланням на обліковий запис фонду:
Наприкінці Головної сторінки знаходиться блок із закликом до співпраці та кнопкою, що переносить користувача на сторінку Контакти. Остання також містить у собі контактну форму для пропозицій про співпрацю чи запитів про допомогу.
Завершальний акорд сайту — це «зібраний» і виразний футер зі звичними лого, контактами, посиланнями на внутрішні сторінки й соціальні мережі, та закликом і кнопкою «Допомогти»:
Адаптивність сайту
Ми не можемо ігнорувати той факт, що 70% українців користуються інтернетом з мобільних пристроїв. А тому подбали про адаптивність теми WordPress не лише під ПК і ноутбуки, а й смартфони та планшети:
Функціональність
Налаштування зовнішнього вигляду сайту було б набагато складнішим без спеціальних доповнень WordPress — плагінів, а саме візуального конструктора Elementor, конструктора полів Advanced Custom Fields і контактних форм Contact Form 7.
Далі ми поєднали привабливий дизайн з технічною функціональністю, зокрема:
- захистили сайт від спаму завдяки плагіну Akismet Anti-spam,
- пришвидшили завантаження сторінок через технологію кешування WP Super Cache,
- оптимізували сайт за допомогою плагіну Yoast SEO, щоб підвищити його видимість у Google.
Наповнення контентом
Якщо фірмовий дизайн сайту — це обличчя фонду, то контент є органічним продовженням місії волонтерів: бути рішучими у своїй доброті. Кожен заголовок і розділ сторінки транслює цінності організації через унікальні фото, відео та текст. Увесь контент представлений просто, доступно та щиро, тому здатний викликати довіру суспільства та інтерес потенційних партнерів.
Результат
Сайт благодійного фонду «Rishuchi» є чудовим прикладом бюджетної розробки на WordPress. Акуратний адаптивний макет, вписаний у фірмовий стиль волонтерської організації та наповнений унікальними світлинами та текстами, покликаний об’єднати зусилля українців для українців: акумулювати кошти на важливі благодійні проєкти та розширювати коло партнерів для організації різних благодійних заходів.
Комментарии