{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

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

Мы, Embacy, пришли к Vauban и предложили им освежить стиль и сайт. Они посмотрели на наше портфолио и согласились. Звучит просто, как будто не было пары сотен безрезультатных офферов финтех-продуктам и десятков душных созвонов. В общем, в начале этого проекта было слово hi в холодном письме в Linkedin.

Это не кейс-стади, это кул-стори про наш первый проект из Лондона.

Не с начала: что получилось в итоге

Историю про создание стиля и сайта неинтересно читать, если не видишь результат. Читаешь и читаешь, а в конце непонятно что. Поэтому лучше сразу посмотрите:

О продукте и задаче

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

У них уже был неплохой сайт:

Это усложняло задачу, потому что, если результат не будет на голову выше, то непонятно, зачем были потрачены деньги.

Главные требования к конечному результату:

  • Строгий — потому что продукт в первую очередь для инвесторов, а это серьезные ребята и лендингов стартапов-однодневок они уже навидались, нужно показать профессионализм;
  • Технологичный — это финтех-продукт все-таки, а не юридическая фирма;
  • Простой и понятный — они делают сложный процесс проще, не должно быть визуальных перегрузов;
  • Стильный — сайт должен выделяться и запомниться, это дефолтный пункт всех наших проектов;
  • ROMI 500%. Шутка.

Стилистики: журналы, типографика, чертежи

Мы не команда из Марин Абрамович и Марселей Дюшанов, но каждую работу начинаем с концепции. Vauban во всех коммуникациях описывал себя через контейнер, поэтому за метафорой далеко ходить было не нужно, и мы сосредоточились на стилистиках:

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

Референсы для этой концепции

Швейцарская типографика. Выглядит стильно, и выглядит строго. И выглядит так уже лет сто, и продержится еще сто, не меньше.

Чертежи. Подошли с инженерным подходом. Переосмыслили оригинальный сайт и цветовую палитру.

Доработка стиля: смешиваем, и даже немного взбалтываем

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

  • Палитру первого стиля;
  • Интересную типографику и сетку из второго;
  • И иллюстрации из третьего.

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

Логотип: историческая минутка

Его обновление не входило в план работ, но мы не смогли пройти мимо:

Было => Стало

Старый логотип был не просто так: само название продукта, Vauban, отсылает к маркизу де Вобану, французскому военному инженеру семнадцатого века. А на логотипе — его фортификации. Решили, что осады сотен лет назад уже не очень актуальны, и привели логотип в этот год, сохранив общую форму.

Сайт: попали в свою же сетку

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

А для шрифтов отошли от вычурных засечек и перешли к геометрическому гротеску Euclid Circular, что добавило и технологичности, и подвязало все в стиль.

From Russia With Love: На Сенокосе, 1929

Мы любим нашу культуру, оказалось, что основатель Vauban, француз Реми, тоже. Онбординг в продукт он делал на примере пользователя Rodion Raskolnikov. А мы нарисовали косаря из картины Малевича в блоке про сделки по искусству:

Слева наш косарь, а справа косарь с чемоданом, которого они теперь используют в LinkedIn и своем блоге

Почему Малевич? Просто во время проекта, сидя на карантине, наш иллюстратор собирала пазл из Третьяковки:

Карантин закончился и пазл уже разобрали

А что в итоге-то?

Уже в середине проекта Реми проникся и спрашивал, как мы придумали наш процесс. А после релиза превратился в нашего амбассадора — к нам уже пришли несколько лидов по его рекомендации:

Кейс на Behance стал нашим первым проектом, получившим их главную награду «Best of Behance», а также Honorable Mention и Mobile Excellence на Awwwards.

А мы продолжили работу над полной пересборкой UX и UI интерфейса, которая идет уже больше 10 спринтов, превратив Vauban в одного из наших крупнейших клиентов.

А что сам маркиз де Вобан сказал бы о нашей работе? Наверное, что-нибудь по-французски. Мы не говорим по-французски, но вот что можем сказать: иногда чтобы произошло что-то хорошее, нужны сотни сообщений в Linkedin и десятки душных созвонов. В нашем случае, они того стоили.

0
69 комментариев
Написать комментарий...
Ol Ka

«Его обновление не входило в план работ, но мы не смогли пройти мимо»

Зря мимо обновления лого не прошли.

В оригинальном лого заложены шарм, история, смысл.
В новом же — только симметрия. Я бы сравнил его с петлёй колючей проволоки.

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

Комментарий недоступен

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

Согласны, что была красивая история, не смогли её не рассказать))

