Most of Design
Most of Design · запит на пропозицію

Слава, привіт

У нас цікавий запит від клієнта — релонч сайту аналітичного центру в Ліхтенштейні на WordPress. Дизайн готовий і приходить у Figma від агенції, верстку (HTML/CSS/JS) отримуємо готовою — від тебе вона не потрібна. Потрібен той, хто зробить із цього нормальну вордпресівську тему з адмінкою, якою нетехнічна редакція користується сама. Повний бриф клієнта, макети і посилання на їхній нинішній сайт — нижче на цій сторінці.

Якщо є бажання і можливість — запропонуй нам оффер із чотирьох пунктів нижче. Можна взяти один, можна кілька, можна сказати «це не моя історія» — все нормально. Поки просто хочемо зрозуміти, у якому форматі тобі цікаво зайти і скільки це коштує.

Стек, до якого ми прийшли

Тема
Класична тема + ACF Pro. Контент строго структурований — редакція заповнює поля, а не збирає лейаути.
Чому не FSE
Блочна тема віддає відповідальність за лейаут редакції — саме той конструктор, якого клієнт просив уникнути. Headless теж відпав: другий рантайм без виграшу для архіву такого розміру.
Підмур
Bedrock / Sage, Git-репозиторій, staging + продакшн, автоматичний деплой.
Ліцензії
Платна одна — ACF Pro (~€49/рік). Решта вільні: Rank Math, Redirection, Mailchimp. Фільтр «тема/формат» — свій, легкий, без платного плагіна.
Хостинг
Infomaniak (CH), managed WordPress зі staging і бекапами. Договір напряму в клієнта.

Це наш вибір, а не догма. У WordPress ти сидиш глибше за нас — якщо щось тут варто зробити інакше, так і напиши. Нам важливіше правильне рішення, ніж наше.

Чотири пункти, які просимо оцінити

01
Бекенд під ключ

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

Що порахувати: обсяг, ціна, строк.

02
Робочий стек, якщо ти вже вайбкодиш

Чи можеш зібрати нам робочий пайплайн, який перетворює верстку на готову WordPress-тему зі зручною адмінкою — і передати вихідні матеріали: промпти, правила, скрипти, конфіги. Щоб далі ми вели це разом, а не поверталися з кожною дрібницею.

Що порахувати: скільки коштує зібрати такий стек і передати його нам у руки.

03
Ревʼю

Варіант, де кодимо ми, а ти дивишся код і даєш ревʼю — за етапами або регулярно. Нам важливо не заїхати в архітектурну дурницю, яку потім дорого розбирати.

Що порахувати: формат (за етапами / погодинно / підписка) і ціну.

04
Підтримка на квартал після релізу

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

Що порахувати: місячна ставка, скільки годин входить, час реакції.

Бриф клієнта — повністю

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

1Контекст

Клієнт — Stiftung Zukunft.li, незалежний аналітичний центр (think tank) у Ліхтенштейні: дослідження, публікації, авторські колонки, подкасти, події. Робиться повний релонч сайту www.stiftungzukunft.li.

Концепцію і дизайн готує агенція Neuland, передає у вигляді Figma-файлу. Дизайн ще не фінальний, але шаблони й функції вже визначені.

Поточний сайт працює на Concrete CMS (Concrete5) і має бути повністю мігрований, включно з редіректами URL.

Клієнт попросив розкласти вартість по позиціях і окремо — прозоро сказати, чи використовуються AI-інструменти і як це впливає на ціну.

Потрібна оцінка по трьох пакетах: 1) бекенд WordPress, 2) міграція контенту з Concrete5, 3) LLM/SEO-оптимізація, аналітика й вимірювання продуктивності.

Робоче припущення щодо поділу: design-to-code (Figma → HTML/CSS/JS шаблони) робиться на нашому боці, далі верстка передається на інтеграцію в тему.

2Сайт у двох словах

Невеликий сайт із глибоким архівом контенту. Не складний застосунок.

ШаблонПризначення
Startseite «alle Inhalte»Головна: весь контент як плиткова сітка з фільтром
Themenspezifische StartseiteСторінка теми: герой + вступний текст + відфільтрована сітка
Detailseite InhaltДетальна сторінка матеріалу / статті
Статичні сторінки«Was wir tun», «Wer wir sind», список тем, підписка на розсилку, імпресум, приватність, 404

