Дизайн

От контента к интерфейсу: почему ритейл-медиа и бренд-медиа требуют продуктового подхода к дизайну

2176 
 

Спроектировать страницу со статьёй и спроектировать систему, которая производит статьи, — это не одна и та же задача в разном масштабе. Это принципиально разные задачи с разными вопросами, разными пользователями и разными критериями успеха.

Две разные задачи: страница vs система

Страница со статьёй: дизайнер принимает все решения, каждый элемент намеренный, финальный результат фиксированный. Система, которая производит статьи: дизайнер принимает решения о правилах, которым следуют другие люди, а финальный результат бесконечно вариативен. Контент-менеджер берёт блоки, собирает материал, нажимает «опубликовать». Хоть дизайнера в этот и момент нет, результат должен выглядеть так, как будто он есть. Именно это делает проектирование контент-платформы ближе к архитектуре, чем к иллюстрации. Задача не «как это выглядит», а «что можно из этого собрать, и будет ли это всегда выглядеть правильно».

Яндекс 360: два разных читателя у одной платформы

Блог для Яндекс 360 — это контентная площадка о сервисах, которые работают одновременно для бизнеса и для личного использования. Это значит, что читатель страницы — не один человек. Это или IT-директор компании, выбирающий корпоративные инструменты для команды, или обычный пользователь, который хочет понять, зачем ему облачное хранилище.

Яндекс 360 | Дизайн-поддержка Red Collar

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

Аналитика, разрешения и технологический стек как дизайнерские решения

Первое, что сделала команда — прошла через полный аналитический цикл: брифинг, уточнение ТЗ, предложение технологического стека, прототипы, дизайн-концепция. Это не формальность — это способ зафиксировать, для кого именно пишется каждый тип контента и как пользователь с разными намерениями будет по платформе перемещаться. UX-тесты проводились совместно с командой Яндекса, а не самостоятельно: когда у продукта есть внутренняя экспертиза об аудитории, игнорировать её означает делать хуже, а не проявлять дизайнерскую независимость.

Шесть разрешений — не просто расширенная адаптивность. Стандартное «мобайл + десктоп + планшет» работает для большинства контентных сайтов. Шесть разрешений сигнализируют о том, что аудитория использует продукт в очень разных контекстах, и ни один из них нельзя обслуживать как «компромиссный вариант». Промо-блоки для продвижения сервисов Яндекса существуют внутри редакционного контента как отдельный тип объекта — они не разрушают читательский опыт, но решают коммерческую задачу платформы параллельно.

Отдельная деталь, которая много говорит о реальной аудитории: оптимизация для старых версий браузеров. Это не техническая перестраховка — это прямое следствие анализа B2B-аудитории. Корпоративные среды часто работают на жёстко управляемом ПО с устаревшими браузерами, которые IT-отдел не обновляет без причины. Если платформа ломается в таком браузере, она ломается для части своей целевой аудитории. Дизайнер, который не думает об этом, получает красивые макеты и плохие показатели у реальных пользователей.

Весь проект — Python от начала до конца, четыре месяца. Не конструктор, не CMS «из коробки», не адаптированный чужой шаблон. Выбор технологического стека под конкретный продукт — это тоже дизайнерское решение, просто принятое на уровне архитектуры, а не визуала.


Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13691 тендер
проведено за восемь лет работы нашего сайта.


О Дзене: дизайн как унификация

Когда контент уже существует — статьи опубликованы, страницы работают, аудитория их читает — перед дизайном стоит задача, принципиально отличающаяся от проектирования с чистого листа. Нужно сделать разрозненное единым, не сломав то, что работает. Раздел «О Дзене» к моменту начала работы включал три части — «Пресс-центр», «Карьера в Дзене», «Новости» — и все три жили на разных фреймворках. Не в разных дизайнах, а буквально в разных технологических средах. С точки зрения пользователя это ощущалось как переход между тремя разными сайтами, которые случайно оказались под одним доменом.

Дзен | Дизайн-поддержка Red Collar

Дизайн-поддержка Red Collar Точечные изменения вместо визуального обновления

Задача Red Collar — объединить всё это в единую систему с одной CMS (Wagtail) и одной admin-панелью. Но вот что важно: команда сделала только «точечные изменения в дизайн заказчика для единообразия компонентов». Не редизайн, не новый визуальный язык и не точечные изменения. Это профессиональное решение, которое легко недооценить. Когда агентство получает доступ к существующему продукту, есть соблазн «улучшить» его визуально — обновить шрифты, переработать компоненты, добавить что-то своё. Это эффектно выглядит в портфолио и плохо работает в реальности: меняет то, что уже знакомо аудитории, создаёт несоответствие между обновлёнными и необновлёнными частями и отвлекает от реальной задачи.

