Дизайн Slava Kornilov
8 347

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

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

В закладки
Аудио

Почему USA Today

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

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.

От USA Today до CNN

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Slava Kornilov", "author_type": "self", "tags": [], "comments": 27, "likes": 81, "favorites": 98, "is_advertisement": false, "subsite_label": "design", "id": 56194, "is_wide": true, "is_ugc": true, "date": "Tue, 22 Jan 2019 12:05:34 +0300" }
{ "id": 56194, "author_id": 203363, "diff_limit": 1000, "urls": {"diff":"\/comments\/56194\/get","add":"\/comments\/56194\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/56194"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

27 комментариев 27 комм.

Популярные

По порядку

Написать комментарий...
11

Респек таким парням

Ответить
3

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

Ответить
0

обтравить фото — это по вашему сложнейший процесс, который USA Today не под силу?

Ответить
8

недурно

Ответить
0

:D :D Да там все тайтлы в таком стиле. Ну что можно сказать - студия подстраивается под клиента) CNN давно уже превращается в желтую прессу )

Ответить
2

выглядит стилево, неплохо было бы поменять и медузу так

Ответить
6

Медузаааааа медуза медуза мы дрязьяяяяяяяяяя

Ответить
7

Ps. Самому стыдно, что помню слова

Ответить
1

Блин ну вот честно, зашел на сайт студии, глянул портофило — UI и анимации красивые, да. Но что касается юзобилити... его нет от слова совсем.

Ответить
3

Только хотел написать об этом. Насколько мне понравилось большинство проектов, настолько же не понравился официальный сайт. Работы чистые и стильные, а вот сайт...

Он полностью загрузился за 31 секунду (как во времена флэш сайтов), 2 раза уходил с него, думал что возникла ошибка. Автовоспроизведение музыки - моветон. Начальная заставка - мечта эпилептика, хотя здоровому человеку тоже будет не очень приятно смотреть, глаза режет. Что где находится на сайте и как туда попасть - загадка.

Иными словами работы на Behance и сам сайт - это два разных полюса. Увидев первое, вы сразу захотите заказать у них сайт, взглянув на второе, лишь покрутите у виска и пошлёте нахрен.

Ответить
1

Говоря работать на CNN сродни поеданию говна.

Ответить
0

в чё так?

Ответить
1

CNN в США это довольно поехавший канал. Белые привелегии, гомофобство и все вокруг нацисты и гитлеры.

Ответить
2

Ты с фоксом не спутал случайно?

Ответить
3

Нет, все еще CNN.

Ответить
2

Прям как медуза в РФ

Ответить
0

Думаю, практики выкупа редизайна, как и в ру сегменте, нет. Читая про рыбу в ТЗ понимаешь, что заказчик везде может быть одинаковым, как в России, так и Африке

Ответить
4

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

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

Ну и еще по своему опыту знаю что чаще всего людей из сми собственно качество дизайна мало интересует, есть факторы поважнее

Ответить
0

Но вообще респект, в концептах проделано очень много работы

Ответить
1

Открываем сайт студии в мобильном Safari, сворачиваем и продолжаем слышать звуки, даже с заблокированным экраном. Это баг Сафари такой, или уже стало фичей?

Ответить
0

Слава, ты крутой.
Для NYT тоже концепты?

Ответить
0

Помню этот кейс и помню как он пропал :) очень крутая работа.

Ответить
0

Прикольно

Ответить
0

Спасибо за ваш труд, сильно вдохновляет продолжать и не бросать.

Ответить
0

Спасибо за статью, вдохновляет!

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }