ВЕРСТА

Редизайн раздела статей · 2026

Вита Хауз — раздел статей

Клиент
Вита Хауз, земельно-правовая компания
Тип
Редизайн раздела статей
Год
2026

Клиенту нужен был удобный раздел с материалами кадастровых инженеров и земельных юристов. Мы спроектировали и внедрили витрину и страницу статьи — с поиском, темами и навигацией для чтения, внутри действующего сайта на 1С-Битрикс.

Проект «Вита Хауз — раздел статей» — превью

01 — Чужой бренд

Фирменный стиль клиента

Бренд Вита Хауз был до нас: знак, синий и гарнитура Mont. Раздел собран в этих рамках.

Знак Вита Хауз — пятилучевая фигура синего цвета
Знак — пятилучевая фигура, «звезда-домик», в двух оттенках синего.
Логотип Вита Хауз: знак и название строчными
Название в логотипе набрано строчными: «вита хауз».
Заголовок статьи, набранный гарнитурой Mont
Заголовки и текст — Mont, три начертания.
Синий 110%#001DC8
Основной#0023F5
Синий 60%#00A3FF
Синий 30%#9EDCFF
Чёрный#363636

02 — Раздел статей

Первый экран

Темы со счётчиками стоят над списком, рядом поиск по материалам, а в карточке видны рубрика и время чтения.

vita-house.ru/articles/Первый экран1600 × 1000
Первый экран раздела статей Вита Хауз: темы со счётчиками, поиск и выделенный анонс
Было

Раньше теги и фильтры занимали отдельные блоки, а выбрать материал можно было только по заголовку.

03 — Три экрана

Как устроен раздел

Выбрать
Темы раздела, поиск и выделенный анонс

Темы и поиск

Темы со счётчиками, поиск и подборки собраны над списком. Выделенный анонс задаёт точку входа.

Читать
Начало статьи: заголовок, вводный текст, автор

Структура статьи

Заголовок и вводный текст отделены от материала, рядом — автор и время чтения. Появились оглавление и прогресс чтения.

Продолжить
Тело статьи и колонка рекомендаций

Связанные материалы

Рекомендации по теме и услуге идут рядом с текстом, а в конце — переход к консультации.

04 — Детали

Решения интерфейса

Два шаблона, не новый сайт

Раздел работает внутри действующей 1С-Битрикс. Мы изменили витрину и страницу статьи, не трогая остальной сайт и привычную работу редакции.

Адреса сохранены

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

Навигация на узком экране

Оглавление длинного материала на телефоне убрано в компактную панель — иначе оно занимало бы первый экран целиком.

05 — Ход работы

Что было и что сделали

Задача

С чего начали

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

Решение

Что изменили

Изменили два шаблона в существующей системе. Темы со счётчиками, поиск и подборки собрали в понятную иерархию над списком. У статьи появились оглавление, прогресс чтения, автор и время чтения, а в конце — рекомендации по теме и услуге. Публикации и публичные адреса сохранены.

06 — Что входило

Состав работы

  • Исследование и структура
  • Арт-дирекшн
  • UX/UI-дизайн
  • Разработка и запуск

Технологии, на которых собран проект.

1С-БитриксPHPJavaScriptCSSАдаптивная вёрстка

Границы кейса

Что показывает эта страница

Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.

Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.

Следующий кейс · Концепт-редизайн сайта Пятёрочка Проект «Пятёрочка» — превью

Создадим продукт, который хочется показывать.

Расскажите о задаче — вернёмся с вопросами и первым направлением решения.

Следующий шаг · ВЕРСТА

Есть задача? Начнём с разговора.

Поможем разобраться в задаче и определить следующий шаг. Без обязательств и готового ТЗ.

В рабочее время · обычно в тот же день