Тренды 2014 года

Тенденции в мире дизайна новостных порталов

• 18 ИЮНЯ 2014

Комментарий написан для блога Behance Russia

Какие тенденции сейчас существуют в мире дизайна новостных порталов?

В первую очередь это, конечно, свобода в представлении основного контента — новостей и статей. Эффектная подача материалов с шикарной типографикой, множеством крупных иллюстраций, текстом крупного размера и минимумом обвязок в колонках появилась достаточно давно. Но в последние год-два случился взрыв ее популярности, во многом благодаря взлету Medium, сделавшего на этом ставку. Компании вроде Vox Media (The Verge, Polygon, Vox, SB Nation) и Look at Media давно научились делать эффектные журнальные публикации на потоке благодаря мощным CMS, доступные далеко не каждому. Хотя я считаю, что именно Medium доказал, что есть недорогой способ добиться близкого эффекта.
Параллельно с этим развивается более штучный формат — лонг-риды, когда статья обрастает множеством интересных интерактивных ходов, благодаря чему история повествуется в живом и увлекательном виде. Выглядят они круто, но их производство может быть достаточно дорогим — про первый такой материал от New York Times, главной кузницы и популяризатора лонг-ридов, упоминалась команда из 16 человек и полгода работы. Вряд ли на полную загрузку, да и за прошедшее время технологии прокачались, но все же. Хотя с учетом того, что такие же требования стоят при создании очень востребованных одностраничных промо-сайтов, которые обросли интерактивом вроде инфографики, динамического появления элементов при прокрутке, фонового видео и т.п. — создание лонг-ридов будет становиться все проще. Есть еще скепсис по поводу их эффективности, но тут уже на усмотрение использующего.
Правда, вся эта красота требует особенного отношения с рекламой и ее форматами. Нет смысла биться за эффектную подачу материала, если он впоследствии будет хаотично обвешан зоопарком баннеров и текстово-графических блоков. Если вы хотите добиться чистоты и легкости при работе с контентом, нужно плотно взаимодействовать с продавцами рекламы, чтобы найти хорошие компромиссные решения — от изменения форматов баннеров до перехода к другим видам контрактов вроде спец.проектов. Бизнес-составляющая для продукта первична, так что заняться этим лучше еще до начала дизайна.

Какие основные сложности встречает дизайнер, когда речь идет об оформлении больших/длинных и сложных текстов?

Сложно быть реалистом и при этом не падать духом 🙂 Всегда хочется нарисовать материал в идеальном виде, когда есть все возможные виды врезок и цитат, множество иллюстраций и таблиц. По факту часто оказывается, что большинство публикаций используют только часть из всего этого арсенала, так что в жизни выглядят вяло. Поэтому критично проверять макеты на реальном контенте, который поставляет редакция. Именно поэтому компании вроде Vox Media и Look at Media уделяют много внимания собственным CMS — они дают авторам текстов мощные инструменты для форматирования на основе готовых модулей, так что на выходе всегда получается
Реализм касается и рекламы — стоит примерять баннеры из жизни, даже если они трешовые. И ставить их в реальную коммерческую сетку. А если они вам не нравятся — работать с отделом продаж над улучшением требований к рекламодателям и изменением самих форматов.
Хорошая типографика, естественно, дичайше важна для комфортного чтения и формирования своего лица у издания. Выйти за пределы Core Fonts for the Web достаточно легко — все больше хороших кириллических шрифтов для самых разных задач. А благодаря сервисам типа Google Web Fonts и Typekit их подключение технологически сравнительно несложно. Правда, при попытке использовать их на практике возникает куча вопросов и проблем — рендеринг в разных браузерах на разных платформах, скорость загрузки шрифтовых файлов и их вес, деградация для Windows XP (для сервисов с большой посещаемостью). Не опозорьтесь в последний момент, проверьте как отображается сверстанный шрифт в Windows 7, Windows 8 и Mac OS. Ваша работа была бессмысленна, если комфортно прочитать статью можно только на скриншоте в вашем портфолио.

Какие сложности встречаются, когда речь идет о большом потоке информации/новостей каждый день?

Тут роль визуальной части работ дизайнера куда меньше, чем компетенции по проектированию интерфейсов и информационной архитектуре. А также желание и умение обращаться с веб-аналитикой. Наша задача — сделать так, чтобы контент находили, глубина просмотра за счет хорошей и уместной перелинковки повышалась, вовлеченность пользователя и время проведенное на сайте росли. Поэтому нужно постоянно следить за статистикой и регулярно экспериментировать, с тем чтобы продукт становился успешнее. На первый план выходят Google Analytics и Яндекс.Метрика (либо собственные решения компании), возможно — юзабилити-тестирование, eye tracking и другие методы пользовательских исследований.
Важно работать в плотной связке с продукт-менеджером с тем чтобы находить и прокачивать точки роста сайта, решать текущие проблемы, по-максимуму обрабатывать ситуативные всплески (например, Олимпиада или вооруженный конфликт) и сюжеты. Командная работа важна на всех этапах, но тут она особенно критична.

Какая самая сложная и интересная задача была у вас на практике, которую удалось решить при работе над большими новостными порталами?

Одна из главных задач нашей команды в Mail.Ru Group — это обновление дизайна продуктов компании, в том числе большого пула контент-проектов (Авто, Cars, Афиша, Гороскопы, Дети, Здоровье, Леди, Недвижимость, Новости, Погода, Спорт, Hi-Tech, ТВ). В некоторых из них скопилось много наследия прошлого по структуре страниц, рекламным контрактам и всевозможным обвязкам. Поэтому с одной стороны, необходимо все это тщательно расчищать и облегчать, чтобы читатели смогли сфокусироваться на полезном контенте, работать с сервисами комфортнее. С другой стороны, нужно делать это аккуратно, с тем чтобы пользователь не был шокирован резкими изменениями, а рекламодатели получили альтернативу изменяемой коммерческой сетке. Так, чтобы продукт продолжал приносить хорошую прибыль. Поэтому иногда приходится делать итеративные изменения дизайна, постепенно улучшающие его. Но это скорее общий контекст, который характерен для многих компаний.

‍
Гораздо более интересный и сложный вызов — это облегчение работы с портфелем продуктов, которых в случае наших контент-проектов — 13 штук. Рисовать их по одному, т.е. каждый по-своему — достаточно затратно и долго. Поэтому мы искали способ унифицировать работу с ними, найти общее решение, которое позволило бы упростить их проектирование, дизайн, запуск и развитие. Оптимальный подход удалось найти не сразу, но в прошлом году все срослось. Во-первых, это общие принципы построения интерфейса и визуального дизайна — по сути хороший гайдлайн. Во-вторых, технологическое решение, позволяющее зашить дизайн на уровень “строительных блоков”, из которых разработчики собирают продукт — грубо говоря, “Bootstrap на стероидах” или мощный шаблонизатор.

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

‍
Поэтому для меня самое интересное — найти связку технологии и дизайна, которая позволит нам делать больше меньшими силами. Важно выйти из Фотошопа и думать о всем продуктовом цикле, а не только отполированных дизайн-макетах. И в эту сторону сейчас идут многие. Только в Рунете за последний год появилась и анонсирована масса технический решений, позволяющих создавать эффектные решения для контент-проектов — Arcticle CMS от Look at Media, Tilda от FunkyPunky, ReadyMag и другие. Не говоря уже о западных продуктах. Так что весь рынок движется в эту сторону и важно не остаться за бортом.