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

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

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

Дубай — центр притяжения бизнеса в разных сферах. Мы уже разрабатывали фирменный стиль для часового бутика Bite of Time в Дубае и с интересом взялись за новый проект в Эмиратах. Стартап Tipper обратился к нам, чтобы мы доработали логотип, созданный в другом агентстве. И дальше проект вырос до полноценной айдентики для объединения всех коммуникаций бренда: мы создали гайдлайн с фирменными цветами и шрифтами, разработали иллюстрации и фирменные графические приемы, продумали концепцию всех офлайн-носителей. Последним этапом стал UI-дизайн лендинга.

Чтобы вам было удобно ориентироваться в статье:

● Tipper — один из первых сервисов для безналичных чаевых

● Обновление логотипа и развитие айдентики

● Подбор цветовой палитры

● Глассморфизм как прием, оживляющий дизайн

● Выбор шрифта и доработки

● Создание иллюстраций-инструкций

● Дизайн-решения для полиграфии

● Разработка рекламного лендинга

● Планы по развитию проекта

Как сервис Tipper позиционирует себя на рынке в Дубае

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

Культуру оплаты чаевых в Дубае можно сравнить с Россией. Это очень распространенная практика, хотя и не является обязательной — как, например, в США. При этом работающие сервисы для безналичных чаевых не так давно появились на рынке и пока приживаются в умах посетителей и самих ресторанов. Несколько приложений доступны в тестовом режиме: у них есть интерфейс, но проводить оплату невозможно. Tipper является одним из первых таких сервисов.

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

Tipper будет бесплатным для бизнеса, небольшой сервисный сбор будут оплачивать гости, оставляющие чаевые. В дальнейшем компания планирует развить экосистему сервисов для рестораторов и гостей. Например, аккумулировать большое облако знаний о клиентах и предлагать бизнесу data-driven решения: обеспечивать лидогенерацию, оказывать услуги бронирования и создавать программы лояльности. Это даст Tipper конкурентное преимущество, даже если будут появляться другие приложения для оплаты чаевых.

Приступаем к работе и обновляем логотип

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

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

Финальные версии логотипа
Финальные версии логотипа

Разрабатываем сложную палитру, адаптируем цвета под две темы и создаем градиент

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

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

Здесь, например, цвета на тёмном и светлом фоне могут показаться одинаковыми, а на самом деле они разные.

Палитры для светлой и темной темы
Палитры для светлой и темной темы

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

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

Mesh-градиенты
Mesh-градиенты

Добавляем глассморфизм

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

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

Выбираем шрифт

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

Важным пунктом было наличие арабских символов в гарнитурах — Tipper будет использовать тексты и на английском, и на арабском.

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

Создаем иллюстрации-инструкции: персонаж в арабской одежде и проблема с копилкой

Для рекламных стендов и для сайта мы разработали несколько иллюстраций: они показывают процесс взаимодействия с сервисом.

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

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

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

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

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

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

Продумываем разные форматы полиграфии

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

Тейбл-тенты
Тейбл-тенты

Чтобы сделать полиграфию ещё более интересной для гостей, мы придумали «аналоговый» вариант глассморфизма: решили напечатать QR-код на кальке и наложить её на вкладыш в меню. На нем описана работа сервиса Tipper, а по QR-коду можно провести оплату.

Вкладыш для меню
Вкладыш для меню

Мы хотели адаптировать эффект глассморфизма и для визиток сотрудников, напечатав их на прозрачном пластике. Эта услуга есть в типографиях в любом российском городе, но, как выяснилось, в Эмиратах невозможно найти УФ-печать, которая нужна была для производства бейджей на пластике. В результате мы отказались от прозрачности и вместо этого приема адаптировали глассморфизм, стилистически объединив носители digital и print форматов.

Карты сотрудников с адаптированным приемом глассморфизма
Карты сотрудников с адаптированным приемом глассморфизма

Также мы разработали таблички для дверей в кафе и ресторанах и держатели для стаканчиков:

Таблички для дверей
Таблички для дверей
Держатели для стаканчиков
Держатели для стаканчиков

Создаем UI-kit и дизайн-макет сервиса, в том числе в зеркальном отражении

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

Сначала мы разработали UI-кит, в котором задействовали все фирменные приёмы (глассморфизм, градиенты, иллюстрации), и продумали отдельные элементы интерфейса — иконки, формы и разные состояния кнопок, оттенки цвета для них. Для демонстрации UI-кита мы разработали концепт первого экрана сервиса.

На следующем этапе мы собрали дизайн-макет в Figma и предусмотрели автоматическую смену цветов при переключении со светлой на темную тему.

UI-кит
UI-кит

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

Лендинг в англоязычной версии и на арабском языке
Лендинг в англоязычной версии и на арабском языке

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

Концепция экрана для платёжного терминала
Концепция экрана для платёжного терминала

Планы по развитию проекта

28 сентября 2022 года Tipper принимал участие в крупном отраслевом ивенте Caterer Middle East Awards 2022 — это церемония награждения за достижения в ресторанной индустрии. Сервис выступил со своим стендом в качестве спонсора мероприятия, благодаря чему о сервисе узнали крупные рестораторы — потенциальные клиенты Tipper.

Презентация Tipper на Caterer Middle East Awards 2022
Презентация Tipper на Caterer Middle East Awards 2022

Сейчас команда Tipper дорабатывает сервис перед релизом: основная часть работы — изменения в дизайне самого сервиса с учётом нового фирменного стиля и UI-кита. Выход приложения планируется в скором времени: его продолжат продвигать на офлайн-мероприятиях, а также в соцсетях.

Над проектом работали дизайнеры maryco:

Ника Октябрь — арт-директор

Серёжа Подковыркин — лид-дизайнер

Ариша Подгайская — креативный дизайнер

2525
3 комментария

Кейс интересный, особенно учитывая арабскую специфику. Получается в эмиратах нет пока таких сервисов получения чаевых? Реально УФ-печать нигде не делают или я не правильно понял?

1
Ответить

Чаевые в ОАЭ не являются обязательными, как они условно обязательны в некоторых странах. А так же, очень часто, чаевые уже включены в счёт. К тому же размер этих необязательных чаевых исчисляется, обычно, 1-2 долларами, а не процентами от счёта. Вот какую специфику надо было в первую очередь учитывать.

Ответить

Добрый день ! Как вывести деньги из этого приложения ? У меня есть ID ,но деньги я не могу вывести

Ответить