Сборка 7 стоматологических шаблонов WordPress, из Figma в Elementor — 170 часов, 30 дней

Тип проекта: Разработка внутренней библиотеки шаблонов для маркетингового агентства из США
Срок: декабрь 2024 – январь 2025 · 30 дней · 170 часов на оценку и сборку

Подход к разработке

Семь изолированных стоматологических шаблонов из Figma в Elementor — 170 часов за 30 дней для внутренней библиотеки шаблонов маркетингового агентства из США. Шесть дизайнов в Figma и один в Adobe XD из трёх файлов; каждый шаблон размещался на собственном инстансе WordPress на FastPanel, собранном по своему дизайн-файлу до назначения какого-либо клиентского проекта.

Этот кейс — описание такого проекта: 170 часов на семь стоматологических шаблонов, каждый из которых был собран из Figma (шесть дизайнов) или Adobe XD (один дизайн) на изолированных инстансах WordPress и сдан менее чем за месяц.

Краткий обзор

Постановка задачи

Маркетинговое агентство из США ведёт фирменную библиотеку стоматологических шаблонов: когда подписывается новый клиент из стоматологической ниши, агентство выбирает один из существующих шаблонов и начинается доработка темы. Расширение библиотеки означает сборку нового шаблона на свежем, изолированном инстансе WordPress — без клиентского контента, без работающего сайта, без публичной аудитории — и его проверку на соответствие дизайн-спецификации агентства перед добавлением в каталог.

В декабре 2024 агентство запросило расширение своей библиотеки стоматологических шаблонов на семь шаблонов. Шесть дизайнов были предоставлены в двух файлах Figma (пять от ведущего дизайнера агентства, один от второго дизайнера в общем файле Figma, HOMEPAGE-DESIGNS); седьмой поступил в Adobe XD. Объём на каждый шаблон: главная страница, одна страница услуг, одна контактная страница, общие шапка и подвал — все адаптивные. Техническим заданием был дизайн-файл; агентство проверяло собранный шаблон на соответствие Figma перед утверждением.

Первые четыре шаблона были сгруппированы в начальную задачу оценки. Оставшиеся три были добавлены в середине проекта по мере освобождения ресурсов команды и поступления дизайнов. Все семь велись параллельно на общем серверном окружении FastPanel.

Как мы это сделали

1. Семь шаблонов, семь изолированных инстансов — одна координированная сборка. Каждый шаблон размещался на собственной установке WordPress на сервере FastPanel агентства: отдельная админка WordPress, отдельный лицензионный инстанс Gravity Forms, отдельное окружение Elementor. Изолированные инстансы были выбраны вместо общей мультисайтовой сети, поскольку межшаблонный дрейф настроек в едином окружении Elementor умножил бы нагрузку на пошаблонную проверку на семь различных сборок.

