Р7 - Центр поддержки

Перед нами стояла задача провести комплексный редизайн визуальной части сайта (UI-шаблона) без изменения серверной архитектуры и с сохранением совместимости с текущими плагинами WordPress. Ключевые задачи:

Визуальная модернизация. Переработать типографику, цветовую схему и графику в строгом соответствии с новым фирменным стилем (брендбук Р7). Использовать корпоративные цвета, шрифты Gilroy и Arial, обеспечить минималистичный и профессиональный дизайн.

Оптимизация пользовательского опыта (UX). Улучшить навигацию по разделам, внедрить визуальные маркеры для разных типов контента (FAQ, инструкции, справочники, документы). Особое внимание уделить страницам статей, категорий, подкатегорий, релизноутсов и PDF-документации.

Внедрение светлой и тёмной темы. Реализовать возможность переключения между темами оформления для комфортной работы в любых условиях освещения.

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

SEO и производительность. Обеспечить высокую скорость загрузки (Core Web Vitals), поддержку мобильных устройств и соответствие требованиям поисковых систем.

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

Создание UX/UI-дизайна. На основе брендбука мы разработали современную дизайн-концепцию, которая сочетает корпоративную строгость с удобством для пользователя.

Типографика и цвета: Использовали фирменные шрифты Gilroy (Light, Regular, Bold) и Arial, а также основную палитру (белый, светло-серый, нейтральный серый, космический чёрный) и акцентные цвета из брендбука.

Светлая и тёмная темы: Спроектировали две полноценные темы оформления, переключаемые одной кнопкой. Для тёмной темы адаптировали все элементы — от фона до иконок и блоков кода, сохранив контрастность и читаемость.

Типовые страницы: Проработали макеты для главной страницы (с уникальным шапкой и блоками продуктов, доп. информации и обновлений), страниц статей (с оглавлением, инфоблоками, оценкой), категорий, подкатегорий, FAQ, релизноутсов и PDF-документации. Для каждого типа страниц создали уникальные визуальные решения, улучшающие навигацию и восприятие контента.

Улучшение пользовательского опыта на ключевых страницах.

Страницы статей:

Внедрили иерархическое оглавление, которое соответствует заголовкам H2-H6 и фиксируется при прокрутке. Добавили стандартизированные блоки «Важно», «Примечание», «Выделение серым» с соответствующими иконками и цветами.

Улучшили отображение кода, таблиц (с горизонтальным скроллом на мобильных), внутренних и внешних ссылок. В подвале статьи разместили блоки оценки, «Задать вопрос» (с отправкой через AJAX) и рекомендуемые материалы.

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

FAQ и PDF-страницы: Обновили стили, ввели визуальную иерархию, улучшили читаемость и навигацию.

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

Настройка сайдбара и футера. Разработали адаптивный сайдбар, который на десктопе отображает меню разделов и блоки «Недавно обновлённые статьи» и «Последние обновления», а на мобильных скрывается за гамбургер-меню. Футер структурировали по четырём колонкам (основное меню, полезное, документация, подписка и соцсети) с добавлением кнопки скролла вверх.

Инструменты: Figma, UX Pilot, Adobe Photoshop, Adobe Illustrator.