Cоздание дизайн‑системы и редизайн сайта самого посещаемого онлайн‑СМИ Псковской области — «Псковской ленты новостей»

Как обеспечить производственные потребности крупного медиа с большим количеством продуктов гибкой дизайн‑системой

Дизайн-токены и фрагмент кода нового сайта ПЛН Создание дизайн-системы и редизайн сайта самого популярного онлайн-медиа Псковской области — «Псковской ленты новостей»

Лидирующее онлайн‑медиа Псковской области — «Псковская лента новостей» (или просто ПЛН) — к началу 2020х годов столкнулось с необходимостью очередного редизайна и попутно — разработки дизайн‑системы для обслуживания всевозрастающего количества внутренних продуктов. Она должна была стать достаточно простой в использовании, но при этом гибкой, вариативной и однозначно выделяющей продукты бренда на фоне конкурентов.

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

Затем настала очередь разработки системы базовых и семантических дизайн-токенов. А уже на их основе я спрограммировал атомарные и функциональные компоненты, шаблоны страниц и сделал интерактивный адаптивный прототип на основе собранных в JSON‑файлы моковых данных для тестирования интерфейса на базе фреймворка SvelteKit.

Исследования и контекст

ПЛН на протяжении порядка 10 лет в 2‑2,5 раза опережает ближайших преследователей на региональном медиарынке по посещаемости. Ключевые метрики сайта pln-pskov.ru в 2022-2023 годах:

В неделю В месяц
Уникальных посетителей > 136 тысяч > 490 тысяч
Просмотров страниц > 620 тысяч > 2 млн
Глубина просмотра ≈ 2,5
Время на сайте ≈ 2,85 минуты

* Цифры в таблице — по данным сервиса «Яндекс Метрика» за период с 1 марта 2022 года по 26 февраля 2023 года (среднее арифметическое) без учёта посещений роботов

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

Анализ метрик посещаемости сайта «Псковской ленты новостей»

Некоторые наблюдения по резуальтатам анализа метрик:

  • тотальное доминирование пользователей, просматривающих сайт со смартфона (8 из 10), но при этом ядро аудитории — пользователи десктопов;
  • женская аудитория вдвое превышает мужскую (частично это коррелируется с демографической картиной активного населения региона, а также со структурой занятости в сфере госслужбы, к которой относится значительная часть ядра аудитории), но уступает ей по глубине просмотра на 11 % (или на 0,2 процентных пункта), и на 33,7 % (порядка 25 секунд) — по времени на сайте;
  • доминирующая возврастная группа — люди старше 35 лет, более половины всех пользователей — старше 55 лет;
  • основная доля пользователей приходит на сайт через поисковый траффик и часто даже не видит главную страницу, однако на втором месте по источникам заходов — прямые переходы через закладки или набор url сайта;
  • низкий показатель доскролла главной страницы и фактического нефункционирования отдельных элементов интерфейса.

Дизайн-система

Базовые токены: типографика

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

На старом сайте использовалась одна гарнитура — Roboto, то есть стандартный шрифт для ОС Android. И в этом заключалось сразу две проблемы.

  1. Тексты на сайте не имели характера, выглядели слишком утилитарными (а кроме того, кириллица в Roboto всё-таки содержит слишком много не самых удачных решений).
  2. Сложно было разделять собственно контент и всевозможные многочисленные служебные надписи (названия рубрик, выводы даты и времени публикации, названия подразделов).

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

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

Отдельный плюс «Интера» — впечатляющие возможности стилизации и кастомизации текста за счет широкого спектра лигатур. Это позволило настроить нужный вариант отображения цифр, форму точек и запятых, соотносящихся с рубленым характером логотипа бренда.

Шрифт Inter Шрифт Inter

А шрифтом с засечками — для основных массивов текста статей — стала специальная гарнитура Stix Two Text, созданная в рамках STIX Project для научных, технических и медицинских публикаций в цифровой среде — с упором на удобство восприятия текста в небольших кеглях и на экранах разного качества.

Шрифт Stix Two Text Шрифт Stix Two Text

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

Таблица базовых токенов типографики для редизайна «Псковской ленты новостей»

Базовые токены: палитра

У бренда была фирменная цветовая лакуна — оттенки бордо. Между тем, при каждом редизайне конкретный цвет бренда всякий раз слегка видоизменялся в заданных рамках, то есть жесткого канона не существовало. Поэтому, ввиду замечаний некоторых пользователей об ощущении слишком тёмного и даже «грязного» дизайна, было решено слегко освежить фирменный цвет, подняв и яркость, и насыщенность.

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

Таблица базовых цветовых токенов для редизайна «Псковской ленты новостей»

Логотипы

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

За счет увеличения эффекта плотностности и цельности логотипа впоследствии был использован приём использования эмблемы в шапке сайта и в промо-продукции как своего рода этикетки — без отступа от края слева.

Старый логотип «Псковской ленты новостей» (2013-2020 годы)

Впоследствии на базе обновленного логотипа были разработаны или доработаны логотипы продуктов бренда, например, логотип радиостанции ПЛН-ФМ и логотип направления документальных фильмов и стримминговых передач ПЛН-ТВ.

Шрифт Inter Шрифт Inter

UX и UI

Навигация