Зеркально отражённый лендинг, глассморфизм и фиолетовые градиенты: особенности айдентики для сервиса Tipper в Дубае
Tipper — приложение для оплаты чаевых в Дубае, которое должно стать первым звеном большой экосистемы сервисов для ресторанного бизнеса в этом регионе. Команда бренда обратилась к нам за разработкой айдентики и UI-кита. В работе мы совместили современные тренды и культурную специфику ОАЭ.
Дубай — центр притяжения бизнеса в разных сферах. Мы уже разрабатывали фирменный стиль для часового бутика Bite of Time в Дубае и с интересом взялись за новый проект в Эмиратах. Стартап Tipper обратился к нам, чтобы мы доработали логотип, созданный в другом агентстве. И дальше проект вырос до полноценной айдентики для объединения всех коммуникаций бренда: мы создали гайдлайн с фирменными цветами и шрифтами, разработали иллюстрации и фирменные графические приемы, продумали концепцию всех офлайн-носителей. Последним этапом стал UI-дизайн лендинга.
Приступаем к работе и обновляем логотип
Бренду было важно найти свою визуальную идентичность концепцию и отразить ее в логотипе, а также — найти гибкие дизайн-решения, подходящие для разных носителей. Основным пожеланием клиента был фиолетовый цвет — цвет творцов и мечтателей, что отражает подход команды 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-кита. Выход приложения планируется в скором времени: его продолжат продвигать на офлайн-мероприятиях, а также в соцсетях.
