Страницы-кейсы для юридической компании

От чернового прототипа к структуре

Заказчик принёс черновик: перечень блоков и тексты. Мы определили главную задачу страницы: чтобы человек со своей ситуацией быстро нашёл результат, ход дела и подтверждение, а не читал всё подряд. Для этого блоки были расставлены по порядку чтения: итог, паспорт дела, исходная ситуация, задачи, риски, стратегия, хронология, действия, доказательства и документы.

В структуру вошли также блоки доверия и действия: автор с профилем эксперта, комментарий ведущего адвоката, отзыв клиента, связанные кейсы, FAQ и призыв к консультации.

Макеты в Figma и согласование

Мы отрисовали макеты страницы в Figma для компьютера и для телефона: типографику, цвета, таблицы, карточки, аккордеон и состояния блоков. Заказчик смотрел макеты в Figma и вносил замечания до начала разработки, а утверждённая версия стала техническим заданием для вёрстки.

Такой порядок дал предсказуемость: вопросы по дизайну закрывались на макете, а не на готовой странице.

Как организован длинный материал

Страница читается как несколько уровней. Верхний уровень — заголовок, статус дела, плитки с цифрами (три инстанции, срок, судебная экспертиза, стабильность результата) и плашка с главным результатом. Следующий — паспорт дела в таблице. Дальше идут разделы с карточками и списками, где одно понятие занимает один блок.

Хронология сделана раскрывающимися этапами: по умолчанию видны названия месяцев и событий, а детали, результат и источник открываются по клику, поэтому длинный путь дела не превращается в стену текста.

• —19 разделов с понятными заголовками (H2) и 29 подзаголовков
• —Таблицы для сравнения параметров и действий адвоката
• —Цветные плашки для результата, источника и статуса этапа
• —Печать «Вступило в силу» как визуальный якорь шапки

Документы и доверие

Раздел с судебными актами показывает документы карточками с метками формата и пометкой «Обезличено», чтобы читатель понимал, что персональные данные скрыты. Рядом с материалом указан автор: фото, специализация, опыт и ссылка на профиль эксперта.

Для актуальности на странице отображаются дата публикации и дата актуализации, а статус дела и срок стабильности результата вынесены в шапку.

Мобильная версия

Таблицы, плитки и аккордеон адаптированы под узкий экран: колонки таблицы остаются читаемыми, карточки встают в один столбец, а хронология сохраняет вертикальную линию с отметками этапов. Верхняя часть страницы показывает навигационную цепочку, кнопку возврата, статус и тезисы, не заставляя пользователя искать главное.

Реализация на сайте и поисковая разметка

Дизайн перенесён на сайт компании на WordPress (PHP): шаблон страницы-кейса, стили таблиц и аккордеона, адаптивная сетка. Страница использует навигационную цепочку «Главная / Кейсы / название кейса», заголовок H1, мета-описание и блок «Частые вопросы» с микроразметкой FAQPage, чтобы вопросы и ответы могли попадать в расширенные сниппеты поиска.

Структура одинакова для разных дел, поэтому следующие кейсы можно оформлять в том же виде.