Progress Foundation — клиентский бриф
1Продукт — что это
Progress Foundation — швейцарский фонд, занимается экономическим просвещением: публикации, конференции, воркшопы, репозиторий текстов и спикеров. Сайт — витрина и архив фонда.
Клиент в договоре — Telya GmbH (Verena Parzer-Epp, Wädenswil, CH), посредник. Конечный заказчик — сам фонд. Все вопросы по хостингу, доступам и лицензиям идут через Verena.
Что уже стоит у клиента. Действующий сайт на WordPress, два языка (DE по умолчанию, EN), кастомная тема awesometheme v1.0.3 — её делали предыдущие подрядчики по нашим макетам. Дизайн-система и макеты в Figma — наши; фронтенд по ним делали мы, а сборку в WordPress доводили подрядчики.
Что появляется нового. Фонд хочет большой раздел публикаций по экономике — «Библиотека» (нем. Bibliothek), который будут наполнять студенты. Клиент проработал его сам и передал одностраничный HTML-прототип на 20 экранов: вводный путь (Einstieg), семь тем, ведущие тексты (Leittexte) с оглавлением и прогрессом чтения, три углубления, финальный экран.
Наша задача двойная: (1) бесшовно подхватить поддержку и развитие существующего сайта, опираясь на то, что уже живёт в проде; (2) собрать и выложить раздел «Библиотека» и передать его редакторам.
⚠️ Требует подтверждения клиентом: кто сегодня технически владеет сайтом (хостинг, WP-админка, лицензии плагинов) и в каком состоянии живая копия — см. §7.
2Ссылки и материалы
Внешние
| Что | Ссылка | Роль в проекте |
|---|---|---|
| Живой сайт, немецкий (по умолчанию) | https://progress-foundation.ch/ | Прод. Источник правды по текущим стилям, отступам и структуре |
| Живой сайт, английский | https://progress-foundation.ch/en/ | Прод, вторая языковая ветка (Polylang) |
| Figma-файл проекта | https://www.figma.com/design/R9w5hYLnzQbMuezNMb9aDG/Progress-Foundation | Исходный дизайн проекта — наш |
| ↳ страница Web Design | тот же файл, node-id 260:10284 | Макеты страниц: Home, Books, Book Page, About us, Events, Search, Repository, Article, Workshop, Conference, Speaker Page, Support, 404, обновления 2025 |
| ↳ страница UI Kit | тот же файл, node-id 907:6320 (секция «Style guides and UI-Kit» 907:6321) | Дизайн-система проекта: палитра, типографика, логотипы, компоненты |
| ↳ страница Process and Analitics | тот же файл, node-id 3:31 | Рабочие материалы проекта |
Локальные
| Что | Путь |
|---|---|
| HTML-прототип раздела «Библиотека» от клиента | 01-materials/Progress-Foundation-Bibliothek-Mockup-mit-Leittexten-und-Vertiefungstexten-v3.html |
01-materials/ — архив «что нам дали». Файл клиента не переименовываем и не редактируем: он остаётся каноном структуры и текстов Библиотеки.
Стек, заданный клиентом: фронтенд → WordPress. Тема кастомная, менять платформу не предлагаем.
3Объём работ
| Что | В скоупе? |
|---|---|
| Рабочее окружение: приватный репозиторий, дашборд проекта (EN/RU), прототип, карта структуры, план работ | ✅ |
| План поддержки и развития по эпикам — утверждается с Олегом, затем фиксируется | ✅ |
| Дизайн-система в коде, снятая с живого сайта, со сверкой по Figma UI Kit | ✅ |
| Копия сайта у нас — локально или на тестовом сервере, один в один | ✅ |
| Раздел «Библиотека» по прототипу клиента: архитектура в WordPress, сборка, выкладка, передача редакторам-студентам | ✅ |
| Процесс поддержки: интейк → карточки → релизы | ✅ |
| Редизайн сайта целиком | ❌ |
| Правки контента существующих разделов — кроме тех, что нужны для Библиотеки | ❌ |
| Хостинг, DNS, лицензии плагинов | ❌ решает клиент |
Фазы по порядку
- Рабочее окружение и план — репозиторий, дашборд, опись прототипа, план работ. (текущая фаза)
- Копия сайта у нас — поднять один в один, убедиться, что всё работает.
- Дизайн-система в коде — снять с живого сайта, сверить с Figma UI Kit.
- Библиотека — архитектура в WordPress, сборка, выкладка.
- Передача редакторам и запуск процесса поддержки.
4Целевая аудитория
| Кто | В каком состоянии смотрит в экран | Следствие для работы |
|---|---|---|
| Читатели Библиотеки — студенты и широкая публика | Читают длинные тексты подряд, часто с телефона, с перерывами | Раздел построен вокруг чтения: оглавление, прогресс, быстрый просмотр, возврат в текст. Это не каталог, это чтение |
| Редакторы — студенты-авторы | Работают в админке нерегулярно, без технической подготовки, состав людей меняется | Админка должна быть настолько простой, чтобы нового автора вводили без нас. Всё сложное прячем в шаблоны |
| Заказчик — фонд, через Verena | Смотрит результат, а не процесс | Каждая фаза заканчивается тем, что можно показать и принять |
5Что говорит клиент (дословно)
Важно: ниже — постановка от Олега (созвон 2026-09-21), дословно. Единственная правка — названия рабочих инструментов студии заменены на смысл в квадратных скобках: документ показываем клиенту. Прямых цитат клиента у нас пока нет — общение шло через Олега. Как появятся слова Verena или фонда, они добавляются сюда отдельным блоком.
Постановка Олега, 2026-09-21
«задача звучит как доработка и поддержка существующего проекта Progress Foundation»
«у нас есть изначальная дизайн-система и дизайн макетов в Figma. На основе этого мы делали фронтенд и прикручивали к WordPress»
«нам нужно понять, то ли завести дизайн-систему [в коде] и новые layout'ы строить, опираясь на текущие стили, отступы и так далее, оперируя всем, что у нас есть уже на живом сайте, чтобы мы бесшовно, безболезненно, просто на лету подхватили саппорт и развитие проекта — он будет дорабатываться постоянно»
«нужно понять, то ли нам поднять копию с её хостинга у нас где-то локально, либо на тестовом сервере — поднимем копию, произведём все манипуляции, убедимся, что всё работает один к одному, и продолжим движение»
«поднимаем сейчас репозиторий приватный, поднимаем на основании имеющихся шаблонов дашборд проекта, сразу поднимаем work plan, сразу делаем всю эту историю по нажатию на Control двуязычную»
«коллеги хотят сделать огромный раздел публикаций по поводу экономики, которые будут наполнять студенты. Они сделали прототип, которым поделились с нами в виде файла HTML»
«в дашборде проекта будет отдельно прототип… чтобы мы видели саму структуру, может быть, типа как sitemap… сделай по UI, чтобы было очень удобно с этим работать»
«структурно клиент говорит, что они очень подумали и очень постарались, но нам нужно сделать всё так, чтобы мы максимально просто и быстро это всё поддерживали, дорабатывали»
«один подход — я могу дальше адаптировать дизайн в Figma, потом привлечь того специалиста… второй подход — мы с тобой всё делаем сами. Я за второй подход, как за наиболее гибкий и быстрый. Чем больше звеньев в цепочке, тем она более хрупкая. Крайний заход работы с ребятами показал себя как очень долгий, местами ненадёжный»
«стек у нас — это фронтенд, потом сайт на WordPress у клиента»
«ты только за планирование и за проверку, за верификацию»
6Что мы уже нашли (предварительно)
Ниже — факты, снятые с живого сайта, прототипа и Figma. Без оценок: оценки — после аудита.
Живой сайт — стек
- Платформа: WordPress. Тема
awesomethemev1.0.3 — кастомная, делали подрядчики. - CSS:
assets/css/app.css(~227 КБ, reset*,::after,::before— бандл Bootstrap-типа),assets/css/foundation.css(18 КБ, включает Swiper),assets/theme.css,style.css. - JS: Alpine.js 3.13.8 (unpkg),
foundation.js,app.js,theme.js,ajax.js. - Плагины: Polylang (DE/EN), Contact Form 7 + reCAPTCHA v3, Yoast SEO (
sitemap_index.xml), Site Kit by Google, Google Tag. - Типы записей:
publication(58),event,person(882). Таксономии:events, category, post_tag. - Страницы: Publikationen (+ Herausgeber und Autoren), Veranstaltungen (+ Economic Conferences, Workshops), Suchen, Repository (EN), Kontakt, Über uns, Impressum, Datenschutz, Welcome, Maintenance.
- Шрифты: Merriweather 300/400, Inter 400/500, Barlow Condensed — Google Fonts.
Прототип клиента — состав
- Файл 671 КБ, 7146 строк, язык немецкий,
<title>Bibliothek – Progress Foundation. - Одностраничное приложение на hash-роутинге: 20 экранов
div.mockup-view[data-view]; роутер и словарьrouteNames— в первом<script>(~строка 6982), поведение quick-read и калькулятора — во втором. - Картинок нет вовсе (0
<img>). Шрифты — те же, что на живом сайте, с Google Fonts. - Цвета прототипа:
--green #078676,--deep-green #087d70,--ink #0b0b0b,--cream #f4f1e9. - Маршруты:
/bibliothek(лендинг) ·/bibliothek/journey(Einstieg) · семь тем —freiheit,markt,eigentum,staat-recht,demokratie,geld,gesellschaft, у каждой страница темы и…/leittext· три углубления —freiheit/hayek,markt/adam-smith,eigentum/ostrom· финал/bibliothek/journey/abschluss(«Sieben Perspektiven. Ein gemeinsamer Rahmen.»). - Устройство ведущего текста (leittext): оглавление
archive-toc, прогресс-барarchive-progress, секцииauftakt … bilanz, literatur, источникиquelle-N/ref-N, quick-read-диалоги,back-to-text. - Интерактив: мобильное меню; quick-read (Escape закрывает); TOC с подсветкой текущей секции; прогресс чтения; боковые стрелки journey по наведению; калькулятор покупательной способности (
#rate,#years) вgeld/leittext. - Заготовленные, но не сделанные экраны: ссылки с атрибутом
data-inert. - Объём контента: ~188
section, 66article, 101article-section, ~130.ref, ~16 внешних источников (Nobel Prize, SNB, Fedlex, UChicago Press, Gutenberg, Harvard UP, Yale, World Bank, Venice Commission и др.).
Figma — что лежит в UI Kit
Страница UI Kit (907:6320), секция «Style guides and UI-Kit» (907:6321):
- палитра из 13 цветов, типографика, логотип on light / on dark, favicon, OG-image;
- иконки: Bootstrap Icons + icons8;
- кнопки: Arrow Btn, Learn More, Secondary, Primary On Dark, Tag Mini / Big;
- карточки: Book Card vertical / horizontal, Publication Card;
- теги типов событий: BOOK, PROTOCOL, MEDIA, ALL, PRESENTATIONS, SPEAKING OF, IN THE MEDIA;
- Text Field в четырёх состояниях; Footer V1–V5; Glossary Letters; Links; Header + Main Menu Big / Medium / Small;
- описанная структура сайта: Home, Books, Book Page, About Us, Events, Search, Blog, Blog Post.
Страница Web Design (260:10284) — фреймы верхнего уровня: About us, Repository, Article, Article_Workshop_Conference_Max, Search, Speaker Page, Support, Book (два фрейма), Books, Home, Hover, Slider, Events, Workshop, Conference New, 404, iPhone 8, обновления «Upd 2025» и «Upd 2025 : 19.03.2026».
Библиотек компонентов в Figma нет — по Библиотеке клиент сделал HTML-прототип вместо макетов.
Что есть и чего нет у нас на машине
- Есть: node 22, wrangler, gh, браузерная автоматизация.
- Нет: docker / ddev / php / composer / wp-cli — это влияет на то, как поднимать копию сайта (§7, вопрос 1).
- Доступа к хостингу клиента пока нет.
7Открытые вопросы к клиенту
- Доступ к хостингу: провайдер, SSH/SFTP, wp-cli, панель управления; есть ли staging-поддомен; как делаются бэкапы.
- Доступ в WP-админку с ролью Administrator и к настройкам Polylang.
- Лицензии: есть ли ACF Pro или другие платные плагины, на кого они оформлены.
- Библиотека — языки и люди: только DE или DE+EN с первого дня? Кто редакторы (студенты — сколько их, какие роли), кто утверждает публикацию.
- Прототип: что в нём обязательно «как есть», а что можно приводить к дизайн-системе сайта.
- Сроки: когда фонд хочет увидеть первую версию Библиотеки на сайте.
8Наши рабочие ссылки
| Что | Ссылка |
|---|---|
| Дашборд проекта (локально) | file:///Users/oleg/Dev/verena/progress-dev/index.html |
| Дашборд проекта (хостинг) | появится после публикации |
| Репозиторий | https://github.com/chife-mod/progress-dev (приватный) |
| План работ | plan.html |
| Опись прототипа | PROTOTYPE-INVENTORY.md |
Документ ведётся студией. Правки после каждого созвона с клиентом — сюда.