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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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