Таксономії нового сайту (значення лишаю німецькою — це майбутні терми в базі; у дужках переклад):

  • Themen (12): Arbeit, Bildung, Demografie, Finanzen, Gesellschaft, Infrastruktur, KI, Medien, Politik, Umwelt, Wachstum, Weltmarkt (праця, освіта, демографія, фінанси, суспільство, інфраструктура, ШІ, медіа, політика, довкілля, зростання, світовий ринок)
  • Formate (8): Bildergalerie, Grafik des Monats, Meinungsartikel, Podcast, Pressemitteilung, Publikation, Veranstaltung, Video (фотогалерея, «графік місяця», авторська колонка, подкаст, пресреліз, публікація, подія, відео)

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

Мова: тільки німецька. Мультимовність не передбачається — просимо підтвердити, що рахуєш саме так.

3Пакет 1 — бекенд WordPress

3.1 Модель контенту

Один кастомний тип запису (або невеликий набір — на твій розсуд), із яким:

  • таксономія «Тема» (12 термів), таксономія «Формат» (8 термів), опційні вільні теги;
  • поля, успадковані з наявної маски Concrete «Composer»: заголовок, дата публікації, тизер / короткий опис, форматований текст, тизерне зображення, широке зображення (лише для публікацій), документи (кілька PDF), додаткові публікації (файли), обкладинка YouTube, власне посилання на YouTube, зовнішнє посилання, автор;
  • гнучкі контент-блоки для детальної сторінки: текст, зображення (змінна ширина, частина виходить за межі текстової колонки), виносна цитата, графік / діаграма з підписом і рядком джерела, вбудований PDF, блок посилань;
  • модуль «більше на тему» в кінці кожної статті — автоматично за темою, з можливістю ручного перевизначення;
  • редакційне закріплення: останнє дослідження завжди першим на головній і на тематичних сторінках, решта — хронологічно;
  • «спецплитка»: промо-плитка (події, розсилка), яку можна повторювати в сітці на визначених позиціях;
  • плитки різних розмірів і форматів (А4-портрет, ландшафт, квадрат) — це має керуватися для кожного матеріалу окремо.

3.2 Функції

  • фільтри й архівні запити, продуктивні, бажано через AJAX;
  • карусель на головній, hover-стани з редагованим текстом оверлея (напр. «читати фокус», «слухати подкаст»), акордеони / розкривні списки;
  • попап розсилки: спрацьовує приблизно на 70 % глибини скролу на сторінках статей; якщо закрили — не показується 14 днів (cookie); вміст редагується в адмінці;
  • інтеграція Mailchimp для всіх форм підписки (попап, футер, окрема сторінка підписки);
  • PDF-рідер (вбудований переглядач) для досліджень і публікацій;
  • YouTube-вбудова і для відео, і для аудіо / подкастів;
  • print CSS — сторінки матеріалів мають чисто друкуватися;
  • медіабібліотека зі зручною структурою папок (на поточному сайті ~10 папок верхнього рівня);
  • керування редіректами;
  • сторінка 404.

3.3 Досвід редактора — головний пріоритет клієнта

Клієнт прямо каже, що надає великого значення бекенду, яким його нетехнічна команда керує самостійно. Це означає:

  • німецька мова адмінки, чисті маски редагування, без розлогого конструктора сторінок, розумні дефолти;
  • робочий превʼю, ролі й права користувачів;
  • коротка передавальна документація (кілька сторінок);
  • одна сесія навчання (дистанційно).

3.4 Питання до підрядника

  • Класична WP-тема + ACF, блочна тема чи headless? Коротке обґрунтування — клієнт просив пояснити вибір рішення.
  • Які платні плагіни / ліцензії використовувалися б?

4Пакет 2 — міграція з Concrete5

4.1 Джерело

Concrete CMS. Контент лежить у Composer-типі сторінки «News» із набором полів, описаним у 3.1.

Старі категорії (оригінальні значення, вони підуть у мапінг): Aktuelles, Publikationen, Medienspiegel, Geschäftsbericht, Podcast, Blog, 10 Fakten (актуальне, публікації, огляд преси, річний звіт, подкаст, блог, «10 фактів»).

Папки файлового менеджера: 10 Jahre Zukunft, Aktuelles, Blogs, Downloads, Erklärvideos, Fotogalerie, Geschäftsberichte, Grafik des Monats, Inhalt, Medienspiegel.

З бекенду Concrete доступний CSV-експорт. Доступ до БД і файлової системи можна запросити в клієнта.

«Aktuelles» — це агрегована вистава, а не окремий тип контенту, тож ці матеріали не можна мігрувати двічі.

4.2 Обсяг

Лише блог: ~150 записів (2016–2026, за фільтром років на живому сайті). Зверху — публікації, подкасти, огляд преси, річні звіти, «графік місяця», відео і галереї. Просять рахувати від припущеного діапазону і назвати його. Порядок величини: 400–700 матеріалів плюс кілька сотень медіафайлів (переважно PDF та зображення).