Ответить
Развернуть ветку
1 комментарий
Сергей Ковалев

да, жаль, что с обновлением лого потеряли историю. А могли бы бережно переработать. Эх

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

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

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

Спасибо за мнение, прошлый дизайн был действительно неплохой)

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

Комментарий удален модератором

Развернуть ветку
Жельмандо

Господа специалисты, объясните непонимающему человеку, чем крут получившийся сайт?
Прочитал статью, зашел посмотрел сайт - ну ок, пасхалка с косарем. А за что все так высоко оценили его?

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

Непохож на типичные сайты подобных платформ.

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

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

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

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

Спасибо за аргументрированную позицию. Она не так часто встречается в комментариях на виси))

Ответить
Развернуть ветку
1 комментарий
Alex One

Люблю чёрный и оранжевый, их сочетание прекрасно и выразительно. Отличный, оригинальный проект, награда заслужена, вы молодцы, так держать!

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

Спасибо, мы тоже, и были рады, когда из предложенных, клиент выбрал эту палитру)

Ответить
Развернуть ветку
1 комментарий
Shamil Ramazanov

Класс

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

Спасибо, мы старались :)

Ответить
Развернуть ветку
1 комментарий
Denis Novikov

Можно поменять старый и новый местами и эмоции будут те же

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

Ужасная работа над логотипом. За такое надо сажать в дизайнерскую тюрьму. Было что то со смыслом, стало что то с  г*вном.
В остальном прекрасно. 

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

Отличная работа! По сравнению с предыдущим дизайном, новый выделяется и запоминается среди множества сайтов которые мы посещаем каждый день.

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

Комментарий недоступен

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

Написали основателю, ему зашло наше портфолио, мы созвонились и через пару дней запустили проект :)

Ответить
Развернуть ветку
Артем Акулов

хоть кто то делает не говно

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

Очень круто, ребят! Только рассматривал кейс на Бихейнсе для Sparbank швейцарского, захожу на вс и вижу вашу проделанную работу!

Сдержанно, строго и функционально! кайф!
Люди, которые негативно или нейтрально отзываются об этом проекте - или без вкуса, или просто никак не связаны с дизайном и разработкой ребрендингов, не берите близко к сердцу :)

Шрифт - 10/10

Браво!

Ответить
Развернуть ветку
Степан Марципан

откуда значек логотипа? что-то очень знакомое.

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

М?)

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

Отсюда, например))

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

Про новый лого? Рунический символ 8-конечной звезды у скандинавов и славян.

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

Нет слов! Отличный результат. Мне нравится все – цвета, типографика, сетки и умные иллюстрации. Ребята, продолжайте в том же духе!

Следует обратить внимание на поведение пользователей и посмотреть на каждый раздел внимательнее, к примеру https://vauban.io/category/hedge-funds здесь важно, чтобы пользователь перешел к изучению контента, так как наверняка пользователи будут заходить в него регулярно и следить за обновлениями, но в первом экране на ноутбуке ничего не видно – до контента скролить достаточно долго и скучно. Но если этот проект на поддержке, думаю, что вы сможете довести все до отличного результата!

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

Спасибо, Дмитрий :)

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

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

Ответить
Развернуть ветку
Ilya Belov
Ответить
Развернуть ветку
Embacy
Автор

