Для Координаційної групи Спільної Платформи

Ваш сайт:
з чого складається
і що вирішуємо

Це прототип. Пройдіть презентацію командою й зафіксуйте рішення — по бренду та по кожному блоку. Клікайте варіанти, щоб обрати; наприкінці буде зведення, яке можна скопіювати й надіслати.

Клік по варіанту — обрати · стрілки / крапки / клік по вільному місцю — навігація

Як читати

Шість типів рішень

Далі біля кожного пункту стоятимуть такі позначки — вони кажуть, що саме від вас потрібно.

🎨 Колір

Палітра бренду.

🅰️ Шрифти

Типографіка, характер тексту.

🖼️ Візуал

Фото, ілюстрації, іконки.

🧩 Структура

Компонування блоку.

✍️ Інформація

Тексти та їх підтвердження.

🔗 Матеріали

Лого, контакти, посилання.

Спочатку — бренд

Бренд задає все інше

Перш ніж блоки — п'ять «великих» змінних. Вони визначають, як сайт виглядатиме й звучатиме. Наступні слайди — по кожній.

🎨 Кольори

Палітра — ваша, з нуля.

🅰️ Шрифти

Характер типографіки.

🖼️ Візуал

Фото / графіка / мінімум.

🎭 Тон

Як звучимо: стримано? наполегливо?

🔤 Логотип

Знак і накреслення назви.

🎨 Колір

Кольори бренду — ваше рішення

Ви не обмежені трьома темами прототипу. Ваша задача — визначити палітру в принципі. Ось напрями для натхнення (можна взяти будь-який, змішати чи запропонувати свій):

Тепла гідністьпапір · ембер · смарагд
Смілива діяніч · червоний · білий
Надія та волянебо · золото
Сила · нічвугілля · корал · бурштин
Земля · спокійолива · вохра
Світанокбузок · троянда

⏳ вирішити  основний колір, акцент, світла/темна основа, загальний настрій.

🅰️ Шрифти

Типографіка — характер голосу

Оберіть напрям накреслення. Ось приклади живими шрифтами:

Взаємодія. Вплив. Воля
Ґротеск-сміливий (Bricolage) — сучасно, впевнено
Взаємодія. Вплив. Воля
Серіф-видання (Fraunces) — вагомо, людяно
Взаємодія. Вплив. Воля
Гуманістичний (Inter) — просто, дружньо
Взаємодія. Вплив. Воля
Технологічний (Space Grotesk) — чітко, сучасно

⏳ вирішити  напрям для заголовків (текст лишиться простим і читабельним).

🖼️ Візуал

Візуальна мова

Чим наповнюємо — фото, графіка чи мінімалізм? Це сильно змінює відчуття.

📷 Фотографії
Реальні люди/події — тепло, документально. Треба фотоматеріали.
🎨 Графіка / ілюстрації
Гнучко, без фото — форми, іконки, кольори.
◻️ Мінімум
Типографіка + колір, майже без зображень. Стримано.

⏳ вирішити  + якщо фото — надати знімки; якщо графіка — стиль іконок.

🎭 Тон

Тон комунікації

Як звучимо в текстах? Це впливає на всі формулювання.

🕊️ Стримано-гідно
Спокійно, вагомо, без пафосу. Довіра через факти.
📣 Наполегливо-адвокаційно
Прямо, з закликом до дії. Тиск на проблему.
🤝 Тепло-людяно
Про людей і родини, емпатійно, близько.
🏛️ Експертно-інституційно
Фахово, для урядів і партнерів.

⏳ вирішити  основний тон (можна поєднати 1–2).

Далі — блоки сторінки

9 блоків сайту

По кожному покажемо: що він робить, які структурні опції є на вибір, і що треба визначити чи надати.

Гортайте далі →

Блок 01

Головний екран (Hero)

Перше, що бачать: назва, слоган «if we're together, we can», короткий опис, кнопки.

🧩 Структура✍️ Інформація🖼️ Візуал
A · Ліво, великий текст
Editorial, сміливо (зараз так).
B · Центрований
Класичніше, врівноважено.
C · Текст + зображення
Половина фото/графіка.

Від вас: підтвердити слоган і головний заклик · обрати компонування.

Блок 02

Контекст і цифри

Коротко про проблему + ключові цифри («з 2014», «100 000+», «406»).