4.3 Нетривіальна частина

12 тем — нові, у старих даних їх не існує. Тобто кожному перенесеному матеріалу потрібно призначити тему, плюс змапити стару категорію на нову таксономію «Формат».

Пропозиція клієнта: автоматична класифікація за допомогою LLM із перевіркою редакцією (експорт у CSV на вичитку, зворотний імпорт). Це просять порахувати окремим рядком.

4.4 Вимоги

  • повторюваний, ідемпотентний імпорт-скрипт (а не разова ручна робота);
  • мапінг полів, включно з файлами, PDF, YouTube-посиланнями, зображеннями, авторами, датами;
  • чистка легасі-розмітки у форматованому тексті;
  • внутрішні посилання переписані на нові URL;
  • карта 301-редіректів для всіх наявних URL, віддана як CSV, придатний до перевірки; старі слаги зберігаються там, де це доречно;
  • щонайменше два пробні прогони на staging плюс фінальний дельта-прогон на релізі.

5Пакет 3 — LLM-оптимізація, аналітика, продуктивність

Клієнт окремо просить «знаходимість системами на базі ШІ» поряд із класичним SEO, а також вимірювання продуктивності, можливо з дашбордом.

5.1 SEO / LLM

  • SEO-плагін, придатний для редакції (Yoast / RankMath / SEOPress — на вибір), налаштований німецькою, з дефолтами для кожного типу контенту;
  • структуровані дані: Article/NewsArticle, Organization, Person (автори), AudioObject/PodcastEpisode, VideoObject, Event, ImageGallery;
  • семантичний чистий HTML, стабільні пермалінки, canonical, XML-мапа сайту, RSS/JSON-фіди;
  • llms.txt і явна політика robots.txt для AI-краулерів (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) — рішення дозволити чи заборонити приймає клієнт, ми готуємо рекомендацію;
  • поле тизера має водночас працювати як машиночитаний абстракт;
  • PDF — це основний контент: дослідження мають бути доступні для краулінгу, мати текстовий шар, і кожне має отримати HTML-сторінку з абстрактом, а не існувати лише файлом;
  • ціль доступності — WCAG 2.2 AA; просять чітко сказати, що покривається, а що ні.

5.2 Задел на майбутнє (не в обсязі, але архітектура не має цього блокувати)

  • підключення чат-бота на базі ШІ до корпусу контенту;
  • преспортал: завантаження даних і графіки з нормальними метаданими;
  • «за можливості»: функція озвучення тексту, індикатор прогресу читання, «перетворити на подкаст», автоматичне резюме — просять оцінити окремо, як опції.

6Терміни клієнта

ДатаЕтап
початок вересня 2026старт проєкту
вересень–жовтень 2026збірка
листопад 2026міграція, тестування, QA
кінець листопада 2026реліз
з грудня 2026підтримка / супровід, окремою піврічною позицією

7Що клієнт хоче бачити у відповіді

  • ціна по кожному пакету, розкладена на: сетап і архітектура, реалізація, QA / тестування, реліз; фікс або діапазон, із годинами і ставкою; припущення і виключення;
  • опції окремими рядками: LLM-класифікація контенту, дашборд продуктивності, озвучення / прогрес читання / автоматичне резюме;
  • AI-інструменти: де використовуються і як впливають на ціну — клієнт попросив це прямо;
  • доступність вересень–листопад 2026 і хто саме працює над проєктом;
  • підтвердження прав: клієнт має володіти вихідним кодом і всіма ассетами після завершення проєкту;
  • робоче середовище: Git-репозиторій, staging + продакшн, деплой;
  • валюта — EUR або CHF, вказати яку.

Додаток — макети клієнта

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

1. Мапа сайту

Головна «всі матеріали» веде через меню на тематичну сторінку, а звідти — на детальну сторінку матеріалу. З меню також відкриваються список тем, «що ми робимо», «хто ми» і «підписка на брифінг».

Мапа сайту з додатка до запиту
Мапа сайту з додатка до запиту клієнта.
Написи на зображенні — оригінал і що це означає
Homepage
Верхній рівень сайту.
Startseite alle Inhalte
Головна — усі матеріали, викладені плитками.
Menü
Оверлей-меню, звідси доступно все.
Themenliste
Список тем усередині меню.
Themenspezifische Startseite
Головна однієї теми, наприклад «Finanzen» (фінанси).
Detailseite Inhalt
Сторінка окремого матеріалу.
Was wir tun
«Що ми робимо» — статична сторінка про роботу організації.
Wer wir sind
«Хто ми» — статична сторінка про команду й органи.
Anmeldung zum Briefing
«Підписка на брифінг» — сторінка підписки на розсилку.