Шаблоны 1–4 собирались первыми (задача #60 в Redmine), а Шаблоны 5, 6 и 7 были добавлены через шесть дней после начала проекта в рамках дополнительной задачи оценки (#68). Никита Тумашевич выполнял сборку всех семи шаблонов; Павел Сажин координировал QA-итерации, а Тимур Арбаев проводил проверку шаблонов 1, 3 и 6, а также оценку второй партии.

2. Пошаблонная оценка, привязанная к сложности дизайна. Прежде чем была написана хотя бы одна строка Elementor, Никита проанализировал все семь дизайнов и подготовил пошаблонные оценки: Шаблон 2 на 32 часа (главная 17 ч + услуги 5 ч + контакты 6 ч + шапка/подвал 5 ч), Шаблон 3 на 25 часов (два сложных слайдера, блок текста с показать/скрыть, 2 часа на адаптивность), Шаблон 1 на 28 часов (главная 16 ч + страница услуг 3 ч + контакты 3 ч + шапка/подвал 6 ч), Шаблон 4 на 20 часов (сложный макет главной с вложенными скруглёнными секциями).

Шаблоны 5, 6 и 7 получили оценки 20 ч, 22 ч и 23 ч соответственно после того, как Figma HOMEPAGE-DESIGNS стала доступна. Все семь оценок были утверждены до начала сборки — ни одни часы не пересматривались в процессе.

3. Согласование доступа к Figma, затем сборка. Два из шести дизайнов Figma изначально были ограничены — дизайнер агентства не открыл права на экспорт, то есть команда могла просматривать, но не скачивать ресурсы. Проблема доступа была решена в течение рабочего дня: PM агентства связался с дизайнером, доступ к экспорту был открыт, и сборка этих шаблонов продолжилась в обычном режиме.

Один шаблон (Шаблон 4) был предоставлен в Adobe XD, а не Figma; команда собирала по макету XD с изображениями-заполнителями там, где стоковые ресурсы Adobe были заблокированы лицензией XD (стоковые изображения в дизайнах XD не скачиваются по умолчанию — команда подставила изображения-заполнители, как было указано, с заменой на реальные изображения при клиентской доработке).

4. QA-циклы по каждому шаблону перед утверждением агентством. Каждый шаблон проходил по одной и той же схеме передачи: сборка → внутренний QA (Никита проверяет свою работу) → уведомление о проверке Антону Херсуну → проверка Антоном с конкретными замечаниями (например, Шаблон 2: положение логотипного текста в шапке требовало корректировки; Шаблон 4: аномалия макета со скруглёнными секциями потребовала исправления вложенности контейнера) → доработка → утверждение.

Пошаблонные заметки проверки передавались через ссылки Google Docs, по одному документу на шаблон, что давало агентству структурированный артефакт утверждения для добавления в каталог. Шаблоны 1, 2, 3, 4 перешли в статус «Решено» в период с 18 по 21 декабря; Шаблоны 5, 6, 7 последовали за ними с 23 по 27 декабря — все до рождественского закрытия.

Семь шаблонов за 30 дней — каждый прошёл одну и ту же последовательность: оценка по сложности дизайна → сборка → внутреннее утверждение «Проверено, на отправку» → документ проверки в Google Docs, переданный агентству для каталога. Именно эта пошаблонная разбивка не дала семи параллельным сборкам слиться в одну неразрешимую очередь проверки в конце.

Контроль качества

Пошаблонная проверка выявила проблемы целостности макета на трёх из семи инстансов до того, как агентство увидело хотя бы один из них — текстовый элемент футера, сместившийся влево в Шаблоне 2; контейнер со скруглёнными секциями, не полностью вложенный в Шаблоне 4; и область наведения кнопки половинной ширины в Шаблоне 5 — каждый был исправлен и подтверждён по Figma до передачи пошаблонного документа утверждения в Google Docs.

Предварительный QA проводился через Site Checker — см. наш подход к QA по категориям и принципу нулевых ошибок. Собственный QA агентства — их инструменты, их процессы — выполнялся после передачи и фиксировал замечания в общую очередь задач для нашего цикла исправлений до момента утверждения.

Результаты

Процесс

Этапы сборки пересекались — Шаблоны 1–4 уже были в QA к моменту, когда Шаблоны 5–7 только входили в разработку, поэтому календарный срок в 30 дней вмещает более 170 часов общей работы.

Команда

Команда проекта

• Никита Тумашевич — ведущий разработчик всех 7 шаблонов; основная интерпретация Figma и реализация в Elementor
• Павел Сажин — управление проектом и QA-итерации
• Тимур Арбаев — проверка шаблонов и обратная связь по Шаблонам 1, 3 и 6, а также оценка второй партии; проверка соответствия дизайна перед передачей агентству
• Антон Херсун, xaverPRO — руководитель проекта (оценка, коммуникация с агентством, цикл пошаблонного утверждения)

Управление проектом со стороны агентства и дизайн-решения оставались за партнёрским агентством на всём протяжении работ. Наша команда была невидима для конечного клиента (в этом проекте конечного клиента не было — результатом был сам шаблон).

Агентствам, заказывающим разработку WordPress