Голос Ромні

Створені, щоб допомогти жінкам і дітям з ромської громади, які постраждали від війни.

Voice of Romni red logo

Країна

Україна

Роки співпраці

2023 - 2024

Індустрія

ГО

Тип проєкту

Вебсайт

Послуги

Веб розробка, UI/UX Дизайн

Технології

React, Next.js, SCSS, Payload CMS, MongoDB

Переглянути проєкт

Боротьба за права жінок і не тільки…

"Голос Ромні" - громадська організація, яка допомагає жінкам і дітям з ромської громади, що постраждали від війни. Вони активно підтримують і просувають гендерну рівність, рішуче виступають проти будь-яких форм насильства, особливо гендерно зумовленого.
Крім того, "Голос Ромні" надає підтримку жертвам насильства та працює над їхнім психологічним і правовим захистом. Вони також допомагають жінкам отримати економічні можливості, а дітям — доступ до освіти, терапії та логопедії.

Команда “Голос Ромні” створює надзвичайно великий вплив на захист прав жінок та їх підтримку, особливо під час повномасштабного вторгнення в Україну. 
Їх безпечні простори для жінок і дітей під назвою "Місце сили" працюють переважно у прифронтових районах, а також у кількох інших містах України. 

Ми були раді долучитися до великої місії команди “Голос Ромні”, та своєю працею допомогти досягати мети.

Voice of Romni red logo

Особливості дизайну

Так, так, як бачиш, UI/UX дизайн теж створили наші спеціалісти. Нашою стратегією була реалізація максимально зручного, інтерактивного та естетичного вебсайту. Використовуючи мінімум елементів, для збереження гармонії та простору на вебсайті ми створювали дизайн у компонентний спосіб.

Загалом, компонентна архітектура приходить на зміну монолітній архітектурі. І наша команда також підтримує цю стратегію. Крім того, модулі компонентного дизайну можна легко зберігати, дублювати та масштабувати без додаткових дизайнерських коригувань.

Ба більше — ми використовували ту ж саму техніку компонентної стратегії й в розробці. Так, так, ти зрозумів усе правильно, ми створили для наших клієнтів компоненти, які можуть бути використані контент-менеджерами у будь-який спосіб. Якщо вони захочуть продублювати один і той самий блок на різних сторінках — це більш ніж легко реалізувати, не залучаючи додаткової допомоги розробників. Та про це ми розповімо нижче у розділі про вибір технологій, залишилось геть трошки! 

Оскільки наш клієнт хотів мати можливість додавати нові сторінки на сайт, які, очевидно, будуть відображатися в шапці вебсайту — нам було потрібно найкраще рішення (і ніяк інакше). Ціллю стало поєднати креативність дизайну, доступність та зручність. Таким чином, ви можете бачити наш острівний хедер, до якого, додавши анімацію, ми створили чудовий інтерактивний елемент сайту.

Voice of Romni header

Насправді була все-таки одна проблема при реалізації дизайну.  Логотип нашого клієнта був достатньо масивним для використання на вебсторінках. Саме тому, ми вирішили використати повний логотип у хедері та лише текстовий логотип у футері. Таким чином, ми залишили багато простору на сайті, водночас задовольнивши потреби клієнта в брендингу організації.

Voice of Romni Footer

Що ж, ми проробили велику роботу над UI та UX в рамках нашого дизайну. Нашою метою було створити доступний, зручний і зрозумілий дизайн, орієнтований на різну аудиторію: від партнерів до людей, які потребують допомоги. І нам це вдалося.
Тепер давай перейдемо до нашого технічного вибору і розповімо більше про цю величезну і захопливу тему.

Вибір технологічного стеку

Сподіваємось, вас не здивувало, що ми знову написали код на технологіях TypeScript, Next.js та використовуємо Payload як CMS.

Про усі технології вказані вище ми ще поговоримо, та спочатку згадаймо, що допомогло нам створити якісний сайт без помилок і з чистим кодом. Sentry - безумовно, був правильним вибором. Цей трекер проблем допоміг нам перевірити, чи з'являються помилки на всіх типах пристроїв та при різних взаємодіях з інтернетом.

