Зеркально отраженный лендинг, глассморфизм и фиолетовые градиенты: особенности айдентики для сервиса Tipper в Дубае
Tipper — приложение для оплаты чаевых в Дубае, которое должно стать первым звеном большой экосистемы сервисов для ресторанного бизнеса в этом регионе. Команда бренда обратились к нам за разработкой айдентики и UI-кита. В работе мы совместили современные тренды и культурную специфику ОАЭ.
Дубай — центр притяжения бизнеса в разных сферах. Мы уже разрабатывали фирменный стиль для часового бутика Bite of Time в Дубае и с интересом взялись за новый проект в Эмиратах. Стартап Tipper обратился к нам, чтобы мы доработали логотип, созданный в другом агентстве. И дальше проект вырос до полноценной айдентики для объединения всех коммуникаций бренда: мы создали гайдлайн с фирменными цветами и шрифтами, разработали иллюстрации и фирменные графические приемы, продумали концепцию всех офлайн-носителей. Последним этапом стал UI-дизайн лендинга.
Чтобы вам было удобно ориентироваться в статье:
● Tipper — один из первых сервисов для безналичных чаевых
● Обновление логотипа и развитие айдентики
● Подбор цветовой палитры
● Глассморфизм как прием, оживляющий дизайн
● Выбор шрифта и доработки
● Создание иллюстраций-инструкций
● Дизайн-решения для полиграфии
● Разработка рекламного лендинга
● Планы по развитию проекта
Как сервис Tipper позиционирует себя на рынке в Дубае
Дубаи называют одним из главных гастрономических хабов в мире наряду с Лондоном и Нью-Йорком. Количество ресторанов здесь стабильно увеличивается, а с пандемией повысилась конкуренция — рестораторы вынуждены постоянно совершенствоваться и улучшать клиентский опыт.
Разработка подобного полноценного приложения в Дубае — дорогостоящий проект, и не все предприниматели располагают достаточными ресурсами. Также есть административные сложности: нужно подключать платёжную систему, а банки в Дубае с осторожностью относятся к электронным сервисам и проводят очень много проверок. Лицензию получить непросто, нужно больше времени и усилий.
Tipper будет бесплатным для бизнеса, небольшой сервисный сбор будут оплачивать гости, оставляющие чаевые. В дальнейшем компания планирует развить экосистему сервисов для рестораторов и гостей. Например, аккумулировать большое облако знаний о клиентах и предлагать бизнесу data-driven решения: обеспечивать лидогенерацию, оказывать услуги бронирования и создавать программы лояльности. Это даст Tipper конкурентное преимущество, даже если будут появляться другие приложения для оплаты чаевых.
Приступаем к работе и обновляем логотип
До сотрудничества с нами Tipper обращался в другое агентство. Бренду было важно найти свою визуальную идентичность концепцию и отразить ее в логотипе, а также — найти гибкие дизайн-решения, подходящие для разных носителей. Основным пожеланием клиента был фиолетовый цвет — цвет творцов и мечтателей, что отражает подход команды Tipper к бизнесу. Предложенная другим агентством концепция логотипа была интересной, но дальше масштабировать его до дизайн-системы в соответствии с видением Tipper не получилось.
За развитием полноценной айдентики команда Tipper обратилась к нам. И мы начали строить ее вокруг уже созданного логотипа. Мы не меняли его, только создали одну дополнительную версию — сочетание символа и буквы T — для удобного размещения на небольших носителях.
Разрабатываем сложную палитру, адаптируем цвета под две темы и создаем градиент
Одним из наиболее трудоемких процессов был подбор цветовой палитры, которая должна была быть достаточно широкой. Во-первых, для корректной цветопередачи нужно подбирать разные оттенки для digital и для полиграфии.
Во-вторых, команда Tipper хотела сделать сервис в двух темах — светлой и темной. Использовать одни и те же цвета на тёмном и на светлом фоне — не лучшее решение. Они могут быть недостаточно контрастны и осложнять восприятие, а иногда и вовсе казаться разными: из-за особенностей нашего зрения. Мы подобрали для каждой темы свои оттенки — всё продумано так, чтобы глазам было комфортно воспринимать цвета в обеих версиях.
Здесь, например, цвета на тёмном и светлом фоне могут показаться одинаковыми, а на самом деле они разные.
Для точной цветопередачи фиолетового в полиграфии мы подобрали краски из палитры Pantone, с которыми цвет точно будет стабильным. При обычной печати оттенки получаются от смешивания розовых, голубых, жёлтых и чёрных пигментов — это и приводит к искажениям. Pantone — готовая краска нужного нам оттенка, которая всегда будет одинаковой.
Клиент попросил нас отойти от плоского дизайна, поэтому в качестве фирменного приёма мы выбрали градиенты сложной формы: они добавляют динамику, глубину и пространственность в дизайн.
Добавляем глассморфизм
Это дополнительный стилеобразующий прием — наложение полупрозрачных плашек с размытием фона. Он оживляет айдентику и делает дизайн нескучным. К тому же глассфорфизм добавляет айдентике материальность, и это хорошо сочетается с планами бренда вести широкую оффлайн-коммуникацию на физических носителях, расположенных в ресторанах и кафе.
Выбираем шрифт
Предыдущее агентством уже предложило использовать акцидентный шрифт RF Dewi. Мы отобрали несколько его начертаний, чтобы выстроить визуальную иерархию всей текстовой информации, и добавили ещё один наборный шрифт — Raleway. Он более простой, для печати основного текста.
Важным пунктом было наличие арабских символов в гарнитурах — Tipper будет использовать тексты и на английском, и на арабском.
Создаем иллюстрации-инструкции: персонаж в арабской одежде и проблема с копилкой
Для рекламных стендов и для сайта мы разработали несколько иллюстраций: они показывают процесс взаимодействия с сервисом.
Особенно интересно было отрисовывать персонажа в арабской одежде, это был творческий вызов. Основная сложность была в том, что в арабской одежде не видно положения тела — наш иллюстратор помогла проработать пластику персонажа, чтобы его поза выглядела естественно.
Мы также сделали несколько мини-иллюстраций для разных задач: например, для демонстрации работы сервиса, проведения транзакций, ведения учета владельцем бизнеса, подключившегося сервис. Иллюстрации включают разные объекты: банка с чаевыми, смартфон, копилка, чек, терминал оплаты и так далее. Мы объединили их в конструктор, из которого можно собирать разные по смыслу композиции на любых носителях: на сайте, рекламных баннерах и в постах в соцсетях. У каждой иллюстрации есть «тёмная» и «светлая» версия.
Во время отрисовки одного элемента — копилки — произошла анекдотическая ситуация. Наряду с другими идеями мы предложили привычный для России образ свиньи-копилки. Клиент сразу попросил не использовать, потому что свинья для мусульманский среды — этически не лучшее решение. В итоге мы остановились на копиле в форме банки, чтобы не рисковать.
Продумываем разные форматы полиграфии
Используя сервис Tipper, гости ресторанов будут оставлять чаевые по QR-кодам, расположенным на тейбл-тентах, во вкладышах в меню и на подставках под стаканы. Нам важно было сделать эти материалы привлекающими внимание и приглашающими воспользоваться сервисом. Поэтому мы задействовали в дизайне фирменные градиенты и глассморфизм.
Чтобы сделать полиграфию ещё более интересной для гостей, мы придумали «аналоговый» вариант глассморфизма: решили напечатать QR-код на кальке и наложить её на вкладыш в меню. На нем описана работа сервиса Tipper, а по QR-коду можно провести оплату.
Мы хотели адаптировать эффект глассморфизма и для визиток сотрудников, напечатав их на прозрачном пластике. Эта услуга есть в типографиях в любом российском городе, но, как выяснилось, в Эмиратах невозможно найти УФ-печать, которая нужна была для производства бейджей на пластике. В результате мы отказались от прозрачности и вместо этого приема адаптировали глассморфизм, стилистически объединив носители digital и print форматов.
Карты сотрудников с адаптированным приемом глассморфизма
Также мы разработали таблички для дверей в кафе и ресторанах и держатели для стаканчиков:
Создаем UI-kit и дизайн-макет сервиса, в том числе в зеркальном отражении
После завершения айдентики мы продолжили сотрудничество с командой Tipper. Нашей следующей задачей было создание рекламного лендинга.
Сначала мы разработали UI-кит, в котором задействовали все фирменные приёмы (глассморфизм, градиенты, иллюстрации), и продумали отдельные элементы интерфейса — иконки, формы и разные состояния кнопок, оттенки цвета для них. Для демонстрации UI-кита мы разработали концепт первого экрана сервиса.
На следующем этапе мы собрали дизайн-макет в Figma и предусмотрели автоматическую смену цветов при переключении со светлой на темную тему.
Сайт Tipper будет работать на английском и арабском языках, поэтому мы создали две версии. Так как арабское письмо читается справа налево, мы сделали дизайн в зеркальном отражении.
При бесконтактной оплате заказа гость подносит карту к платёжному терминалу, где обычно высвечивается типовой интерфейс. Мы подумали, что контакт с конкретным брендом — более клиентоориентированный подход, поэтому предложили сделать меню для терминала в фирменном стиле Tipper. Для этого мы создали прототип экрана в стилистике бренда и с приемами UI-кита. Однако для внедрения этого решения нужно более дорогое оборудование, и пока мы отложили идею в перспективу.
Планы по развитию проекта
28 сентября 2022 года Tipper принимал участие в крупном отраслевом ивенте Caterer Middle East Awards 2022 — это церемония награждения за достижения в ресторанной индустрии. Сервис выступил со своим стендом в качестве спонсора мероприятия, благодаря чему о сервисе узнали крупные рестораторы — потенциальные клиенты Tipper.
Сейчас команда Tipper дорабатывает сервис перед релизом: основная часть работы — изменения в дизайне самого сервиса с учётом нового фирменного стиля и UI-кита. Выход приложения планируется в скором времени: его продолжат продвигать на офлайн-мероприятиях, а также в соцсетях.
Над проектом работали дизайнеры maryco:
Ника Октябрь — арт-директор
Серёжа Подковыркин — лид-дизайнер
Ариша Подгайская — креативный дизайнер