Создаем эффектную айдентику для цифрового продукта

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

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

По данным исследования Lucidpress, 68% специалистов объясняют рост доходов компании именно последовательным брендингом.

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

Стратегия бренда

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

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

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

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

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

Исследование

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

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

Следующий шаг — всесторонний анализ отрасли. Этот процесс подразумевает изучение ключевых элементов фирменного стиля конкурентов (логотипов, цветовых сочетаний, шрифтов и т.д.).

Важна конкретика, а не общие наблюдения. Например, проведите исследование иконок приложений, и вы поймете, что главную роль здесь играет дифференциация по цвету. Согласно исследованию, проведенному Институтом цвета Pantone, цвет может повысить узнаваемость бренда на 80%.

Кроме того, необходимо учитывать дизайн иконок тех приложений, которые хотя и не являются вашими прямыми конкурентами, присутствуют на большинстве телефонов (например, Google, Chrome/Safari, Facebook*, Twitter). Важно, чтобы значок вашего приложения выделялся на их фоне.

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

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

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

Концепции

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

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

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

Ментальные карты — один из способов генерации концепций
  • Ментальные карты и ассоциации

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

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

Используйте элементы ментальной карты для создания концепции
  • От обратного

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

  • Случайные стимулы

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

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

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

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

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

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

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

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

Ключевые элементы айдентики цифрового продукта

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

Логотип

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

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

Discord использует в стандартном и упрощенном логотипе разные версии символа и словесного знака. Компактную версию отличают более заметные детали и увеличенный трекинг

Логотип может быть комбинированным — текст + символ — или шрифтовым, но с узнаваемой деталью, которая сама по себе может служить иконкой приложения или аватаром. Главное — сохранить прочную ассоциацию с основным логотипом. Хороший пример — лого компании Bolt: команда изобретательно сформировала символ молнии из негативного пространства между буквами.

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

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

Типографика

Типографика играет ключевую роль в формировании идентичности бренда. К сожалению, команда, которая занимается разработкой фирменного стиля, не всегда учитывает потребности UI/UX-команды, особенно когда речь идет о сложных продуктах. Вот основные компоненты типографики бренда:

Шрифт для заголовков

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

  • Сколько языков будет поддерживать ваш продукт?
  • Собираетесь ли вы использовать специальные символы, например, стрелки, знаки валют или математические знаки?
  • Какой уровень читабельности требуется для заголовков, и каким будет наименьший размер шрифта?
Шрифт Roobert, разработанный компанией Displaay Type Foundry, — отличный пример практичного шрифта для заголовков. Он сочетает в себе уникальные детали и характер, а также предлагает различные стили, набор функций OpenType, поддержку языков на основе латиницы и специальные символы

Основной шрифт

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

Какие факторы необходимо учесть:

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

Шрифты с большими апертурами и открытыми формами предпочтительнее, поскольку они упрощают разграничение похожих букв, например «c» и «o». Желательно, чтобы шрифт включал как пропорциональные, так и моноширинные цифры, а также специальные символы.

Neue Haas Grotesk от Commercial Type — шрифт для основного текста, который не теряет актуальности

Резервные шрифты

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

Выбрав резервные шрифты, опишите наиболее вероятные варианты их использования
Лейаут

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

Нам важно найти золотую середину между атмосферой бренда и постоянно меняющимся дизайном.

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

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

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

Выберите один из вариантов или создайте собственную комбинацию, чтобы эффективно донести вашу идентичность и сообщение до аудитории.

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

Обратите внимание, насколько по-разному воспринимаются эти макеты, несмотря на то, что в них используются один и тот же шрифт (Inter) и элементы
Цвет

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

  • Призывы к действию (CTA)

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

  • Контраст

Графические дизайнеры, как правило, имеют большую творческую свободу, чем дизайнеры интерфейсов, которые должны следовать строгим отраслевым стандартам. Тем не менее, им тоже необходимо помнить о контрастности и придерживаться требований WCAG (уровень не ниже АА). Учитывайте демографические характеристики аудитории и потенциальные сценарии использования. Сделать свой продукт доступным для всех — благородная миссия, которая укрепит репутацию вашего бренда.

Примеры цветовых сочетаний и их коэффициенты контрастности
  • Расширенная цветовая палитра

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

Обязательно отметьте в расширенной палитре, какой цвет должен использоваться для CTA
  • Процентное соотношение цветов в дизайне

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

Акцентные цвета не являются доминирующими
  • Компенсация цвета

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

Две версии логотипа — на светлом и темном фоне. Принцип компенсации цвета также применяется для текстов, иконок и других элементов

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

Масштабируемая система иллюстраций

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

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

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

Масштабируемость системы иллюстраций на примере бренда Streetbeat

Чаще всего иллюстрации работают в тандеме с фотографиями — вместе они создают целостный образ бренда. Однако некоторые бренды предпочитают использовать что-то одно — только иллюстрации или фотографии.

Фотографии

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

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

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

Стиль фотографий Zipline отражает ценности компании, в частности ее приверженности многообразию и инклюзивности

Рассмотренные в статье элементы — это критический минимум для достижения успеха в цифровом пространстве. Четко опишите все компоненты вашего бренда. Вы можете создать руководство, которое будет доступно UI-дизайнерам (например, в Figma), чтобы сделать совместную работу эффективнее.

Единый механизм

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

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

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

* Meta признана в РФ экстремистской организацией

Источник
и
:
arrow