Привет, Хабр! Меня зовут Лео Партус, я ведущий дизайнер в Selectel. У нашей компании много продуктов и направлений деятельности. Чтобы сохранять их консистентность, мы обращаемся ко множеству гайдов. Главный среди них — брендбук Selectel. Мы используем его давно, но в какой-то момент обнаружили, что прежняя версия устарела и по содержанию, и по форме. Так родилась идея создать новый брендбук. В этой статье я расскажу, как мы разрабатывали его, какого результата добились и какие выводы сделали.
Прошлую версию брендбука для нас собрало агентство. Однако это было довольно давно, и материалы того гайда потеряли актуальность. Кроме того, PDF-файл не очень удобно использовать в большой команде…
Мы могли пересобрать гайд в Figma, как это часто делают в подобных случаях. Однако хотелось ориентировать новый брендбук на внешнюю аудиторию, причем не только на дизайнеров, но и на подрядчиков с менеджерами. Им могло показаться сложным работать с привычной нам Figma. В итоге решили разместить брендбук на отдельном сайте. С ним сможет работать любой специалист, а информация в нем теперь всегда актуальна.
Приглашаем вас познакомиться с нашим открытым брендбуком. Ниже я расскажу, как он устроен и как им пользоваться.
Помимо всего вышеперечисленного, мы также хотели дополнить гайд разделами про бренд, чтобы познакомить людей с ценностями, важными цифрами и историей компании. Открытый брендбук должен был стать не только полезным, но и имиджевым ресурсом.
Используйте навигацию, если не хотите читать текст полностью:
→ Кому может пригодиться брендбук Selectel
→ Структура брендбука
→ Что у нас получилось
→ Как пользоваться брендбуком
→ Что дальше
Кому может пригодиться брендбук Selectel
Чтобы сделать наш ресурс действительно эффективным, мы первым делом задумались, кому он может быть полезен. Затем оформили наши мысли в портреты потенциальных пользователей.
Ивент-менеджеру и PR-менеджеру
- Они смогут легко находить нужные файлы — логотипы, иконки и графику для подготовки материалов.
- Перестанут беспокоиться, что графические элементы или формулировки в его материалах окажутся неактуальными.
- Сэкономят время, поскольку больше не придется отвечать на вопросы новых сотрудников и подрядчиков насчет фирменного стиля. Теперь вместо ответов достаточно отправить ссылку на брендбук.
Продакт-менеджеру
- Сможет быстрее находить графические элементы и другую информацию для оформления презентаций.
- Лучше разберется в том, как все устроено с дизайнерской точки зрения. Если понадобится тот или иной элемент, быстрее сориентируется, к кому и с чем именно обращаться.
Дизайнеру
- Он глубже разберется, как устроен бренд.
- Повысится качество и консистентность дизайна.
- Кросс-командная коммуникация ускорится.
- Станет проще аргументировать свои решения.
Структура брендбука
Мы предполагали, что брендбуком будут пользоваться люди с разным уровнем знаний как о дизайне, так и о нашей компании. По этой причине нам было важно не просто предоставить все материалы, но и научить ими пользоваться.
Поэтому мы выбрали для брендбука следующую структуру.
- Вступление. Для тех, кто первый раз сталкивается с нашим брендом или с бренд-системами в целом. Это небольшой блок, в котором мы говорим о том, кому будет полезен гайд и как с ним работать.
- О компании. Для тех, кто знает о существовании нашего бренда, что-то где-то видел и читал, но в голове нет полной картины. В этом разделе коротко рассказываем, кто мы, чем занимаемся, в чем наши ценности и кто составляет нашу аудиторию.
- Гайдлайн. Для тех, кто хорошо знаком с брендом, регулярно с ним работают, но нуждается в удобном справочнике и рабочем инструменте. В этом разделе перечислены все графические элементы с правилами их использования и возможностью скачать.
Когда все члены команды согласовали структуру, мы перешли к работе над наполнением страниц.
Что у нас получилось
Мы постарались сделать интерфейс как можно более минималистичным и поставить акценты только на действительно важных функциональных элементах. Такой подход позволил не засорять экраны лишней информацией. В данном случае пользователь может комфортно и без лишнего информационного шума взаимодействовать только с теми элементами, которые ему необходимы.
Первый экран
Мы предположили, что брендбуком чаще всего будут пользоваться люди, которые уже знакомы с брендом и хотят найти конкретные элементы — например, скачать актуальную версию логотипа.
За счет оглавления на главном экране пользователь при любом сценарии сможет быстро попасть в нужный ему раздел.
Сверху страницы тоже есть кнопка вызова меню, логотип на ней появляется только после скролла главного экрана. Решили сделать так, чтобы не дублировать название компании.
Боковое меню
Оно дублирует логику главного экрана, но при этом всегда остаётся под рукой. Это удобное решение для мобильной версии сайта. Особенно оно полезно для менеджеров, перед которыми часто стоит задача быстро передать заказчикам файлы в фирменном стиле.
Весь брендбук расположен на одной странице, меню только навигирует по основным блокам. По скроллу вы сперва увидите раздел «О компании», а вслед за ним — «Гайдлайн».
Как пользоваться брендбуком
Я предложил сделать интерфейс таким, чтобы пользователю в каждом разделе было максимально удобно смотреть настройки размеров, типы заливки и многое другое. Это позволяет наглядно понять, какой именно вариант элемента графики понадобится в работе.
Чтобы достичь этой цели, для каждого раздела мы разработали свои уникальные решения и функции.
Версии логотипа
У логотипа всегда есть несколько версий, в которых легко запутаться, если ты не дизайнер. Слайдер наглядно демонстрирует, какую версию логотипа стоит использовать для разных цветов фона.
Фавиконки
Мы показали фавиконки в разном контексте, чтобы продемонстрировать цветовую дифференциацию разделов нашего основного портала.
Библиотека иконок
У нашего бренда довольно объемная библиотека иконок. Они часто используются не только в маркетинговых материалах, но и в презентациях, и даже в оформлении интерьера. Чтобы сделать этот раздел удобным, мы добавили функцию просмотра иконок в разных размерах. При этом для любого из представленных размеров вы сразу увидите точное значение в пикселях.
Цвета
Сохранение консистентности цветов в бренде — это одна из основных составляющих узнаваемой айдентики. Знаете, что чаще всего пишут дизайнеру в рабочих чатах? «Скинь, плиз, наш фирменный красный». Поэтому важно было сделать этот раздел настолько удобным и интуитивно понятным, чтобы любому сотруднику было проще скопировать нужные цвета со страницы, чем писать дизайнеру в личку.
Второй момент: раздел про цвета в брендбуке можно сделать самым эффектным, и упускать эту возможность мы точно не собирались. У нас есть четыре основных цвета. Они используются чаще всего, поэтому им мы уделили особенное внимание.
Любое значение по клику можно быстро скопировать в буфер обмена.
При работе с брендом Selectel мы используем и расширенную палитру. Удобная тоновая иерархия дополнительных цветов помогает нам создавать консистентные системы суббрендов и облегчает подготовку иллюстраций, в том числе и для Академии Selectel.
Переключение тем
Также мы разработали функцию, которая помогает во всех разделах брендбука. С одной стороны, мы внедрили знакомое всем переключение между светлой и темной темой. Однако для нас это еще и наглядная демонстрация того, как работают различные элементы айдентики на темных и светлых фонах. Такое переключение помогает пользователю скачать, например, логотип именно в том варианте, который ему пригодится. То же самое касается и иконок, фирменной графики и маскота.
Что дальше
Уже сейчас мы ощутили, что стандартных вопросов в личку про цвета и иконки стало меньше. Более того, если где-то в общем чате прозвучит вопрос в духе «А где найти стикеры с Тирексом?», коллеги сами скинут в ответ ссылку на открытый брендбук. А счетчик активности на сайте уже сейчас показывает в среднем 600 посетителей в месяц.
Бренд крупного бизнеса — это постоянно растущая система, требующая контроля и умения адаптироваться под новые задачи и направления. Поэтому мы не стремились вместить в первую версию брендбука все необходимые разделы сразу, а сосредоточились лишь на самых основных сценариях. Но мы составили план дальнейшего развития нашего открытого брендбука и назвали такой подход «живой документ».
В скором времени мы планируем добавить функцию переключения цветовых моделей в разделе про цвета и новый раздел с фотобанком для СМИ. Ожидайте обновлений от нашей команды!
Комментарии (7)
kristinazima
17.12.2024 11:21Лео, спасибо, что показываете кусочки внутренней кухни такой крупной компании. Всегда интересно посмотреть на работу лидеров рынка и вытащить что-то полезное для себя.
Есть вопросы по поводу удобства использования брендбука в выбранном вами представлении:
Почему было принято решение расположить 2 сильно отличающихся по смыслу и целевой аудитории раздела на одной странице? Предполагаю, что раздел «О компании» используется значительно меньшим спросом по сравнению с разделом «Гайдлайн», так как на ознакомление с компанией пользователям достаточно прочитать материал пару раз, а гайдлайн — это рабочий инструмент, ради которого брендбук и разрабатывался, поэтому к нему обращаются регулярно. Вижу, что имеется боковое меню с навигацией, но оно прячется при каждом переходе по разделам. И вместо того, чтобы вызывать его каждый раз, мне легче проскроллить, но иногда скроллить приходится много. Уверена, что вы собирали фидбэк от пользователей, поэтому интересно узнать, удобно ли им такое?
В брендбуках обычно рядом с примерами правильного использования графических элементов отображают примеры «как нельзя использовать». Считается, что это помогает не дизайнерам лучше разобраться с брендбуком и избегать грубых ошибок при разработке своих материалов. Почему вы решили не добавлять данный вид подсказок у себя?
Мне также не хватает конкретных примеров использования для всех представленных в брендбуке графических элементов. Например, отображены шрифт и его начертания, но какие размер и начертание мне использовать для заголовков в презентации, а какие для основного текста? Если в презентации или на сайте имеются графики или инфографика, и мне не хватает основных цветов, то какие дополнительные цвета использовать впервую очередь? Хотелось бы иметь возможность посмотреть на примеры реального применения графических элементов. Или данная информации имеется, но в закрытом доступе?
Leopartus Автор
17.12.2024 11:21Спасибо за вопросы! Постараюсь ответить.
1. Согласен, что гайдлайном пользуются чаще, но информация о компании представляет не меньшую важность для формирования целостного впечатления о бренде. Поскольку открытым брендбуком часто пользуются подрядчики, которые могут быть незнакомы с компанией, это важно. По поводу бокового меню - спасибо, что подсветили эту проблему, подумаем над этим.
2. Мы решили не добавлять примеры «как нельзя использовать» по двум причинам. Во-первых, случаев неправильного использования может быть достаточно много; если указывать все, это сильно раздует брендбук, а если указывать только некоторые, это будет похоже на формальность. Во-вторых, макеты в любом случае проходят ревью дизайн-отдела, и все неподходящие случаи использования элементов отсекаются. По нашему опыту, такое происходит редко, и отсутствие примеров неправильного использования не мешает работе.
3. У нас есть отдельные шаблоны презентаций, постов в соцсети, обложек на ютуб и т.д., где есть более подробные рекомендации. В случае необходимости мы высылаем шаблоны подрядчикам, но чаще всего такие рутинные задачи выполняются нашей дизайн-командой, и шаблоны находятся в закрытом доступе. Поэтому задачу открытого брендбука мы видим не в том, чтобы прописать все рекомендации, а в том, чтобы закрыть базовые потребности широкого круга людей. А примеры использования вы можете посмотреть на нашем сайте, в Академии Selectel и в наших соцсетях.
vovkasolovev
Скучноватый стиль, в первую очередь из-за того что буквы логотипа не выглядят обособленно, а выглядят так же как выбранный текстовый шрифт, абзацы и заголовки — от этого нет визуального разнообразия. Визуальных элементов оформления тоже нет, кроме градиентов и очень обычной библиотеки иконок. Не за что запомнить. Например, рассечение логотипа никак в стиле не обыгрывается никак не объясняется(это разрыв провода?). Весь стиль описывается одним словом Manrope. Только с маскотом хорошая работа.
Но главное чего нет — шаблонов. Делая открытый стиль надо в первую очередь давать шаблоны под ключевые нужды, чтобы люди минимально их поправляли, буквально только добавив свой текст. Заполнение А4, бейдж, реклама, сторис, а из 20+ маскотов надо было заготовить 5-10 иллюстраций для постов на хабр. В виде руды пользоваться стилем сложно. Самостоятельно в фигме сидеть те, на кого вы это рассчитывали (Ивент-менеджеры и PR-менеджеры и Продакты), не будут. Сейчас вы напишите, что работаете над этим и всё обязательно будет — но ведь это вторая итерация, представление о рекламном опыте то есть.
Leopartus Автор
Спасибо, что поделились своим мнением и уделили внимание нашей работе!
Для всех рутинных внутренних задач у нас есть шаблоны, и при необходимости они предоставляются исполнителю. Но обычно такие задачи решает внутренняя команда дизайна, и шаблоны находятся в закрытом доступе. Подрядчики же чаще участвуют в проектах, где необходима разработка уникальных макетов, поэтому им нужны не шаблоны, а только базовые элементы.
Что касается менеджеров и продактов, мы и не предполагали, что они будут работать в фигме. Чаще всего таким сотрудникам нужно переслать подрядчику логотип и основные цвета, либо дополнить шаблон своей презентации графическими элементами. Эти задачи брендбук закрывает.
vovkasolovev
Не стоит благодарности. Заявили, что сделали открытый брендбук —
— но что тут тогда открытого? Элементов нет, шаблонов нет, примеров нет, макеты в закрытом доступе.
— и где тут брендбук? Говорите, что подрядчики и макеты и презентации делают сами, пересылая только логотип.
— почему назвали брендбук? Подробным описанием сетки у иконок бренд не формируется. Логотип, шрифт, цвета, иконки и стикеры — это элементы фирменного стиля, только кирпичики для построения коммуникации при формировании бренда.