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

«Lenta.ru сменила дизайн сайта», «NYTimes запустили свой проект Snow Fall», «Редизайн Time.com и три колонки новостей»...

Помните эти заголовки?

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

Какие основные тенденции в дизайне новостных порталов актуальны для сегодняшнего дня?

Анатолий: Это довольно очевидно — все больше сайтов стараются переходить на кросс-платформенные фронтэнд-фреймворки (ужасно звучит, да). Проще говоря, чтобы и на айпадике, и на десктопе все выглядело похоже и имело одинаковый функционал. Ну и иконку-бургер конечно: BBC, Time.com, NYTimes, Guardian и тд.

Многие порталы перепрофилируются в агрегаторы контента или, как минимум, комбинируют.

Что касается оформления статей, появилось приятное разделение: пишут либо коротко, чтобы в блог легко перепостить, либо делают интересные длинные истории с видео, аудио, картинками и прочим — яркий пример на NYTimes.

Александр: Все что происходит сейчас, происходит опытным путем.

Например, вышел 1,5 года назад Qz.com и их новационный вариант с двумя лентами, напоминающий твиттер, стал тенденцией. Time вот её тоже подхватил.

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

Юрий: В первую очередь это, конечно, свобода в представлении основного контента — новостей и статей. Эффектная подача материалов с шикарной типографикой, множеством крупных иллюстраций, текстом крупного размера и минимумом обвязок в колонках появилась достаточно давно. Но в последние год-два случился взрыв ее популярности, во многом благодаря взлету 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 и другие методы пользовательских исследований.

С какой самой сложной и интересной задачей вы сталкивались на практике в работе над большими новостными порталами?

Анатолий: Если лично о моем опыте, то я много вынес из совместной работы над редизайном USAToday.com. Немало интересных и довольно очевидных теперь решений мы с коллегами вырулили в процессе. Сложностей хватало, в первую очередь из-за языка и специфики газеты: я участвовал в работе над спортивной, финансовой и новостными секциями, и сходу ухватывать детали локального контента было непросто поначалу, но в итоге вышло здорово. Конечно, это очень классный опыт.

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

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

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

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