Как устроен открытый брендбук Selectel и зачем он нужен

Привет! Меня зовут Лео Партус, я ведущий дизайнер в Selectel. У нашей компании много продуктов и направлений деятельности. Чтобы сохранять их консистентность, мы обращаемся ко множеству гайдов. Главный среди них — брендбук Selectel. Мы используем его давно, но в какой-то момент обнаружили, что прежняя версия устарела и по содержанию, и по форме. Так родилась идея создать новый брендбук. В этой статье я расскажу, как мы разрабатывали его, какого результата добились и какие выводы сделали.

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

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

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

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

Используйте навигацию, если не хотите читать текст полностью:
→ Кому может пригодиться брендбук Selectel
→ Структура брендбука
→ Что у нас получилось
→ Как пользоваться брендбуком
→ Что дальше

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

Ивент-менеджеру и PR-менеджеру

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

Продакт-менеджеру

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

Дизайнеру

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

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

Поэтому мы выбрали для брендбука следующую структуру.

1. Вступление. Для тех, кто первый раз сталкивается с нашим брендом или с бренд-системами в целом. Это небольшой блок, в котором мы говорим о том, кому будет полезен гайд и как с ним работать.
2. О компании. Для тех, кто знает о существовании нашего бренда, что-то где-то видел и читал, но в голове нет полной картины. В этом разделе коротко рассказываем, кто мы, чем занимаемся, в чем наши ценности и кто составляет нашу аудиторию.
3. Гайдлайн. Для тех, кто хорошо знаком с брендом, регулярно с ним работают, но нуждается в удобном справочнике и рабочем инструменте. В этом разделе перечислены все графические элементы с правилами их использования и возможностью скачать.

Когда все члены команды согласовали структуру, мы перешли к работе над наполнением страниц.

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

Первый экран

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

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

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

Боковое меню

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

Весь брендбук расположен на одной странице, меню только навигирует по основным блокам. По скроллу вы сперва увидите раздел «О компании», а вслед за ним — «Гайдлайн».

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

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

Версии логотипа

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

Фавиконки

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

Библиотека иконок

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

Цвета

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

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

Любое значение по клику можно быстро скопировать в буфер обмена.

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

Переключение тем

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

Уже сейчас мы ощутили, что стандартных вопросов в личку про цвета и иконки стало меньше. Более того, если где-то в общем чате прозвучит вопрос в духе «А где найти стикеры с Тирексом?», коллеги сами скинут в ответ ссылку на открытый брендбук. А счетчик активности на сайте уже сейчас показывает в среднем 600 посетителей в месяц.

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

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