Почему ваши сайт и приложение не подходят вашему бренду — объясняет Spiilka Design Büro

Дизайн-директор Spiilka Владимир Смирнов в колонке для AIN.UA рассказывает об опыте создания рабочей айдентики, за которую будет не стыдно в цифре. А соосновательница бюро Настя Жеребецкая комментирует кейсы с точки зрения арт-директора.

Часть первая. Разработка айдентики для цифровой среды

Houston, we have a problem

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

Этот мифический макет сайта невозможно было использовать, он был сделан без учета цифрового контекста, как будто дизайнер нарисовал еще один принт. И поэтому часто из гайдлайнов в цифру перекочевывали только логотип и немного отредактированные цвета (оригинальные были слишком тяжелые). Прошло 11 лет, кирпичики сайтов практически исчезли из брендбуков, появился раздел «Оформление бренда в соцсетях», но ситуация для многих брендов кардинально не изменилась: на сайте или в приложении от бренда остаются только логотип и отредактированные цвета.

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

Что нужно учесть при разработке логобука для цифры

Масштабирование логотипа

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

Цвет

Вам понадобится:

• цвет, который хорошо работает в больших объемах на экране;
• дополнительные UI-цвета;
• правила и пропорции использования цвета в интерфейсе.

Шрифт

Тут есть три пути, и каждый из них подойдет.

• Первый — разработать свой шрифт, который будет хорошо работать на разных экранах, как, например, поступили ребята из Fedoriv и Минцифры, разработав шрифт eUkraine для «Дії».

• Второй — подобрать в пару к шрифту, который уже используется брендом, хороший современный гротеск, который опять-таки будет хорошо работать в интерфейсе.
• Третий — использовать шрифт бренда только для заголовков, а в интерфейсах использовать системные шрифты: Apple — SF Pro, Android — Roboto, Windows — Segoe UI. Этот вариант мы выбрали для Новой Почты.

Визуальный прием

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

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

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

Почему не стоит делать макеты сайтов и приложений на этапе разработки айдентики

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

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

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

Часть вторая. Разработка цифрового инструмента

Что делает ваш инструмент уникальным?

Есть ли у вас брендбук с набором констант для цифры, или брендбук, в котором этого нет, ваша задача не меняется — вам нужно сделать удобный и уникальный инструмент. А что делает ваш сайт или приложение уникальным? Идея. Вернее, так: на первом месте —  big idea или концепция вашего инструмента, потом функционал, на который влияет концепция, а дальше айдентика и коммуникация, которые или поддерживают и усиливают концепцию (или мешают и ослабляют).

Уникальность = (Идея + Функционал) +/- Айдентика +/- Копирайты

Откуда появляется идея? Иногда она заложена в самом бренде, как например, в «Дії». Концепция «Дії» — «государство это сервис» или «человек (гражданин) в центре всего». Это повлияло и на бренд, который выглядит как современный IT-сервис, и на функционал, при проработке которого услуги, предоставляемые государством, проходили полный реинжиниринг.

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

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

Выдержки из брендбука:

Одна из первых попыток:

Финальный концепт-дизайн:

Один из вызовов при разработке инструментов с таким подходом — раскрыть айдентику так, чтобы не нарушить UX и не сделать сайт неюзабельным, но при этом сохранить его уникальность. Поэтому исследование целевой, проработка user-flow и тестирование wireframes остаются обязательными этапами. Вот один из wireframes сайта Forum:

Настя Жеребецкая, дизайн-директор Spiilka и арт-директор проекта:

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

1. На самых ранних этапах создания айдентики учитывать будущие «инженерные» ограничения.
2. Или повозиться с внедрением стиля в диджитал, как это было у нас для сайта Forum.

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

На втором круге мы выкрутили возможности айдентики на максимум и сделали UI таким же смелым, как и графические решения. Смелая айдентика? Good. Смелый сайт? Good.

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

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

Как пример — дизайн сайта для ребят из Gearheart: ребятам нравится стим-панк, поэтому и в айдентике, и на сайте мы используем цвета Викторианской эпохи, «металлические» плашки и шрифт American Typewriter, стараясь визуально передать то, что они любят, а копирайтом — то, во что они верят.

Настя Жеребецкая, дизайн-директор Spiilka и арт-директор проекта:

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

Вот главные плюшки комплексного подхода:

1. Можно сразу проверить, какие приемы работают в офлайне и онлайне, и не создавать каждый раз какие-то новые сущности.
2. Можно заранее понять бюджет на покупку шрифтов и разработку дополнительных материалов. Например, иллюстраций или моушена, если в штате нет таких специалистов.
3. Пользователь видит одну и ту же картинку на всех форматах — сайт передает то же ощущение, что и, например, медийка. Нет пропасти между сочным рекламным баннером и сдержанной веб-страничкой.
4. Клиенту просто удобнее следить за логикой развития своего бренда из одной «точки сборки».

Звезда бренда

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

1. Business — учли ли мы цели бизнеса, пожелания и мечты владельцев, повлияли ли они на структуру, функционал и/или подачу информации.
2. Users — ответили ли мы на запросы пользователей и как они повлияли на наш инструмент.
3. Big Idea — передали ли мы основную идею бренда (если она формализована) в инструменте.
4. Brand Identity — насколько глубоко мы раскрыли айдентику бренда.

Для красоты метафоры представим четыре критерия в виде ромба. Мы считаем задачу успешно выполненной, если проработали как минимум два из четырех критериев и превратили ромб в звезду.

Последняя (на сегодня) проблема — безжалостный интерактив

Эта проблема возникает, когда дизайнеры игнорируют бренд, его идеи и пользователей и слишком увлекаются интерактивными возможностями, в основном анимацией. Это приводит к тому, что бренд в цифре начинает выглядеть как мем со Стивом Бушеми. То есть уникально, интерактивно, только вот совсем неуместно, как, например, сайт архитектурного бюро, на котором из-за навороченной анимации невозможно посмотреть портфолио и прочесть описание проектов. Избежать этого просто — при разработке дизайна нужно постоянно спрашивать себя: «Шоб шо?» Шоб шо мы добавили сюда эту анимацию? Какую проблему мы пытаемся решить? Какую идею мы пытаемся усилить? Не помешает ли это пользователям? Поймут ли они нашу метафору? Захотят ли играть в эту игру? И так далее.

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

Автор: Владимир Смирнов, дизайн-директор Spiilka