Щодо фреймворку — ми обрали React. Оскільки це швидкий, легкий та добре візуалізований фреймворк. Наші розробники також використовували Styled Components для створення кастомних компонентів у React.

Ми також використовували бібліотеку Framer, яка допомогла нам рендерити анімацію на сайті нашого клієнта. Варто також зазначити, що використання Framer motion у поєднанні з бібліотекою React Lenis дозволило нам створити плавну прокрутку сторінок з м'яким відображенням.

Панель керування контентом, або чому знову Payload

Так, ми знову обрали цю адмінпанель. Так само як і React, ця адмінпанель дозволяє розміщувати "Голос Ромні" де завгодно і дає незалежність від хостинг-провайдера. О, сам Payload також розроблений на технології React.

Крім того, Payload має дуже зрозумілий та простий інтерфейс навіть для недосвідчених користувачів. Ще одна фішка Payload - він може працювати в безсерверному середовищі. Таким чином, "Голос Ромні" не сплачує щомісячних платежів за свою адмінпанель, що є вагомою перевагою врегулювання коштів як для громадської організації.

SEO-стратегія.

Та як ми зберегли попередні результати "Голос Ромні"

Коли ми працюємо з кейсами, де ми розробляємо новий сайт, а клієнт вже мав свій сайт в минулому — ми завжди тримаємо руку на пульсі SEO.

Оскільки ми чудово розуміємо, наскільки важливо для бізнесу чи організації зберегти результати попередніх рекламних кампаній та SEO-досягнення на новому сайті.

Для "Голосу Ромні" ми зробили навіть більше — ми покращили їхнє SEO за допомогою наших технічних SEO-зобов'язань. Ви правильно зрозуміли — технічне SEO є обов'язковим, коли наша команда створює будь-який вебсайт. Ми включаємо цю частину кінцевого повноцінно функціонуючого вебсайт безпосередньо в нашу основну стратегію. Таким чином, ми зберігаємо всі попередні результати клієнта і допомагаємо зробити SEO його сайту ще кращим.

Чому соціально-важливі проєкти — наші невід'ємні партнери

Ти певне вже помітив, що це не перша наша соціально-важлива співпраця. Так, все тому, що ми зацікавлені допомагати проєктам, що чинять вплив.

Наша команда віддана ідеї застосуванню нашого досвіду в технологіях для того, щоб зробити значущі зміни в суспільстві. Як ІТ-компанія відчуваємо свою відповідальність про позитивний внесок у світ навколо нас шляхом реалізації онлайн проєктів.
Ось чому ми активно шукаємо та беремо участь в ініціативах, що розв'язують соціальні проблеми.

О, а ще, працювати з людьми, у котрих горять очі до змін та котрі палають жагою створити щось — так само запалює й нас до більшого.

Особливу увагу Zapal приділяє українським проєктам, та тим, що пов'язані з підтримкою України, поширенням української культури та історії. І по секрету скажемо, що незабаром буде ще один соціально важливий проєкти..
Повір, ти будеш шокований, в хорошому сенсі!

Важливо також зазначити, що ми не просто створюємо проєкти та прощаємось. Напрочуд ні. Ми завжди раді підтримувати наших партнерів і надалі, адже віримо, що довгострокові партнерства працюють найкраще.

Не перемикай, ми створюємо багато особливого та значущого наших ресурсів та досвіду допомагаємо вирішувати суспільні виклики, підтримуємо інклюзивності та просування соціальної справедливості.
Та до зустрічі уже зовсім скоро на сторінці нашого наступного проєкту!

Voice of Romni and Zapal  colab post

Досягни успіху разом з Zapal

Ivan Salata

Іван Салата

Операційний директор

Бачу, що тебе вразив кейс нашої команди. Ми готові робити перші кроки до твого блискавичного проєкту вже сьогодні. А ти?

Заплануй зустріч Або Напиши нам