Как создать яркий визуальный язык: 5 советов для B2B-компаний

Согласно данным нейробиологов MIT, наш мозг способен обрабатывать изображения за 13 миллисекунд. Ученые провели тест, чтобы проверить, как человек запоминает информацию. Через три дня после теста 65% участников смогли восстановить данные, которые сопровождались визуальным рядом — этот показатель в два раза выше, чем у текста без картинок.

На деле это означает, что первое впечатление от бренда во многом зависит от того, как он оформлен. Постоянно растущая конкуренция подталкивает компании к созданию яркого и запоминающегося визуального языка для коммуникации с аудиторией. В то время как direct-to-customer бренды уже давно используют дизайн в качестве важного инструмента взаимодействия, b2b-компании только присматриваются к нему. Последний отчет Content Marketing Institute из Северной Америки показывает, что ситуация меняется: в 2018 году большая часть контент-маркетологов, работающих с бизнесом, стала в разы чаще использовать аудио, видео и другой визуальный контент в диджитал-форматах.

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

микаэла марини хиггс

Автор

Аля айсина

Автор


Фото на обложке @alecuffia / Unsplash

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

Создавайте красивую верстку постов с Setka Editor — попробуйте бесплатно.

1. Выберите позиционирование

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

 

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

Интернет-банк для предпринимателей «Toчка» (Финансовая группа «Открытие») при обновлении дизайна опирался на пожелания, собранные из клиентских историй и диалогов с сотрудниками. Такой подход эффективно работает на построение долгосрочных отношений и лояльности к бренду.

Для создания фирменного стиля нужно разобраться в том, что лежит в основе бренда и является его ценностями. Во время разговоров с коллегами, инвесторами и клиентами можно обнаружить инсайты, которые станут платформой для философии бренда. Разработчики новой «Точки» использовали принципы сервис-дизайна, где самое ценное — опыт пользователя, а не сам продукт.

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

2. Рассказывайте яркие истории

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

«Самый сильный, яркий дизайн не просто рассказывает истории, но и приглашает придумать собственное продолжение, — делится ведущий дизайнер Эллен Лаптон. — Работая над сторителлингом для бренда, мы определяем визуальные элементы, которые впоследствии сможем использовать для общей, межплатформенной коммуникации».

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

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

3. Делайте верстку, которую удобно читать

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

Создавайте красивую верстку постов с Setka Editor — попробуйте бесплатно

 

Есть несколько довольно универсальных советов, как сделать верстку более удобной и выразительной:

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

СОВЕТ: Визуально легкий и структурированный текст удерживает внимание, поэтому не пренебрегайте базовыми правилами типографики, даже в техническом тексте. Ориентируйтесь на следующие параметры: ширина основной колонки — 35-95 символов в строке; размер шрифта — 16-20 кегль; объем абзаца — 5-10 строк.

Следуя этим советам, главное не перестараться, так как лаконичность и «чистота» дизайна также влияют на восприятие. Для вдохновения посмотрите, как оформляют материалы крупные онлайн-медиа, например, NY Times или Aфиша Daily.

4. Вложитесь в иллюстрации

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

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

«Мы долго искали характер персонажей, остроту линий, выбирали подходящую форму объектов, выражения лиц, форму глаз, баланс темного и светлого, сочетание фактуры и чистой линии, игру цвета и монохрома, чтобы правильно донести до зрителя наши ценности и передать характер бренда. Хотелось сказать, что мы живые и гибкие, энергичные и позитивные, человечные и технологичные, и, конечно, всегда движемся навстречу пользователю, — рассказывает Надя Нецветаева, бренд-дизайнер Miro. — Иллюстрации не самая важная часть стиля, но, пожалуй, самая эмоциональная. А в наше время очень важно передать эмоцию и сохранить ощущение человечности даже в самых технологически ориентированных компаниях».

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

5. Добавьте интерактивности

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

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

Так, для Slack одним из новшеств стало использование интерактивных элементов, которые добавляют динамики блогу и сайту. Интерактивные элементы (или «ховеры») влияют на вовлеченность пользователей, а анимация помогает выделить важную информацию. Например, когда пользователь сайта наводит курсор на определенную область, появляются разноцветные графические формы, а неактивный контент, наоборот, становится черно-белым. Такие приемы увеличивают кликабельность, доскроллы и другие показатели эффективности. «Когда есть выбор, люди предпочтут то, что проще в использовании и доступнее в понимании», — написал один из дизайнеров Slack Хьюберт Флоран в посте на Medium, комментируя выбор визуальных решений.

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