Сделано в CleverPumpkin

White Label App — мобильный шаблон для партнёров Travelpayouts

Travelpayouts — партнёрская платформа, объединяющая тревел-блогеров, создателей контента и бренды в сфере туризма. Участники зарабатывают на бронировании отелей и покупке авиабилетов через собственные продукты. Чтобы упростить запуск мобильных приложений, Travelpayouts решили создать универсальный шаблон — White Label App.

Моя роль

Я отвечал за полный цикл дизайна: от визуального оформления и создания гибкой системы настройки интерфейса до участия в проектировании конфигуратора и подготовке UI‑компонентов под разные сценарии использования.

Задача

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

При разработке интерфейса нужно было учитывать ключевые поинты проекта:

—

Интерфейс для приложения должен быть универальным, чтобы каждый партнёр мог адаптировать под свой бренд

—

Универсальный генератор палитры из одного базового цвета, который исключает ошибки при создании палитр для светлой и тёмной тем

—

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

Процесс

Цветовая система

Для генератора палитры я выбрал модель HSL. Это позволило создавать гармоничные палитры на базе одного основного оттенка, с автоматическим подбором дополнительных цветов для различных состояний интерфейсных элементов.

—

За счет минимизации манипуляций с цветом удалось исключить все классические ошибки с контратсами цветов

—

В конструкторе была добавлена проверка цвета на контрастность AAA, что исключает создания очень светлых палитр

—

Цвет onPrimary задается атоматически в зависимостио от яркости Primary

Интерфейс

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

—

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

—

Округлый стиль характеризуется максимальным скруглением всех элементов интерфейса

—

Острый стиль без скруглений, с чёткой геометрией и прямыми углами. Придаёт интерфейсу строгость и брутальность.

Базовый стиль

Скругленый стиль

Острый стиль

Иконки

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

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

Иконки со скруглениями для базового и скругленого стиля

Иконки без скуглений для острого стиля

Об интерфейсе

Я занимался дизайном всех экранов приложения для поиска авиабилетов. Для стартового экрана поиска предусмотрен кастомизацию фона и текстовой фразы. Это позволяет интеграторам сделать дизайн своего приложения более уникальным.

Результат

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

Мы предусмотрели конфигурацию так, чтобы партнёры могли самостоятельно создавать современный и стильный интерфейс, сохраняя целостность UI и гармоничный дизайн. Для удобства мы подготовили подробную инструкцию по кастомизации White Label App под любой бренд. С её помощью любой партнёр сможет пошагово собрать приложение: от скачивания архива и настройки рабочей среды до изменения стилистики, финальной сборки, публикации в магазине и подготовки описания для страницы приложения.