Айдентика для агентства: как собрать бренд-систему и внедрить ее в работу

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

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

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

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

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

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

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

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

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

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

Палитра включает основные, нейтральные и служебные цвета. Для сайта и цифровых документов дополнительно проверяют пары текста и фона. WCAG 2.2 требует контраст не ниже 4.5:1 для обычного текста и 3:1 для крупного текста. Цвет также не должен быть единственным способом передать статус, ошибку или категорию.

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

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

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

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

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

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

Шаблон должен показывать, какие части можно менять, а какие остаются фиксированными. Команда получает заданные поля для заголовка, изображения, цифры и CTA. Это защищает узнаваемость и сохраняет свободу для разных тем.

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

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

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

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

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

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

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

Название и знак стоит проверять до производства вывесок, упаковки и большого массива контента. В Казахстане зарегистрированные товарные знаки можно искать через государственные реестры Qazpatent. WIPO рекомендует дополнительно проверять международную базу и национальные реестры целевых рынков. Юридическое заключение и регистрацию ведет патентный поверенный.

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

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

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

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

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

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

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

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

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

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

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

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

В Метриум мы сохранили узнаваемую геометрию M1 и изменили подпись, чтобы она лучше сочеталась со знаком. Прежнее тяжелое горизонтальное написание заменили тремя строками: МАРКЕТИНГОВОЕ, АГЕНТСТВО, Казахстан · с 2011 года. Композицию знака M1 с подписью дизайнеры называют lockup.

Основной синий #214EB8 мы используем в знаке, ссылках, линиях, номерах и небольших акцентах. Для сайта, коммерческих предложений, отчетов и редакционных материалов выбрали белые поверхности, светло-серый фон, графитовый текст и тонкие границы. За счет повторения этих элементов материалы сохраняют общее оформление, даже когда их готовят разные сотрудники.

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

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

Откройте знак в размере favicon, аватара и подписи документа. Проверьте, сохраняются ли форма и различие элементов. Мелкие детали, тонкие линии и длинная подпись часто требуют отдельной компактной версии.

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

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

Проверьте сайт, коммерческое предложение, публикацию, рекламный макет и деловой документ. Если система работает только на одном мокапе, она еще не готова к внедрению.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фирменный стиль стоит от 700 000 ₸, бренд-система - от 1 200 000 ₸, запуск бренда с одной посадочной страницей - от 2 500 000 ₸. Точная стоимость зависит от исследования, нейминга, числа носителей и материалов запуска.

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

Если вы планируете новый бренд или обновляете действующий, начните со списка продуктов, аудиторий, каналов и носителей. На странице «Брендинг и фирменный стиль» можно сравнить состав проектов Метриум, сроки и стоимость. Для выбора подрядчика и формата проекта используйте отдельный материал «Как выбрать фирменный стиль».

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

Получить расчет брендинга

Обычно отвечаем в течение 10 минут.

1. IBM Design Language - состав публичной дизайн-системы, ресурсы, типографика, цвет, иконки и шаблоны.
2. Mozilla: A rebrand and a call to action - стратегическая задача ребрендинга и архитектура бренда.
3. WCAG 2.2, критерий 1.4.3 - минимальный контраст текста.
4. Государственная услуга «Регистрация товарного знака» - подача заявки и результат услуги в Казахстане.
5. Где самостоятельно провести поиск по товарным знакам - государственные реестры Qazpatent и международный поиск.
6. WIPO Global Brand Database - международная база и рекомендация проверять национальные реестры.