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

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

Цифровой брендинг — это система, которая определяет, как бренд выглядит и ведёт себя в цифровой среде: на сайте, в интерфейсе, в анимации и интерактивности элементов. В отличие от традиционного брендинга, описывающего статичные носители (визитки, бланки, упаковку), цифровой брендинг работает куда богаче — через движение, графику и другие средства цифровой среды. 

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

Вы хотите «крутой» сайт? Нет, на самом деле вы хотите цифровой брендинг

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

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

Брендбук заканчивается, начинается хаос

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

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

Классический брендбук не решает всех задач бренда, не удовлетворяет его потребности. Сегодня нужно работать иначе.

Проблема цифровых брендов

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

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

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

Коммуникационная стратегия: как найти глубокую идею

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

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

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

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

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

Источник смысла, который определяет айдентику сайта

Когда идея сформулирована, остается перевести её на язык бренда. Этот язык не выдумывается с нуля и не выбирается на Behance — он добывается из самого продукта: его материалов, форм, назначения, контекста, в котором он живёт. И язык этот не только визуальный. Слова, которые несут сообщение бренда (заголовки, формулировки, тон), растут из той же идеи, что и графика, моушен, поведение интерфейса. Текст задаёт смысл прямо, визуал усиливает его эмоцией. Когда текст и визуал работают в унисон, человек схватывает бренд целиком, и сообщение бьёт точнее.

AIR

Бизнес-центр AIR класса A с футуристичной и минималистичной архитектурой. На входе был существующий бренд: логотип и шрифтовая пара. Для сайта, который должен передавать масштаб и характер проекта, этого было мало. Источником визуального языка стало само здание. Из названия проекта родилась идея работы с негативным пространством и непривычная разрядка фраз. Из стеклянных фасадов — полупрозрачные плашки интерфейса, которые читаются как продолжение того же материала. Из поворота этажей — пластика 3D-графики и видео, которые повторяют этот ход на экране. Ни один из этих приёмов не выбирался из соображений «красоты». Каждый непосредственно отсылает к зданию, и поэтому весь сайт ощущается как органичное продолжение архитектуры, а не как отдельный графический проект. Такой подход усиливает эффект красоты многократно.

Посмотреть подробный кейс проекта.

Madar

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

Посмотреть подробный кейс проекта.

Иммерсивный опыт: как усилить ощущение бренда

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

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

 

WebGL — технология, которая позволяет показывать в браузере настоящую 3D-графику с глубиной, объёмом и реакцией в реальном времени. Она добавляет измерение, которого нет у плоского экрана: объем, с которым можно взаимодействовать, ощущение пространства, по которому можно двигаться.

Где бренд встречается с функцией

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

У Madar метафора дороги превращается в способ показать функции продукта, а не просто украшает их.

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

Три сценария: брендинг сайта на практике

Самое частое возражение в начале разговора — «у нас уже есть брендбук». Для нас это не препятствие: мы не переделываем то, что уже сделано. Работа выглядит по-разному в зависимости от стартовой точки. Если у клиента развитая айдентика, она развивается в цифровой среде, не теряя того, что в ней уже работает. Если есть только логотип и палитра, вокруг них строится полная цифровая айдентика. Если бренда ещё нет, работа начинается с коммуникационной стратегии и только потом доходит до дизайна. В каждом из трёх сценариев это один процесс одной команды, и на выходе — сайт, в котором бренд раскрывается глубже, чем в любом PDF.

Индустрия в последние годы отвечает на тот же диагноз по-своему: брендбук переезжает с PDF в интерактивные платформы (Frontify, Zeroheight, Notion-гайды). Это лучше статичного документа и для крупных компаний с распределенными командами полезно. Но это всё ещё отдельный документ, описывающий бренд снаружи. Имиджевый сайт, спроектированный как место, где бренд живёт, выполняет ту же роль полнее, потому что бренд в нём не описан, а воплощён.

Сайт — не зеркало бренда. Сайт и есть бренд

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

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

Частые вопросы

• Что входит в цифровой брендинг?
  Это не только визуал. Цифровой брендинг собирается из нескольких слоёв: коммуникационная стратегия (поиск идеи и сообщения бренда), визуальный язык и графика, моушен и поведение интерфейса, при необходимости — 3D и звук. Плюс то, как всё это транслируется на сайте и в других цифровых точках контакта. Стратегия задаёт смысл, остальное — форму, в которой этот смысл доходит до человека.
• Можно ли сделать сильный сайт без цифрового брендинга?
  Технически — да, красивый сайт можно собрать и без него. Но «красивый» и «сильный» — разное. Без бренда за сайтом нет идеи: решения по цвету, типографике, анимации принимаются произвольно, а не из сути продукта. Такой сайт может нравиться, но он не создаёт связи и не отличает вас от конкурентов. Сильный сайт — это всегда сайт, за которым стоит бренд, даже если клиент изначально просил «просто сайт».
• Можно ли заниматься брендингом отдельно от сайта?
  Можно, но это менее эффективно. Когда брендинг делается в отрыве, а сайт — потом и отдельно, между ними появляется зазор: айдентика описана на бумаге, а в цифровой среде ведёт себя иначе, чем задумывалось. Мы строим брендинг и сайт в одном процессе именно поэтому — так каждое решение сразу проверяется в той среде, где бренд будет жить.
• Сколько времени занимает проект?
  Зависит от стартовой точки и объёма. Если у клиента уже есть развитая айдентика — быстрее, потому что мы её развиваем, а не создаём с нуля. Если бренда нет и начинаем с коммуникационной стратегии — дольше, поскольку сначала нужно собрать информацию, провести серию интервью, найти и зафиксировать идею. Точные сроки мы называем после первого разговора, когда понятен масштаб задачи.
• Почему это дороже обычного сайта?
  Потому что это не верстка макета, а полный путь — от позиционирования и стратегии до айдентики и запуска, который проходит одна команда. Вы платите не за страницы, а за то, что у сайта появляется идея, и каждое решение работает на неё. Дешёвый сайт можно получить и у фрилансера; но он соберёт визуал по своему вкусу, а не из сути вашего продукта — и это будет видно.