✍️ Інформація🧩 Структура
A · Великі цифри в ряд
Сильно, лаконічно (зараз так).
B · Текст-розповідь
Абзацами, без акценту на числа.
C · Цифра + пояснення
Кожна цифра з підписом.

Від вас: які цифри показуємо і з якими джерелами (щоб точно й захищено).

Блок 03

Місія та бачення

Навіщо існує платформа і якою себе бачить.

✍️ Інформація🧩 Структура
A · Дві картки
Місія і бачення поруч (зараз так).
B · Маніфест
Один сильний абзац-заява.
C · Велика цитата
Ключова теза великим шрифтом.

Від вас: підтвердити або скоротити тексти (є чернетка зі стратегії).

Блок 04

Цінності (8)

Принципи платформи: Сміливість, Свобода людини, Взаємодія…

🧩 Структура✍️ Інформація🖼️ Візуал
A · Усі 8 сіткою
Повно (зараз так).
B · Топ-4–6
Лише найсильніші.
C · Список з іконками
Компактно, з піктограмами.

Від вас: скільки показуємо · чи потрібні іконки (візуал).

Блок 05

Що ми робимо — 3 напрями

Нац. адвокація · міжнародна адвокація · організаційна спроможність.

✍️ Інформація🧩 Структура
A · Три картки
З підпунктами (зараз так).
B · Кроки/таблиця
Стисло, по рядку на напрям.
C · Іконки + назва
Мінімум тексту.

Від вас: підтвердити описи · показувати підпункти чи стисло.

Блок 06

Учасники — 15 організацій

Назва, регіон, опис і посилання кожної організації-учасниці.

🔗 Матеріали✍️ Інформація🧩 Структура
A · Сітка карток
З описами (зараз так).
B · Стіна логотипів
Компактно, лого-ряд.
C · Список
Щільно, рядками.

Від вас: ⏳ надати логотипи організацій · підтвердити описи/посилання.

Блок 07

Партнери + «За підтримки ICMP»

Перелік партнерів і окремий блок подяки донору/партнеру ICMP.

🔗 Матеріали✍️ Інформація
A · Плитки + банер ICMP
Зараз так.
B · Ряд логотипів
Просто лого партнерів.
C · Акцент на ICMP
Головна — подяка донору.

Від вас: ⏳ надати лого ICMP (і партнерів) · підтвердити перелік і текст.

Блок 08

Новини та статті

Розділ, який ви редагуватимете самі (зараз стоять приклади).

🧩 Структура✍️ Інформація
A · Сітка 3 картки
Зараз так.
B · Головний + список
Один великий, решта поруч.
C · Стрічка-список
Хронологічно, рядками.

Від вас: хто редагує → підключимо просту адмінку · 1–2 реальні дописи для старту.

Блок 09

Долучитися · Підтримати · Контакти

Заклики до дії (приєднатися, підтримати, звʼязатися) + соцмережі.

🔗 Матеріали✍️ Інформація🧩 Структура
A · Три заклики
Долучитись/підтримати/контакт (зараз так).
B · Один великий заклик
Фокус на головну дію.
C · Форма звернення
Проста форма контакту.

Від вас: ⏳ реальні email, соцмережі, посилання для підтримки/донату.

Підсумок

Що потрібно від вас

🎨 Обрати

  • Кольори бренду (палітра, настрій)
  • Напрям шрифтів
  • Візуальну мову (фото/графіка/мінімум)
  • Тон комунікації
  • Структурні опції по блоках

✍️ Визначити

  • Цифри + джерела (контекст)
  • Місію, бачення, напрями, цінності
  • Тексти закликів
  • 1–2 реальні новини

🔗 Надати

  • Логотипи 15 організацій
  • Лого ICMP (і партнерів)
  • Email і соцмережі платформи
  • Логотип/айдентику платформи
  • Фото (якщо обрали фото-візуал)

Технічне (наш бік): адмінка новин, домен compo.orgua.online, власна пошта ГО.

Ваші відповіді

Зведення обраного

Тут збирається все, що ви обрали клікам вище. Скопіюйте — і надішліть нам разом із матеріалами зі списку «надати».

Скопійовано ✓
Наступний крок

Рішення — за Координаційною групою

Пройдіть провідник командою, зафіксуйте вибір на попередньому слайді та надішліть матеріали зі списку «надати». Далі ми складаємо фінальну версію сайту.

Живий прототип: compo-orgua.pages.dev

1 / 20
клікайте слайд або ← →