Как после редизайна USA Today к нам постучался канал CNN

В 2016 году Geex Arts только начинала работать на digital-рынке. Тогда мы уже закрывали заказы, но постоянное желание показать себя было сильнее здорового чувства усталости. В 2016 году одним из проектов на Behance стал редизайн сайта USA Today, позже принесший заказ от CNN.

До работы в креативной дизайн-компании мне довелось два года провести в штате СМИ. От дизайнера требовалось создание инфографики, оформление новостей, подложек и прочего визуального материала. Работая в издании, анализируешь не только собственные проекты, но и то, как на них реагируют пользователи. Это хорошая школа, где впервые задумываешься о структуре сайтов СМИ.

USA Today был Эверестом, на который хотелось взобраться — изучить структуру новостного сайта и попробовать изменить её к лучшему, сохранив единый стиль. Одно из крупнейших изданий в мире за 23 года существования в вебе сменило три обёртки. Если в 1995 году страницы больше напоминали печатную версию, то в 2012 году издание решилось на масштабный редизайн из-за растущей популярности устройств. Изменения касались не только веб-версии, но и периодики.

Тогда USA Today запустила собственные подсайты, интегрируя рекламу в отдельных блоках. Так в 2013 году появились спортивные подсайты на WordPress, а через год компания приобрела Reviewed — обозревателя книг и фильмов, а ныне технологий и устройств. Удачный рубрикатор и бросающийся в глаза рекламный блок выделяли дизайн среди других сайтов СМИ.

Главная USA Today сегодня делится на четыре колонки, последующие страницы выстраиваются в три, а новостные — в одну. В шапке помещено 14 подразделов, включая погоду и всплывающее меню с ещё 17 наименованиями. Сайт одним из первых начал использовать изображения с подложками — текстами внутри баннеров. Однако страницы сбивают с толку нагромождением контента и перечнем в навигации.

Новостные страницы на сайтах сегодня строятся по единому принципу. Контент разделён на одну, две и реже три полосы. Работая над редизайном, я вдохновлялся старыми номерами газеты USA Today и NY Times. Четырёхколоночную вёрстку дополнял сайдбар, текст внутри изображений подводил читателя к рубрикам, а новая типографика не отрицала использования фирменных шрифтов издания. Главное — найти золотую середину между новостной вёрсткой и Material Design.

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

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

Помимо навигации и ссылок на социальные сети, в футер USA Today я решил добавить подраздел с календарём. Щелчок перенаправлял читателя на страницу с архивными новостями по выбранной дате. Таким образом пользователь оценивал, что происходило в США в этот день.

В целом на работу ушло три недели. После публикации проекта на отдельный домен к нам позвонили из USA Today. Юридическая фирма Gannett Co. занимается правовыми вопросами по использованию интеллектуальной собственностью издания.

Тревожиться было не за что — представитель компании попросил лишь удалить отдельные страницы оригинального сайта из открытых площадок. Позже от USA Today мы даже получили благодарность за работу. Наш редизайн был высоко оценён на Behance и получил награду как «Сайт дня» на Cssdesignawards. И мы вошли в honorable mention на Awwwards.

После редизайна мы продолжили экспериментировать над визуальной подачей в своих работах. Так, в Faller оказался перевёрнут текст вместе с навигацией, а Frash Canada разворачивал колонки анимацией. Спустя полгода после релиза USA Today на почту постучались представители CNN. Тогда мы уже работали над несколькими европейскими проектами, но не ожидали увидеть письма с предложением от СМИ.

Компания запускала специальный проект по теме путешествий. Главным заказчиком для CNN являлся международный владелец отелей The Ascott. В распоряжении компании 500 объектов в 130 городах, от Европы, до Ближнего Востока. Задача клиента — создать конверсионный сайт с информацией о бренде, покупкой номеров в отелях, а также историей о местах для путешествий. Ключевое — “Brand messaging through a landing page/microsite experience”.

Исходного материала было немного — стоковые фотографии, информация об отелях и текст из «рыбы». Это дало волю самой смелой фантазии дизайнера. Само название Find Your Right Place было придумано нами как заглушка для сайта. CNN так понравилась фраза, что она и стала главным слоганом проекта.

Сайт предлагал пользователям самим выбрать себе путешествие. Любители утончённого открывали для себя гид по музеям и соборам Франции, а фанатам каменных джунглей предлагалось прочесть о торговых центрах Нью-Йорка. Каждая страница версталась на четырёх колонках, сайдбар и футер предлагали выбор отеля.

Также была создана мобильная версия. Работая над адаптивной вёрсткой, мы решили предложить вариант с горизонтальным скроллом сайта. Позже CNN выбрала этот вариант и для десктопной версии, ориентируясь на пользователей смартфонов и планшетов.

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

Не важно, получаете ли заказы раз в месяц или только успеваете закрывать очередной дедлайн. Так или иначе, публикуйте не только коммерческие работы на Behance, но и собственные наработки. Работая над клиентским заказом, дизайнер отталкивается от нескольких факторов: ТЗ, правок, адаптации под ПО, «а можно здесь ещё бабочку» и прочего.

В будущем каждый понимает, что реализовать все личные замыслы возможно только в собственных проектах. Даже когда покинул офис в полночь и от одного вида «скетча» тошнит, отдавайте время профилю на Behance или Dribbble.

Крупнейшая витрина для дизайнеров ежедневно под лупой журналистов, digital-компаний и бизнесменов. Insider находит на Behance 3D-реинкарнацию Пикассо, а Apple, Slack и Netflix регулярно шерстят Dribbble в поисках талантов. Оба сервиса приносят нам регулярных зарубежных клиентов не только благодаря опубликованным заказам, но и редизайнам, артовым проектам и индивидуальным дизайнерским материалам.

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