Реальная задача здесь была инфраструктурная: дать редакции единый инструмент управления контентом. Страницы, собранные на разных фреймворках, объединены в удобную систему. Контент-менеджер работает в одном интерфейсе, а не переключается между тремя разными средами для публикации материала в разных разделах. Прохождение проверки службы безопасности VK — не бюрократическая формальность в этом случае. Это часть реальной сложности платформенных проектов: когда продукт находится внутри крупной экосистемы, у этой экосистемы есть технические требования, с которыми нужно работать параллельно с дизайн-задачами. Для агентства это означает другой режим работы — не изолированный проект, а встраивание в чужую инфраструктуру.

МегаФон ПроБизнес: дизайн-система для работы без дизайнера

МегаФон Технологии ПроБизнес — экспертная платформа для B2B-аудитории: статьи, анонсы мероприятий, материалы о продуктах и решениях компании. Целевой читатель — менеджер, директор по ИТ, закупщик корпоративных сервисов. Отличительная черта аудитории: он читает медленно, сравнивает внимательно и немедленно обесценивает контент, если видит несоответствие между заявленным профессионализмом и тем, как платформа выглядит.

МегаФон ПроБизнес | Дизайн-поддержка Red Collar

Темная палитра как сигнал и таксономия контента

Тёмная цветовая палитра — первое, что замечает пользователь, и это осознанный сигнальный выбор. Большинство корпоративных сайтов в России строятся на светлых фонах с синими акцентами — нейтральная «корпоративная надёжность». Тёмная тема в этом контексте считывается как «технологическая серьёзность»: ближе к среде разработчика, чем к офисному презентационному слайду. Для компании, которая продаёт облачные технологии и ИБ-решения, это правильный регистр.

МегаФон ПроБизнес | Дизайн-поддержка Red Collar

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

Блочная архитектура: делегирование контента без делегирования дизайна

И главное: контент-менеджер собирает новые материалы из готовых блоков по дизайн-системе МегаФона. Это означает, что дизайн платформы написан в виде правил, а не в виде конкретных страниц. Редактор берёт блок текста, блок изображения, блок цитаты, блок CTA — и собирает из них новый материал. Любое сочетание этих блоков даёт результат, который выглядит профессионально и соответствует фирменному стилю.

В этот момент дизайнера в комнате нет. Но его решения — в каждом блоке.

Это противоположность того, что происходит в большинстве корпоративных медиа: дизайнер отрисовал несколько шаблонов, редакция работает по ним, постепенно накапливая отклонения — чуть другой отступ здесь, чуть другой размер шрифта там, случайный цвет вместо системного. Через год платформа выглядит как набор примерно похожих, но не единых страниц. Блочная система с жёсткими правилами не позволяет этому произойти. Редактор не принимает решения о дизайне — он принимает решения о контенте. Дизайн-решения уже приняты и зафиксированы в системе. Это и есть то, что отличает продуктовый подход от страничного: последовательность достигается не дисциплиной редакции, а архитектурой инструмента.

МегаФон ПроБизнес | Дизайн-поддержка Red Collar

Что стоит за продуктовым подходом к контенту

Разница между кампанией и платформой — это разница между проектом с конечной датой и продуктом, который живёт дальше. Кампанию можно спроектировать как серию красивых страниц, потому что они существуют конечное время и не меняются после запуска. Платформа не может быть спроектирована так: завтра выйдет новая статья, на следующей неделе — анонс мероприятия, через месяц — интервью с экспертом. Всё это должно вписываться в систему без дополнительного дизайнерского решения. Отсюда — другая иерархия вопросов. В кампании дизайнер спрашивает: «Как это выглядит?» На платформе — «Что можно из этого собрать, и будет ли любой результат выглядеть правильно?» Это вопрос о правилах, а не о картинках.

Вывод

Три проекта показывают три точки входа в эту задачу. Яндекс 360 — анализ аудитории и технологический стек как дизайнерские решения. «О Дзене» — унификация без разрушения как профессиональная дисциплина. МегаФон ПроБизнес — система блоков как способ делегировать дизайн редакции, не делегируя дизайн-решения.

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

Лучшее
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.




2176

Лучшие статьи

Поделиться: 0 0 0
Лайки за кейсы:  209 Подписчики:  9

Оцените статью
Спасибо за оценку