Сделано в CleverPumpkin
White Label App — мобильный шаблон для партнёров Travelpayouts
Travelpayouts — партнёрская платформа, объединяющая тревел-блогеров, создателей контента и бренды в сфере туризма. Участники зарабатывают на бронировании отелей и покупке авиабилетов через собственные продукты. Чтобы упростить запуск мобильных приложений, Travelpayouts решили создать универсальный шаблон — White Label App.
Моя роль
Я отвечал за полный цикл дизайна: от визуального оформления и создания гибкой системы настройки интерфейса до участия в проектировании конфигуратора и подготовке UI‑компонентов под разные сценарии использования.
Задача
Создать гибкий шаблон нативного мобильного приложения, который любой партнёр Travelpayouts сможет адаптировать под свой бренд, наполнить тревел-контентом и выпустить как приложение без участия разработчиков или дизайнеров.
При разработке интерфейса нужно было учитывать ключевые поинты проекта:
При разработке интерфейса нужно было учитывать ключевые поинты проекта:
—
Интерфейс для приложения должен быть универсальным, чтобы каждый партнёр мог адаптировать под свой бренд
—
Универсальный генератор палитры из одного базового цвета, который исключает ошибки при создании палитр для светлой и тёмной тем
—
Интерфейс должен быть локализован под RTL, включая навигацию, взаимодействие и графические ассеты
Процесс
Цветовая система
Для генератора палитры я выбрал модель HSL. Это позволило создавать гармоничные палитры на базе одного основного оттенка, с автоматическим подбором дополнительных цветов для различных состояний интерфейсных элементов.
—
За счет минимизации манипуляций с цветом удалось исключить все классические ошибки с контрастами цветов
—
В конструкторе была добавлена проверка цвета на контрастность AAA, что исключает создания очень светлых палитр
—
Цвет onPrimary задается атоматически в зависимостио от яркости Primary
Интерфейс
Для White Label App я разработал три визуальных стиля интерфейса, отличающихся степенью скругления элементов. Это решение позволило упростить настройку внешнего вида и сохранить визуальное единство при любом выборе стиля. Дополнительно для каждого стиля предусмотрены соответствующие наборы иконок — заливные, линейные и тональные.
—
Базовый стиль нейтральный, сбалансированный стиль с мягким скруглением. Подходит большинству брендов и обеспечивает универсальность
—
Округлый стиль характеризуется максимальным скруглением всех элементов интерфейса
—
Острый стиль без скруглений, с чёткой геометрией и прямыми углами. Придаёт интерфейсу строгость и брутальность.
Базовый стиль
Скругленый стиль
Острый стиль
Иконки
Для соблюдения консистентности интерфейса я подготовил для интерфейса два базовых стиля иконок и дополнительные вариации стилей. В качестве основы был выбран набор иконок Material Design — он хорошо документирован, содержит широкую библиотеку готовых решений и поддерживает масштабируемость.
Недостающие иконки я отрисовал самостоятельно, используя ту же базовую сетку, чтобы сохранить единые пропорции, толщину линий и угол скругления.
Недостающие иконки я отрисовал самостоятельно, используя ту же базовую сетку, чтобы сохранить единые пропорции, толщину линий и угол скругления.
Иконки со скруглениями для базового и скругленого стиля
Иконки без скуглений для острого стиля
Об интерфейсе
Я занимался дизайном всех экранов приложения для поиска авиабилетов. Для стартового экрана поиска я предусмотрел возможность кастомизации фона и текстовой фразы. Это позволяет интеграторам сделать дизайн своего приложения более уникальным.
Результат
По итогам всех работ заказчик получил готовый шаблон нативного приложения, который легко масштабировать и использовать для привлечения новых партнёров на платформу Travelpayouts.
C командой предусмотрели конфигуратор приложения так, чтобы партнёры могли самостоятельно создавать современный и стильный интерфейс, сохраняя целостность UI и гармоничный дизайн. Для удобства была подготовлена подробную инструкция по кастомизации White Label App под любой бренд. С её помощью любой партнёр сможет пошагово собрать приложение: от скачивания архива и настройки рабочей среды до изменения стилистики, финальной сборки, публикации в магазине и подготовки описания для страницы приложения.
