Бренд для сервиса доставки с нуля — это не только логотип: имя, знак, палитра, экраны приложения и носители от упаковки до формы курьера собираются в одну систему с правилами. Так мы работали над QADAM, сервисом экспресс-доставки из Ташкента: у него была идея, а имени, знака и интерфейса не было.
Коротко
QADAM — доставка продуктов за считанные минуты. У сервиса была идея, но не было ничего, что можно показать клиенту: ни имени, ни знака, ни интерфейса.
Для доставки это не мелочь. Её выбирают глазами: по вывеске, упаковке, иконке на телефоне. Пока всего этого нет, сервис нельзя запустить, показать инвестору или объяснить курьеру, как он должен выглядеть на улице.
Полное описание проекта — на странице кейса QADAM. Здесь — как мы рассуждали и что из этого можно взять в свой проект.
Отсутствие имени, знака и интерфейса блокирует сразу три вещи, и все три связаны с людьми, а не с кодом.
Поэтому в QADAM бренд, интерфейс и носители собирались как одна система, а не как три отдельные задачи для трёх исполнителей.
Задачу сформулировали как три требования, и каждое проверяется глазами.
| Что нужно было | Как это проверить | Что мы сделали |
|---|---|---|
| Имя и знак, которые читаются на ходу | Логотип узнают на сумке курьера, на мопеде и в списке приложений с одного взгляда | Имя Qadam и знак — буква Q с хвостом-тележкой |
| Интерфейс, где заказ занимает пару касаний | Человек открывает приложение, находит продукты и оформляет доставку, не разбираясь в меню | Экраны главной, каталога и доставки заказа |
| Система, а не папка с картинками | Любой подрядчик собирает новый экран или баннер по правилам, а не на глаз | Брендбук из 14 разделов с правилами для всех носителей |
Третья строка отличает проект бренда от разовой отрисовки. Логотип можно нарисовать один раз, а система нужна, чтобы работа не останавливалась, когда в сервисе появится новый экран или новая точка выдачи.
Работу над QADAM можно разложить на четыре блока, и каждый опирается на предыдущий.
Такая последовательность логична: палитру не приходится подгонять под уже нарисованные экраны, а упаковку и форму курьера — придумывать с чистого листа, когда есть знак и правила. Сам брендбук объединяет все четыре блока.
Qadam по-узбекски значит «шаг», и вся система построена вокруг этого слова: один шаг между «хочу» и «готово».
Знак — буква Q с хвостом-тележкой, то есть логотип, который едет. Идея читается без пояснений: на сумке курьера или в списке приложений видно, что сервис про движение и доставку. Как выбирают название, мы разбирали отдельно, в статье про нейминг.
Пример В QADAM слово, знак и слоган держатся на одной идее. Когда имя говорит о шаге, а знак «едет», дизайнеру и подрядчику не нужно гадать, как рисовать упаковку или форму курьера: ответ уже заложен в смысле.
Брендбук QADAM описывает всё, с чем сталкивается человек: от знака до формы курьера. Палитра состоит из трёх цветов: лайм, ваниль и чёрный.
Типографика, иконки и экраны приложения собраны в тот же документ, а не лежат отдельными файлами у разных исполнителей. Что входит в такой документ и кому он нужен, описано в статье про брендбук и дизайн-систему.
Короткая палитра — удобное ограничение: чем меньше цветов в наборе, тем реже подрядчик отходит от правил.
Главная, каталог и доставка заказа готовы в светлой и тёмной темах. Все состояния, цвета и отступы описаны в брендбуке, поэтому фронтенду не нужно ничего додумывать.
Состояния — это то, как элемент выглядит в разных ситуациях: обычный, нажатый, неактивный. Если они не описаны, разработчик выбирает внешний вид сам, и приложение постепенно расходится с макетами.
Две темы решают практическую задачу. Apple в рекомендациях для разработчиков советует убедиться, что приложение хорошо выглядит в обоих режимах оформления, и проверить, что содержимое остаётся читаемым в каждом из них. Когда обе темы нарисованы заранее, такая проверка проходит на макете, а не после выхода приложения.
Как строятся правила интерфейса, из каких этапов состоит работа и какие ошибки встречаются чаще всего, мы описали в материале про UX/UI-дизайн мобильного приложения.
Важно Разработка приложения в проект не входила. Мы сделали бренд, дизайн-систему и экраны, а код остаётся написать разработчикам. Эту границу лучше проговорить в самом начале работы.
Для доставки это важно, потому что сервис живёт не только в приложении: курьер, сумка, транспорт и точка выдачи тоже представляют бренд. В QADAM мы описали всё, с чем человек сталкивается в жизни.
Семь носителей описаны в том же брендбуке, что и знак с экранами, поэтому бренд выглядит одинаково и в телефоне, и на улице.
Главный результат проекта — не логотип, а система, по которой продукт можно собирать без дизайнера. Бренд, интерфейс и носители описаны в одном брендбуке из 14 разделов.
Цифр по заказам и продажам в кейсе нет, и мы их не придумываем: результат проекта — готовая система бренда и экранов.
Проверить такую систему можно и без цифр продаж: дайте брендбук человеку, который не участвовал в проекте, и попросите собрать экран или баннер. Всё, о чём он спросит вслух, — пробел в правилах, который стоит закрыть до того, как с брендом начнут работать подрядчики.
Система нужна, когда бренд встречается с человеком больше чем в одном месте. Логотипа хватает, пока он живёт на визитке и на сайте, а сервису доставки этого мало.
Если совпал хотя бы один пункт, правила стоит записать до первых макетов. В QADAM совпали носители, подрядчики, разговор с инвестором и две темы интерфейса, поэтому результатом стал брендбук, а не логотип.
Схема не привязана к доставке. Она подходит любому сервису, который запускается с нуля и должен выглядеть одинаково на экране, на упаковке и у сотрудников. Перед стартом проверьте несколько вещей.
Ошибка Заказать логотип у одного исполнителя, интерфейс у другого, упаковку у третьего. Каждый честно сделает свою часть, но без единых правил по цвету, отступам и состояниям они дорисовывают проект по-своему, и вместе части не складываются.
Чтобы этого избежать, ставьте задачу на систему целиком: с именем, экранами и носителями, а результатом называйте документ с правилами, а не набор файлов. Тогда на вопрос «как это должно выглядеть» отвечает брендбук, а не память исполнителя.
Мы собираем бренд и интерфейс как одну систему: имя и знак, палитру и типографику, иконки, экраны и носители. Это один брендбук и одна команда, поэтому сервису не приходится склеивать работу нескольких подрядчиков, а разработчикам — угадывать недостающее.
Если у вас пока только идея, начинать можно с неё: QADAM пришёл именно с этим. Задачу и состав работ мы уточняем после короткого разговора; разработку сайта или платформы можно заказать отдельно, на странице разработки сайтов и платформ собраны форматы и цены.
Обсудим вашу задачу
Расскажите, что нужно сделать, — оценим сроки и стоимость и предложим решение.
Остаётся написать код: он в проект QADAM не входил. Главная, каталог и доставка заказа готовы в светлой и тёмной темах, а все состояния, цвета и отступы описаны в брендбуке, поэтому додумывать ничего не нужно.
Можно: QADAM пришёл именно с идеей, у которой не было ни имени, ни знака, ни интерфейса. Имя, слоган, знак, палитру и экраны приложения собрали с нуля, а правила записали в брендбук.
Логотип — малая часть системы. Без единых правил по цвету, отступам и состояниям каждый подрядчик дорисовывает по-своему, а брендбук фиксирует всё за него: знак, экраны, упаковку, транспорт и форму курьера.
Слово значит «шаг» по-узбекски. Вся система построена на идее одного шага между «хочу» и «готово», и она же читается в знаке — букве Q с хвостом-тележкой.
Фирменный паттерн, система иконок, упаковка, мерч и форма, транспорт, форма курьера и точка выдачи — всего семь носителей. Все они описаны в одном брендбуке из 14 разделов.
Обе темы описаны в брендбуке вместе с состояниями и цветами, поэтому фронтенду не нужно ничего додумывать. Apple к тому же советует проверять читаемость в обоих режимах, и на макете это проще сделать, чем после выхода приложения.
Любой подрядчик: правила описаны так, чтобы собирать новый экран или баннер по ним, а не на глаз. Цель системы в том, чтобы продукт можно было собирать без дизайнера.
