Как мы провели рестайлинг и разработали корпоративный сайт для группы «Иннотех»

Рассказываем о том, как мы обновили бренд и сделали новый корпоративный сайт для «Иннотеха».

О компании

Группа «Иннотех» — современная быстроразвивающаяся ИТ-компания, разрабатывающая инновационные решения по цифровизации банковского бизнеса. Команда помогает компаниям финансового сектора на пути цифровой трансформации, предлагая им комплексные решения для фронт- и бэк-офисов, современные финтех-продукты и системы работы с big data.

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

К нам «Иннотех» обратился за обновлением айдентики и разработкой корпоративного сайта.

Какая была задача, и как мы ее решали

У команды «Иннотеха» уже было сформировано представление о собственном бренде. Образ компании строился на идеях инновационности, гибкости и эффективности. Их, к примеру, выражает фирменный знак. Две точки и тире — отсылка к телеграфу и азбуке Морзе, символам технологического прогресса, в котором теперь активно участвует и сам «Иннотех». Кроме того, за все время своей работы компания успела определить собственный визуальный стиль и не хотела сильно от него отдаляться. Наша задача состояла в рестайлинге бренда.

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

Алексей Голованов, арт-директор группы «Иннотех»

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

К каким выводам мы пришли, и что нужно было сделать:

  • Сохранив преемственность с предыдущим стилем, скорректировать образ компании: из молодого hr-бренда в серьезного b2b-игрока;

  • Систематизировать все элементы визуального языка, чтобы сделать его более консистентным и упорядоченным;
  • Одного образа из логотипа было недостаточно для того, чтобы сформировать визуальный язык. Была нужна четко сформулированная идея стиля, которая помогла бы объединить вокруг себя все элементы айдентики и сохранить при этом то, что команда хотела оставить без изменений;
  • Для создания современной айдентики требовалась детальная проработка типографики и 3D-иллюстраций;
  • Разработать моушен-язык, органично вписав его в общую концепцию бренда;
  • Чтобы сократить объемы арт-дирекшна, нужно было подготовить систему гайдов, которая решила бы проблему генерации фирменной графики и дала бы дизайнерам больше рабочих шаблонов.

Что мы изменили

Основной образ, на котором основывался фирменный стиль компании, — ее логотип. Команда «Иннотеха» попросила оставить его нетронутым, но вместе с этим знак нуждался в реконцептуализации.

Как мы провели рестайлинг и разработали корпоративный сайт для группы «Иннотех»

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

Дарья Шкрунина, руководитель отдела графического дизайна «Иннотеха»

Мы разработали фирменную 3D-графику, визуально развивающую философию компании, в основе которой лежит идея скорости. Это метафоричный образ импульса и светящегося энергетического потока. Он органично поддерживает мотив ускорения, который также можно обнаружить и в логотипе. Это помогло прийти к новому прочтению фирменного знака и отойти от темы кодировки. Теперь знак «Иннотеха» — это не только язык азбуки Морзе, но и метафора движения, точка, переходящая в стремительный поток энергии. Этот переход мы показали в промо-ролике компании. Новая графика придала айдентике недостающего движения и динамики, помогла оживить стиль бренда и лучше вписать его в диджитал-среду.

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

Крупная типографика — один из центральных элементов фирменного стиля «Иннотеха». Базовый, расслабленный, с большими отступами — для такого типа акцидентного шрифта требовалась более плотная сборка. Выбранный нами шрифт Cofo Kak Black — более собранный, сбалансированный и напряженный, чем предыдущий — придал большей смелости и дерзости поведению типографики. В контраст такому жирному и широкому начертанию стоит тонкая линейная графика объектов и шрифт Inter, который остался в наследство от старой айдентики компании.

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

Носители и гайдлайн

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

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

Алексей Голованов, арт-директор группы «Иннотех»
Как мы провели рестайлинг и разработали корпоративный сайт для группы «Иннотех»

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

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

Алексей Голованов, арт-директор группы «Иннотех»

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

Корпоративный сайт: как работает стиль

Основной диджитал-носитель фирменного стиля «Иннотеха» — корпоративный сайт компании, разработкой которого мы занимались. Его задача так же состояла в поддержании образа бренда, сочетающего в себе серьезность высокотехнологичной компании и энергичность стартапа.

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

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

Саша Бойченко, UX/UI дизайнер ONY

Технические решения

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

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

«Иннотех» не только размещает на сайте информацию о своих продуктах и решениях, но и делится информацией о деятельности компании через новости и пресс-релизы. Поэтому отдельное внимание мы уделили систематизации информационного контента компании и создали раздел «Ресурсы», поделенный на группы контента: «Новости», «Признание отрасли», куда вошла информация о наградах, упоминаниях в СМИ и аналитических отчетах. Также в этот раздел входит большой блок «Мероприятия», направленный на поддержку участия компании в выставках, форумах и конференциях. Нам удалось разработать гибкую модульную структуру, которая позволила закрыть разные потребности и задачи этих групп. В админ-панели был добавлен блочный конструктор для этих материалов, благодаря чему команда «Иннотеха» может делать страницы контента более разнообразными.

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

В работе участвовали:

Команда «Иннотеха»

Дизайн:

  • Алексей Голованов – арт-директор

  • Дарья Шкрунина – руководитель отдела графического дизайна
  • Данила Городилов – руководитель отдела дизайна презентаций
  • Павел Моисеенко – ведущий диджитал-дизайнер

Маркетинг:

  • Юля Пославская – директор по маркетингу

  • Кирилл Дердерчук – руководитель отдела цифрового маркетинга
  • Оксана Кикоть – руководитель отдела по связям с общественностью

Команда ONY

Брендинг:

  • Линда Косичкина – арт-директор

  • Макс Сойфер – арт-директор
  • Андрей Иляскин – арт-директор
  • Карина Язылян – дизайнер

  • Саша Шмелев – дизайнер
  • Костя Симонов – CG-дизайнер

  • Степа Картышов – CG-дизайнер
  • Аня Шульгина - продюсер

Диджитал:

  • Миша Питерский – арт-директор

  • Денис Моисеев – арт-директор
  • Саша Бойченко – UX/UI дизайнер
  • Оля Моисеева – продюсер
  • Оля Ибрагимова – продюсер
17
4 комментария

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

1
Ответить

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

1
Ответить

а потом люди удивляются почему так много сокращений

Ответить