{"id":13502,"url":"\/distributions\/13502\/click?bit=1&hash=a81ed6f897d123d854b91b907b479be2ea058a6a8ec03bd6f76bfc8a24665263","title":"\u0425\u043e\u0447\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043c\u0443\u043b\u044c\u0442\u0444\u0438\u043b\u044c\u043c. \u0413\u0434\u0435 \u0443\u0447\u0438\u0442\u044c\u0441\u044f?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"7eb01878-f5ab-5bdb-ae26-b8e9a900dfa1","isPaidAndBannersEnabled":false}
Дизайн
Red Collar

«Меняли цветы на людей, галстуки на флаги»: создание дизайна Росбанка в картинках

Команда Red Collar рассказывает, как разработала дизайн сайта, а потом обновилась платформа бренда — и все началось заново. Урок сохранения эстетики при любых вводных.

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

О Росбанке

Росбанк — один из крупнейших в России универсальных банков, входит в состав международной финансовой группы Societe Generale. На протяжении нескольких лет стабильно входит в тройку самых надежных российских банков по версии журнала Forbes. Включен ЦБ РФ в число 11 системно значимых кредитных организаций России.

Сайт Росбанка в 2020 стал лучшим банковским сайтом по версии всероссийского конкурса веб-разработки «Золотой сайт», выиграл первое место в «Корпоративных сайтах», третье в «b2b-сайтах» на крупнейшем Восточно-Европейском digital-конкурсе Tagline Awards 2019 и вошел в топ-3 по версии Google как самый удобный мобильный сайт из финансовой сферы.

Тендер и задача сайта

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

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

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

Кроме того, дизайн должен быть заточен в первую очередь под мобильные устройства, принцип mobile first: визуально чистый и легкий для загрузки.

Изучение рынка, поиск идеи и победа в тендере

Провели ресерч конкурентных сайтов и изучили недостатки старого дизайна Росбанка.

Минусы старого сайта Росбанка:

  • интерфейс с непродуманной иерархией: много уровней меню и перегруженная сетка;

  • безликость: композиция и визуальная концепция перекликается с большинством банков на российском рынке;
  • злоупотребление иконками: они стали не элементом навигации, а визуальным шумом;
  • сам сайт устаревший и в техническом плане: некомфортное для широких экранов разрешение, плохой адаптив;
  • непродуманная работа с контентом: баннеры в разном стиле, однотонная заполненность текстом — вниманием пользователя не управляли.
Как выглядел сайт Росбанка раньше

Сейчас пользователь пресытился, простой текст его не привлекает: чтобы «подсветить» тот же кредит, надо поставить три иконки и крупно написать проценты — тогда он заметит предложение, легко его считает и, возможно, заинтересуется.

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

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

Для пробы добавили второй ряд меню, курс валют, допинфу на стрелку баннера — всё осталось также удобно и на стиле, тендер был выигран.

Первоначальная тендерная дизайн-концепция
Тендерная дизайн-концепция после добавления ряда меню и доп. информации

Использование концепции в рекламе

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

Показали, как можно сохранять узнаваемость монообъекта, используя его в рекламе и на других маркетинговых носителях. Главное — держать в голове подход: в любой композиции яркие красные предметы должны быть всегда акценты для внимания — чтобы потом перенести их на сайт без потери узнаваемости.

Пример переноса объекта на рекламный баннер

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

Пример переноса объекта с рекламы на новый сайт
Пример использования объекта на старом сайте

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

Применение концепции монообъектности на «голой» услуге

Работа с фото-контентом

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

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

UX ≠ Usability. UX — это опыт, который специалист проектирует, а пользователь получает от совокупности взаимодействия с сайтом: удобства навигации, достижения целей, впечатления, с которым он открывает сайт и покидает его.

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

Или — баннер с кучей шариков и смысловым наполнением: в отпуск с бонусами от РЖД. Тогда помещаем продукт — банковскую партнерскую карту — в рекламный баннер и дублируем объект на баннер сайта.

Пёстрые, сложные партнёрские брендбуки

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

Например, акция ОКЕЙ х Росбанк. В поиске решения изучили акцию в интернете, нашли лаконичные и броские варианты с персонажем — развили идею и перенесли его на главную страницу.

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

В итоге мы сделали гайд по сохранению концепции, который в будущем помог бы клиенту создавать баннеры, сохраняя единый дизайн на сайте.

Упражнение на поддержание первоначальной концепции сайта при работе с рекламными баннерами

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

Вот это поворот: новая платформа бренда

Когда работа была почти завершена, Societe Generale обновил платформу бренда. Поменялось все: в фирменные цвета добавился фиолетовый, изменился шрифт, стилистика и многое другое, а новый слоган теперь звучит так: «Росбанк. Будущее — это вы».

Начали перестраивать концепцию дизайна сайта Росбанка под обновленную платформу бренда: перестраивали финальный дизайн под новые элементы. Например, пробовали добавлять новые цвета, сохраняя задумку монообъектности.

Показывали для сравнения срез нашего рынка финансовых услуг, что на фоне российских банков и финсервисов монообъект действительно выделяется.

Первоначальная концепция сайта Росбанка в окружении других банков

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

Выдержка из презентации по совмещению новой платформы бренда и первоначальной дизайн-концепции сайта

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

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

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

Шрифт с финальной концепции, его жирное начертание и шрифт из новой платформы бренда из прописных букв

Подбирали вариант, как лучше заполнить фотографией первый экран: градиент, образка с фоном, без фона или изменение пропорций объекта.

Оставили заполнение, сохранив акцент на монообъектность, только теперь ключевыми фигурами стали люди. Проверяли выбранное решение на адаптивность под все цифровые носители.

Look&feel идёт впереди всего. Смотри и чувствуй: твой ли это бренд, заботится ли он о тебе, совпадают ли ваши взгляды на мир. Дизайн становится проводником этого ощущения.


Это первый экран, а как же сайт

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

Обзор макетов страниц из меню сайта

А вот что получилось в итоге.

Новый дизайн сайта Росбанка, промо-видео

Выводы из истории

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

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

Дизайн начинается с гипотезы, а ограничений не существует, и работать можно со всем: от ярких партнерских баннеров до стоковых фоток.

Концепция с гербером осталась в сердцах обеих команд и ушла в мерч отделу разработки Росбанка.

На фото — Виталий Мазуревич, Product Lead в Росбанке с «Золотом» за сайт на конкурсе Золотой сайт.

0
26 комментариев
Написать комментарий...
Мучительный крюк

Субъективно, но цветок вместе головы — жуть какая-то!

Ответить
Развернуть ветку
Alexey Maximov

Жена фоном увидела статью и спросила, мол, о контексе читаю? Потом пояснила, красная гербера на белом фоне ассоциируется с прокладками этой марки. Плохая ассоциация для банка

Ответить
Развернуть ветку
Виктория Михалева

"контекс" (Contex) это марка презервативов и у них нет прокладок как бы))) 

