Редизайн главной страницы юридического сайта — Adobe XD в WordPress
Редизайн главной страницы из Adobe XD в WordPress для юридической практики из США — 10 задач, ~59 часов по двум смежным практикам, ~4 месяца календарного срока.
Скриншоты сделаны автоматическими инструментами — некоторые элементы могли не загрузиться полностью или перекрываться. Для наиболее точного представления открыть действующий сайт →
Разработать новую главную страницу по макетам Figma от агентства. Передать в виде черновика. Принять один раунд проверки принципалом. Запуск только после согласования.
Подход к редизайну
1 макет Adobe XD для главной страницы юридической практики из США, который мы развернули на 2 смежные практики под одним агентством — Dale Rose Law и Rose Knows Law. Каждая жила на собственной тестовой среде WP Engine, каждую проверяли и утверждали отдельно, и только потом публиковали. Бриф звучал так: переделать главную, а затем подогнать цветовую палитру и шрифты под весь сайт. На страницах услуг Dale Rose всплыло ограничение: тексты были привязаны к 1 городу. Мы не стали переписывать их втихую — вынесли вопрос агентству.
Краткий обзор
| Параметр | Значение |
|---|---|
| Отрасль клиента | Юридические услуги |
| Клиент | Rose Knows Law (юридическая практика в США) |
| Формат сотрудничества | White-label редизайн главной страницы и сопутствующая разработка для маркетингового агентства из США, специализирующегося на сайтах для локального бизнеса |
| Тип проекта | Редизайн главной страницы из Adobe XD в WordPress — сборка на тестовой среде, публикация после утверждения агентством; плюс изменения меню и доработки очереди задач для той же практики |
| Объём работ | 1 редизайн главной страницы — полный редизайн по макету Adobe XD агентства, сборка в WordPress на тестовой среде, запуск после утверждения агентством; плюс 9 сопутствующих задач: навигация меню, доработки очереди задач, контентные страницы и обновления WordPress для Rose Knows Law и смежной практики (Dale Rose Law) под тем же агентством |
| Срок | ~4 месяца (ноя 2024 – мар 2025), в ритме агентства |
| Затраты | ~59 часов — ~40 ч редизайн главной (Dale Rose Law) · ~13 ч изменения Rose Knows Law (меню, очередь задач, редизайн главной, дополнительные страницы) · ~6 ч управление и обновления |
| Команда | 5 специалистов (разработчик + QA + руководитель проекта) |
| Передача дизайна | Макет Adobe XD (собственность агентства; URL дизайна не раскрывается) — утверждённое ТЗ явно требовало применить новый дизайн к существующему сайту |
| Технологии | WordPress · Elementor · Gravity Forms · Rank Math SEO · WP Engine · Site Checker (xaverPRO QA плагин) |
| Режим сборки | Сборка на тестовой среде — новая главная страница собрана на тестовой среде WP Engine параллельно с работающим сайтом, без промежуточной публикации |
| Результат | Редизайн главной страницы сдан по спецификации, обновлена навигация меню, доработана очередь задач, добавлены контентные страницы, сайт опубликован на roseknowslaw.com |
| Раунды проверки | ≈8 раундов проверки за 120 дней |
Постановка задачи
Маркетинговое агентство из США, нанятое юридической практикой Rose Knows Law, искало партнёра-разработчика для редизайна главной страницы и выполнения ряда сопутствующих изменений. Задача поступила в двух потоках: редизайн главной страницы для смежной юридической практики (Dale Rose Law) на основе утверждённого макета Adobe XD и набор текущих изменений для самой Rose Knows Law — улучшения навигации меню, редизайн главной страницы, доработка очереди задач и дополнительные страницы.
Явные ограничения: редизайн главной страницы сначала собирается на тестовой среде и не публикуется до проверки и утверждения агентством; изменения навигации меню должны были корректно работать на большом экране и мобильных устройствах без нарушения существующей структуры сайта.
На смежной практике (Dale Rose Law) проявилось ограничение: старый контент страниц услуг был написан специально для одного местоположения (McKinney) и не мог быть автоматически адаптирован для отображения по нескольким регионам в рамках существующей архитектуры шаблонов — тексты старого сайта были привязаны к конкретному адресу на уровне содержимого страниц, а не таксономии. Мы передали архитектурное ограничение агентству, вместо того чтобы переписывать контент за рамками ТЗ.
Задача была сформулирована лаконично: воспроизвести Adobe XD в WordPress/Elementor; сдать сборку на тестовой среде; доработать очередь задач; обновить навигацию; добавить контентные страницы по запросу; не выходить на прямой контакт с конечным клиентом на всём протяжении проекта.
Контекст рисков. Главная страница юридической практики несёт более высокую цену ошибки, чем большинство сайтов локального бизнеса. Каждый визуальный элемент на экране — имена адвокатов, направления практики, контактные призывы к действию — соседствует с юридически чувствительным материалом. Редизайн никогда не публиковался до тех пор, пока агентство не проверило сборку на тестовой среде; в каждый момент разработки работающая главная страница была либо неизменённым оригиналом, либо полностью проверенной новой версией, но никогда — недоработанным гибридом.
Сборка на тестовой среде здесь — не процедура ради галочки, а рабочий барьер: он держит агентство в стороне от аварии на работающем сайте юридического клиента.
Смежную практику (Dale Rose Law) вели по той же модели: 40-часовой редизайн главной собрали на отдельной тестовой среде, агентство его проверило и опубликовало только после утверждения. У обеих практик было 1 агентство и 1 команда, но каждая получила собственную тестовую среду и собственный этап проверки.
Как мы это сделали
1. Из Adobe XD в WordPress, сборка на тестовой среде. Главную страницу собрали целиком в WordPress/Elementor по утверждённым макетам Adobe XD — hero, секции услуг, профили адвокатов, контактный блок, футер. Поскольку Elementor уже был установлен на сайте, сборка вписалась в существующую тему и глобальную систему стилей без внедрения нового конструктора страниц.
2. Сборка на тестовой среде, не на рабочем сайте. Новую главную развернули на тестовой среде WP Engine рядом с существующей рабочей версией. Каждый цикл QA гоняли на тестовой среде до запуска. Это операционная мера предосторожности, специально запрошенная агентством для данного типа проекта и отрасли клиента — юридическая практика не может позволить себе полусобранную главную страницу, попавшую в публичный доступ в середине QA.
Принцип здесь прост: при редизайне главной страницы юридического сайта команда разработки по умолчанию работает через тестовую среду. Сайт стоматологии или ресторана может позволить себе запуск без полной проверки; юридическая фирма — нет.
3. Редизайн навигации меню — большой экран и мобильные устройства. Отдельная задача была посвящена структуре навигации: увеличение размера текста на большом экране, внедрение выпадающих меню на мобильных устройствах и удобство меню на обоих типах экранов.
Разработчик предложил всплывающее боковое меню вместо стандартной горизонтальной панели, поскольку набор юридических направлений охватывал несколько регионов и стандартный шаблон выходил за границы экрана; агентство подтвердило подход до реализации. Мобильное выпадающее меню сделали отдельно — переключателем, а не постоянной панелью в стиле большого экрана — глубина навигации сайта делала стандартный подход непрактичным для маленького экрана.
4. Доработка очереди и контентные страницы. Агентство передало нам список вопросов в Google Sheets для Rose Knows Law. Команда разобрала список, провела триаж и закрыла каждый пункт через отслеживаемые задачи Redmine. Отдельной задачей добавили страницу биографии адвоката для смежной практики — на существующих изображениях сайта и предоставленных текстах.
5. Внутренний QA перед передачей агентству. QA гоняли на больших и мобильных экранах — он выявил типичные артефакты переноса из XD в Elementor (поведение отступов, цели ссылок, подключение форм, адаптивность меню). Затем агентство проверило сборку на тестовой среде и дало финальные замечания перед публикацией.
Старые тексты страниц услуг смежной практики были написаны для одного города — McKinney — и новый дизайн не устранял это ограничение автоматически. Мы передали структурное ограничение агентству, не переписывая контент за рамками ТЗ; визуальный редизайн сдали в чистом виде, а решение по текстам осталось за агентством.
Контроль качества
Сборка главной страницы Dale Rose на тестовой среде WP Engine была переведена во внутренний статус «Проверено, на отправку» 26 февраля 2025 до того, как агентство увидело сборку; работающая главная страница оставалась нетронутой на всём протяжении работ, и задача была закрыта только после подтверждения агентством.
Предварительный QA проводился через Site Checker — см. наш подход к QA по категориям и порогу нулевых ошибок. Собственный QA агентства выполнялся после передачи и фиксировал замечания в общую очередь задач для нашего цикла исправлений до момента утверждения.
Результаты
| Метрика | Результат |
|---|---|
| Редизайн главной страницы | Сдан — Adobe XD реализован в Elementor, заменив предыдущую главную страницу (Dale Rose Law) |
| Редизайн главной страницы (Rose Knows Law) | Сдан — главная страница переработана по ТЗ агентства |
| Режим сборки | Сборка на тестовой среде — новая главная страница собрана на тестовой среде WP Engine параллельно с работающим сайтом, без промежуточной публикации |
| Навигация меню | Переработана — увеличен размер текста на большом экране, реализованы мобильные выпадающие списки, для большого набора пунктов применено всплывающее боковое меню |
| Доработка очереди | Список вопросов из Google Sheets разобран и закрыт через отслеживаемые задачи Redmine |
| Контентные страницы | Добавлена 1 страница биографии адвоката (Adam Rose) для смежной практики |
| Обновления WordPress | 2 задачи обновлений закрыты |
| Срок | ~4 месяца (ноя 2024 – мар 2025), сдано в темпе агентства |
| Затраты | ~59 часов — ~40 ч редизайн главной · ~13 ч изменения Rose Knows Law · ~6 ч управление и обновления |
| Команда | 4 специалиста — без отдельного аналитика, без дизайн-лида (дизайн на стороне агентства), без SEO-лида (миграция не требовалась) |
| Статус сайта | Работает, открывается по адресу https://roseknowslaw.com/ — проверено в апреле 2026. |
Результат, если кратко: макет агентства в Adobe XD был реализован в Elementor на тестовой среде, прошёл внутреннюю проверку и проверку агентства, и был опубликован — вместе с обновлением навигации меню, доработкой очереди задач и добавлением контентных страниц — за ~4 месяца и около 59 часов работы.
Процесс
| Этап | Длительность | Результат |
|---|---|---|
| ТЗ и оценка | ~1 неделя | Adobe XD проанализирован, Elementor подтверждён, согласована модель сборки на тестовой среде |
| Сборка главной (тестовая среда) | ~3 недели | Полная главная страница реализована в Elementor на тестовой среде WP Engine (Dale Rose Law) |
| Изменения Rose Knows Law | ~6 недель | Обновлена навигация меню, доработана очередь задач, выполнен редизайн главной, добавлены страницы |
| Внутренний QA | ~1 неделя | Проверка на больших и мобильных экранах; мелкие дефекты найдены и исправлены |
| Запуск | ~1 неделя | Страницы опубликованы; выполнена проверка после запуска |
Этапы пересекаются — изменения Rose Knows Law велись параллельно со сборкой главной Dale Rose Law, а доработка очереди задач шла одновременно с редизайном навигации. Это характерно для многопоточного проекта, где цикл QA идёт непрерывно, а не строго последовательными фазами.
Команда
Команда проекта
- Никита Тумашевич — сборка главной страницы в Elementor по Adobe XD; редизайн навигации меню
- Павел Сажин — управление проектом и QA-итерации
- Анна Полунина — поддержка реализации и QA
- Владимир Козлов — доработка очереди задач и дополнительные страницы для Rose Knows Law
- Антон Херсун, xaverPRO — руководитель проекта (оценка, коммуникация с аккаунт-менеджером агентства, утверждение, координация QA)
Управление проектом со стороны агентства, дизайн и коммуникация с клиентом оставались за партнёрским агентством на всём протяжении работ. Наша команда была невидима для конечного клиента.
Агентствам, заказывающим редизайн WordPress
При редизайне юридического сайта правка 1 шаблона может незаметно сломать вёрстку всех страниц, которые его делят, — а на сайте, где репутация под лицензией, сломанная страница тянет за собой регуляторные последствия. У 1 практики это адвокат-одиночка, где каждый пиксель на счету; у другой — сеть юридических кабинетов с общей библиотекой бренда. Поломки вылезают уже после запуска: слаги меняются без карты редиректов, и страницы, которые агентство вывело в топ, пропадают из поиска. Сетки компонентов рассчитаны на длину текста, которой у клиента нет, — биографии адвокатов и карточки направлений обрезаются. Цвет и шрифты разъезжаются неравномерно: главная уже в новом виде, а архивы и сайдбары остаются на старой палитре.
Вопрос не «переделаете ли главную?», а «как вы защитите карту редиректов, зафиксируете каскад стилей и проверите сетку на реальном тексте?»
Пришлите макеты и текущий перечень URL. Мы проверим библиотеку компонентов на несовпадение по длине текста, проследим каскад типографики по всем шаблонам и вернём фиксированную смету в часах.
Пока нет ТЗ? Пришлите описание в один абзац — вернёмся с вопросами, которые стоит задать. Прислать описание →
черновик страницы
Этот кейс — одностраничный. Та же методология масштабируется на многостраничный редизайн.
Редизайн главной страницы и многостраничный редизайн используют одну и ту же базовую методологию — Figma-led, соответствие инструментальной среде, сначала черновик. Масштаб различается; методология — нет.