Как мы провели ребрендинг 65apps

Привет! Это 65pixels, дизайн-студия от 65apps. В этом году мы завершили проект по редизайну для нашего самого главного клиента. Рассказываем, как это было.

Как мы провели ребрендинг 65apps

Чтобы выйти на рынок, молодой IT-компании нужно немного: гениальная идея, несколько талантливых человек, всемогущий сейл и небольшой сайт. На старте никто не заморачивается с фирменным стилем — достаточно придумать название, создать логотип, подобрать шрифт и цвет. С таким набором можно свернуть горы!

О брендбуках задумываться некогда, они разрабатываются долго и дорого, а актуальными остаются, как правило, один-два года. Гайдлайны или не создаются вовсе или представляют из себя формальную презентацию «как выглядит логотип на кружке, футболке, ручке.. (продолжите сами)».

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

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

Примерно такая история случилась и с 65apps.

Старт

Летом 2021 года мы взялись за проект по созданию фирменного стиля для 65apps. Начали с главного — зафиксировали ключевые проблемы клиента. Их было три:

Несовременность. Как у многих других компаний, у 65apps в самом начале не было четкого фирменного стиля: только логотип, фирменные цвета — лазурный и белый, и шестиугольник, который используется в логотипе и работает как отдельный визуальный элемент. Они существуют уже почти 10 лет, и то, что было актуальным в 2012 — явно не вписывается в 2022 год.

Как мы провели ребрендинг 65apps

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

Как мы провели ребрендинг 65apps

Несоответствие статусу. К 2022 году 65apps стала федеральной IT-компанией с представительствами в 5 городах России и Республике Беларусь. Текущее состояние фирменного стиля (а точнее, его отсутствие) слабо ассоциировалось с масштабом деятельности.

Как мы провели ребрендинг 65apps

Мы принялись за работу.

Подготовка и поиск решения

Для разработки фирменного стиля, мы решили определить, как вообще должен восприниматься бренд 65apps.

Для этого мы выделили в бренде 65apps три составляющие: суть, характер, видение.

Как мы провели ребрендинг 65apps

Мы провели серию интервью с клиентами и сотрудниками компании — исследовали, как они видят компанию сейчас и какой хотят видеть в будущем.

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

Реализация

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

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

Как мы провели ребрендинг 65apps

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

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

Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps

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

Как мы провели ребрендинг 65apps

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

Как мы провели ребрендинг 65apps

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

Чистота — белый, энергия — синий, технологичность — хром, «черное зеркало» (экран телефона) — черный.

Как мы провели ребрендинг 65apps

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

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

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

Гибкий подход к гайдлайнам

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

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

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

Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps

И так же есть элементы, которые могут меняться.

Как мы провели ребрендинг 65apps

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

Такой подход решает две ключевые задачи:

  • Быть гибкими, быстрыми и адаптивными к разным задачам по созданию креативов
  • Работать в рамках фирменного стиля, сохраняя узнаваемость бренда и единство визуальной составляющей

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

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

Обложки к статьям и картинки для публикаций в социальных сетях:

Как мы провели ребрендинг 65apps

Мерч:

Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps

Внутренние ресурсы. Обновление коснулось и сотрудников, и рабочих инструментов. Теперь аватарки сотрудников и обложки рабочих чатов тоже в едином стиле.

Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps
Как мы провели ребрендинг 65apps

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

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

Ставьте лайк!

P.S. Подписывайтесь на нас в VK и Telegram-канале.

7676
32 комментария

На мой взгляд, ваш голубой слишком голубой.
К тому же, что-то похожее было у microsoft.

Можно было заменить хром на что-нибудь другое.

НА ЖЁЛТЫЙ, НАПРИМЕР.

3
Ответить

у вас отличный вкус =)

5
Ответить

И второй вопрос, в чем делают такие анимации красивые? На сайте на первом экране в фоне которая )

1
Ответить

After Effects+Blender был в данном случае. Вот тут показывали, как делали :)
https://vk.com/wall-197846710_231

2
Ответить

А вот еще лого )))

1
Ответить

Похоже на фалангу большого пальца.

2
Ответить

😁

1
Ответить