Ответить
Развернуть ветку
Людмила Свиридова

Никто не должен цвести!) Быть женскими прокладками у нас в стране очень стыдно :)

Ответить
Развернуть ветку
T K

вы не из ЧикенКарри?

Ответить
Развернуть ветку
Елена Миненкова

Напомнило Kotex. У них тоже гербера красная :)

Ответить
Развернуть ветку
T K

Я этого мужика в очках и вообще весь этот фотосток видеть не могу уже.

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

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

А использование lorem impsum пусть даже в первой презентации или тем более в презентации в соц сетях - признак какой-то лени и непрофессионализма.

Ответить
Развернуть ветку
Red Collar
Автор

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

Ответить
Развернуть ветку
Vlad

Повышайте свой уровень экспертизы. 
Сешл для вас.

Ответить
Развернуть ветку
Игорь Мыслинский

Очень странно читать, из текста кажется что редколлары придумали концепцию, а не просто раскрашивали прототипы созданные Usabilitylab.

Ответить
Развернуть ветку
Roman Trifonov

Почему вы не склоняете "Росбанк"?

Это имя собственное, и оно подлежит склонению по правилам русского языка. "Расцветай с Росбанк" звучит как заголовок сочинения первоклассника-эмигранта. 

Ответить
Развернуть ветку
Red Collar
Автор

Накопилось бонусов, в первый раз пошел в кабак —
Первоклассник без усов, расцветай вместе с Росбанк 🍂

Ответить
Развернуть ветку
Emil Bagirov

ты юн как алый цвет гербер, наивен словно чистый бланк
не вянь изюминой как сбер, а расцветай вместе с росбанк!))

Ответить
Развернуть ветку
Анастасия Клюкина

или
чтоб бонус много накопить, я встать сегодня спозаранк
я богатей а не тупить, я расцветай вместе с Росбанк

Ответить
Развернуть ветку
Sabit Sugirov

Шрифт Muller уже поднадоел.

Ответить
Развернуть ветку
Павел

Цветок выглядит крипово

Ответить
Развернуть ветку
Alex Ayer

Напишите, как делали дизайн для адаптива

Ответить
Развернуть ветку
slstkhn

Редизайн 👍. Банк 👎.

Ответить
Развернуть ветку
Евгений Игнашов

Хорошая работа. И Мазуревич доволен )

Ответить
Развернуть ветку
Анастасия Клюкина

Как мне кажется, очень круто получилось!

Ответить
Развернуть ветку
Vlad

Зачем этот функционал - какую задачу он решает? 

Ответить
Развернуть ветку
Roman Samurin

Это гайд) Но меня смущает выравнивание текста. Такое впечатление что текст в кнопках съехал вниз на пару пикселей. 

Ответить
Развернуть ветку
Vyacheslav Krivonosov

Look&feel идёт впереди всего, правда придётся подождать

Ответить
Развернуть ветку
Oleg Aniskin

В общем все как у всех :)

Ответить
Развернуть ветку
Анна ШЕРЕР

Читаешь вот такое и думаешь, а точно сейчас 21 век?

Наука есть такая психосемантика, занимается исследованием символов, знаков, цветовых решений, их влиянием, отношением и связями с объектами, но ребята не слышали....

Ответить
Развернуть ветку
Кирилл Шилин

Люди с цветком вместо головы - Stranger Things (фильм Странные дела), а шарик - IT (фильм оно).

Ух, страшно будет заходить на сайт Росбанка с такими дизайнерами

Ответить
Развернуть ветку
Читать все 26 комментариев
null