2. Головна — усі матеріали

Плиткова сітка по всьому контенту з панеллю фільтрів угорі. Позначки клієнта на аркуші:

Головна «всі матеріали» з позначками клієнта
«Головна — усі матеріали» з позначками клієнта.
Написи на зображенні — оригінал і що це означає
Filter
Панель фільтрів над сіткою плиток.
Alle · Arbeit · Bildung · Demografie · Finanzen · Gesellschaft · Infrastruktur · KI · Medien · Politik · Umwelt · Wachstum · Weltmarkt
Теми як фільтри, з кількістю матеріалів у кожній: усі · праця · освіта · демографія · фінанси · суспільство · інфраструктура · ШІ · медіа · політика · довкілля · зростання · світовий ринок.
Die jüngste Studie ist immer hier platziert.
Позначка клієнта: «Найсвіжіше дослідження завжди стоїть тут» — плитка закріплюється.
Rest der Kacheln sind chronologisch geordnet.
«Решта плиток іде в хронологічному порядку».
Aktuelles ist immer hier platziert. · Karussell
Блок «актуальне» має фіксоване місце і є каруселлю.
«Spezialkachel»: Diese Kachel soll wiederholt angezeigt werden (Werbung für Veranstaltungen, andere Hinweise)
«Спецплитка», що повторюється в сітці — анонси подій або інші повідомлення.
Ist auch eine Spezialkachel möglich, in der man sich direkt für den Newsletter anmelden kann?
Відкрите питання клієнта: «Чи можлива спецплитка, у якій можна одразу підписатися на розсилку?»
Kacheln haben unterschiedliche Masse (bspw. A4-Format, andere Grössen in Quer- oder Hochformat)
Плитки різного розміру — формат A4, інші розміри в альбомній чи книжковій орієнтації.
PDF Reader
Публікації читаються просто на сторінці, без попереднього завантаження.
Video abspielen
«Відтворити відео» — запуск прямо з плитки.
Mouse over mit individuellem Text (z. B. «Fokus Lesen» oder «Podcast anhören»)
Hover з індивідуальним текстом на кожній плитці, напр. «читати фокус» або «слухати подкаст». Текст задає редакція.
Wenn man hier klickt kommt man direkt zur Unterseite vom Blog.
«Клік тут веде одразу на підсторінку блогу».
Publikation · Aktuelles · Video · Bildergalerie · Podcast · Meinungsartikel
Типи матеріалів, підписані над плитками: публікація · актуальне · відео · фотогалерея · подкаст · авторська колонка.

3. Тематична головна

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

Тематична головна на прикладі теми «Finanzen»
Тематична головна, показана на прикладі теми «Finanzen» (фінанси).
Написи на зображенні — оригінал і що це означає
Finanzen
«Фінанси» — приклад теми в герої, зі вступним текстом про тему.
Solide Staatsfinanzen sind eine wichtige Grundlage…
Опис теми, який редагує редакція: «Стійкі державні фінанси — важлива основа добробуту і життєздатності в майбутньому…»
Filter
Два ряди фільтрів один під одним: спершу тема, нижче тип матеріалу.
Alle · Bildergalerie · Grafik des Monats · Meinungsartikel · Podcast · Pressemitteilung · Publikation · Veranstaltung · Video
Другий ряд фільтрів — типи матеріалів: усі · фотогалерея · графік місяця · авторська колонка · подкаст · пресреліз · публікація · подія · відео.
Die jüngste Studie ist immer hier platziert. Alle anderen Kacheln sind chronologisch geordnet.
Та сама логіка закріплення, що й на головній: свіже дослідження першим, решта за датою.
PDF Reader · Video abspielen
Як на головній: читання і відтворення прямо з плитки.

4. Детальна сторінка матеріалу

Сторінка статті несе текст, зображення, вбудовані графіки і виносні цитати. Зображення бувають різної ваги; вставки збираються поштучно — текст, зображення, PDF, відео, графіки, цитати. Внизу статті — автор, шеринг і друк. «Назад до огляду» їде разом зі сторінкою при прокрутці. Нижче — блок «більше на тему», плитки в ньому ставляться автоматично або руками, з hover і власним текстом на кшталт «подивитись галерею». Завершує сторінку футер із підпискою на розсилку.

Додатково клієнт хотів би, за можливості: озвучення тексту, індикатор прогресу читання, «перетворити на подкаст» і «зробити резюме».