Это была первая ассоциация у нашего копирайтера))

Ответить
Развернуть ветку
2 комментария
Фаиз Мангутов

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

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

Ну кстати, да. Они сделали сложные иллюстрации для сложных процессов, как будто сложность это фича и ее надо подчеркнуть и приукрасить. Но кстати, если посмотреть на совет директоров этой компании, то понятно почему приняли — что то в духе "у нас сложный и технологичный продукт и мы гордимся этим". То есть чуваки в пиджаках, сильно за 30 хотели "статус" и они его получили. Это в общем не плохо и не хорошо, только не понятно зачем.

Ответить
Развернуть ветку
Андрей Пятин

статью не дочитал (не моя тематика) и ничего не понял, но вы достучались до моего сердца!

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

Большие молодцы. Многим дизайн не зашёл, однако смотреть стоит не только на красоту и легкость восприятия, а в контексте самого продукта и его ЦА. Уверен, что люди в Behance ответственные за выбор победителя в номинации - подходили к процессу более детально, чем мы, простые прохожие. В общем - очень рад за ваш успех! Жду ещё успешных кейсов)

Ответить
Развернуть ветку
Даниил Жеренков

Не в обиду ребятам (все круто, если клиент доволен), но когда продукт отдаёт дизайн на аутсорс, то что-то сильно не в порядке с продуктом.

Изменения UI и тем более UX должны быть обусловлены решением проблем пользователей, а не желанием сделать «покрасивее», тем более что «покрасивее» сильно субъективный параметр.

Агентство выиграло звёздочек, а что выиграл продукт? В лучшем случае ничего.

Ответить
Развернуть ветку
Онлайн-Аптека

Сам себя не похвалишь - никто не похвалит.

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

У вас крутые проекты обычно, но этот не зашел =( Этот тоже верстался на webflow?

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

Воу, вот это да(
Да, этот, конечно же, тоже на Webflow любимом:
https://webflow.com/website/VAUBAN

Ответить
Развернуть ветку
3 комментария
Аккаунт удален

Комментарий недоступен

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

Контейнер для капитала как раз и есть форт, крепость, защита капитала. Основатель с аристократическим позывом создавал свой логотип, а новый дизайн сделал из него простолюдина, без геральдических смыслов.

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

Красиво

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

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

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

«Нужно показать профессионализм»
Мда... показали.

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

Конверсия в лиды увеличилась? 

Ответить
Развернуть ветку
Вадим Зарипов

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

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

Старый лого был гораздо лучше. Лучше бы прошли мимо

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

Мне понравилось, в целом напомнило IBM Design Language, строгие формы, аккуратные линии всегда будут в моде.

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

Комментарий недоступен

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

Понравилось, молодцы!🔥 Жаль только не описали самое интересное, этап поиска и продажи этому клиенту. 

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

Молодцы👍
Типографика, композиция все класс.
Лучше чем было, а было не плохо.
P.S. Люблю Вебфлоу :))

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

Отличный кейс. Вырос контраст, сам сайт стал эмоциональнее. Лайк

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

И шо дает синий шильдик behance? Ну в сутки получите 1000 лайков, ну чуть больше будет лидов, ну почешите эго и все :)

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

Что может быть лучше, чем почесать свое эго? xD

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

main -> "Get Started" (https://structurer.vauban.io/) - скроллишь вниз и блок-схема справа сильно дергается. Не круто. 

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

mac os mojave/catalina + chrome 84.0.4147.105

Ответить
Развернуть ветку
2 комментария
Антон Штадлер

Черно-бело-оранжевая палитра портала...где-то я это видел, ах да, это же французский Orange :0)

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

В логотипе 10-конечная звезда превратилась в 8-конечную.

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

Нуууу хз ничего нового и интересного в дизайне не увидел

Ответить
Развернуть ветку
66 комментариев
Раскрывать всегда