Детальна сторінка матеріалу з позначками щодо функціональності
Детальна сторінка матеріалу з позначками щодо функціональності.
Написи на зображенні — оригінал і що це означає
Zurück zur Übersicht
«Назад до огляду» — кнопка повернення, ліворуч угорі.
Bleibt beim Scrollen weiterhin sichtbar
«Залишається видимою при прокрутці» — кнопка їде разом зі сторінкою.
Meinungsartikel
«Авторська колонка» — тип матеріалу над заголовком.
Bilder können unterschiedliche Masse haben
«Зображення можуть бути різного розміру» — ширина картинок усередині статті варіюється.
Zusatzwissen
«Додатково» — вставний блок-довідка всередині тексту, тут із графіком.
Einschub individuell anpassbar: Text, Bilder, PDFs, Links, mit/ohne Zitat
Вставку редактор збирає вільно — текст, зображення, PDF, посилання, з цитатою або без.
Teilen und drucken
«Поділитися і надрукувати» — ряд іконок у кінці статті.
Mehr zum Thema
«Більше на тему» — блок повʼязаних матеріалів під статтею.
Müssen wir hierfür «Tags» setzen oder können wir das automatisieren?
Відкрите питання клієнта: «Чи треба для цього проставляти теги, чи це можна автоматизувати?»
Footer der Inhaltsseiten inkl. Anmeldung zum Newsletter
Футер сторінок матеріалів несе форму підписки на розсилку.

5. Попап підписки на розсилку

Підписка зʼявляється попапом: після прочитання статті, приблизно на 70 % глибини прокрутки, ненавʼязливим оверлеєм. Хто його закрив — не бачить щонайменше 14 днів, це керується cookie.

Попап підписки в контексті детальної сторінки
Попап підписки в контексті детальної сторінки.
Написи на зображенні — оригінал і що це означає
Verpassen Sie keine neue Studie.
Заголовок попапу: «Не пропустіть нове дослідження».
Unser monatliches Briefing fasst die wichtigsten Publikationen, Analysen und Podcasts für Sie zusammen.
«Наш щомісячний брифінг збирає для вас найважливіші публікації, аналітику і подкасти».
Vorname · Name · E-Mail Adresse
Три поля форми: імʼя · прізвище · адреса електронної пошти.
Newsletter abonnieren
«Підписатися на розсилку» — кнопка відправки.
Nach dem Lesen eines Artikels (ca. 70 % Scrolltiefe) ein dezentes Overlay.
Тригер — глибина прокрутки, а не таймер.
Wer es wegklickt, sieht es für mindestens 14 Tage nicht mehr. (cookies setzen)
Закриття запамʼятовується через cookie щонайменше на 14 днів.

6. Меню

Меню відкривається повноекранним оверлеєм: ліворуч розсилка і соцмережі, посередині теми, праворуч «наша робота» (місія, дирекція, рада) і блок про організацію (річні звіти, історія, грантовий фонд, почесне президентство, мета). Усе клікабельне. Поверх цього — рекламний попап, який зʼявляється лише періодично; у прикладі це анонс найближчої події.

Оверлей-меню з періодичним анонсом події
Оверлей-меню з періодичним анонсом події.
Написи на зображенні — оригінал і що це означає
Themen
«Теми» — центральна колонка меню з усіма темами.
Arbeit · Bildung · Demografie · Finanzen · Gesellschaft · Infrastruktur · KI · Medien · Politik · Umwelt · Wachstum · Weltmarkt
Теми як навігаційний список: праця · освіта · демографія · фінанси · суспільство · інфраструктура · ШІ · медіа · політика · довкілля · зростання · світовий ринок.
Unsere Arbeit: Mission · Geschäftsstelle · Stiftungsrat
«Наша робота»: місія · дирекція · рада.
Geschäftsberichte · Geschichte · Förderstiftung · Ehrenpräsidium · Zweck
Річні звіти · історія · грантовий фонд · почесне президентство · мета.
Impressum | Datenschutz
«Вихідні дані | Політика конфіденційності» — обовʼязкові сторінки, ліворуч унизу.
Alles klickbar
«Усе клікабельно» — кожен пункт меню є посиланням.
Pop-Up für Werbung (nur periodisch da)
«Попап для реклами (зʼявляється періодично)» — кружок показується час від часу, не постійно.

Практичне

Якщо коротко: нам потрібен вордпресник, якому можна довіряти, і ми готові будувати це в будь-якому з чотирьох форматів — від «зроби все сам» до «просто наглядай за нами». Скажи, що з цього твоє.