Как встраивать сложные графические решения в интерфейсы приложений
2026-02-21 15:23 Diff
https://skillbox.ru/media/design/flowwow-about-app-branding/

#кейсы

  • 20 ноя 2025
  • 0

Как встраивать сложные графические решения в интерфейсы приложений

Продуктовый дизайнер Flowwow Маргарита Савченко рассказывает, как внедрить ребрендинг без ущерба удобству пользователей.

Иллюстрация: Полина Честнова для Skillbox Media

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

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

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

О том, как именно мы разделили весь масштабный процесс адаптации ребрендинга для приложений на четыре крупных этапа, рассказывает Маргарита Савченко, senior-продуктовый дизайнер Flowwow.

В дизайне более пяти лет. За это время успела поработать в агентстве, на фрилансе, а теперь занимается дизайном и развитием мобильного приложения Flowwow.

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

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

В начале 2025 года мы начали процесс адаптации уже внедрённого графического ребрендинга на интерфейсы наших приложений. И вот как это было.

Обновление онбординга и лоадера

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

Лоадер до ребрендинга и после
Изображение: Flowwow

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

Онбординг до ребрендинга
Изображение: FlowwowОнбординг после ребрендинга
Изображение: Flowwow

Перезапуск баннеров

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

Баннерная сетка до и после ребрендинга
Изображение: Flowwow

Обновление цветовой и шрифтовой схемы

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

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

Палитра интерфейса до ребрендинга
Изображение: Flowwow

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

Следующим этапом стала корректировка палитры. В рамках ребрендинга нам передали шесть основных цветов. Они отлично подходили для точечных акцентов, но плохо адаптировались под весь набор элементов интерфейса: например, нарушали контраст между цветом шрифта и фоном в информационных блоках, отвлекали от основного контента. И это была первая глобальная проблема, с которой мы столкнулись. Цвета выглядели слишком ярко и смещали фокус внимания с товаров на дополнительные элементы, например на теги в карточке.

Основные цвета ребрендинга
Изображение: Flowwow

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

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

Гамма в фильтрах до и после ребрендинга
Изображение: Flowwow

Вторым шагом стало построение акцентов в интерфейсе. Для этого мы выбрали два основных цвета из палитры: пурпурный и лососёвый (цвет логотипа). Последний мы используем на иконке «Бонусы», пинах и прочих индикаторах, которые привлекают внимание пользователя.

Изменение цвета в иконке «Бонусы»
Изображение: Flowwow

Пурпурный стал цветом действия — он на кнопках, свитчах, табах, радиобаттонах и чекбоксах.

Изменение цвета кнопок
Изображение: Flowwow

Третьим шагом стало улучшение цветокодировки. Знакомый пользователям значок «Супермагазин» сохранили в узнаваемом фиолетовом — лишь немного поработали с его оттенком, чтобы он лаконичнее вписывался в цветовую гамму ребрендинга. Тем самым мы оставили понятную для текущих пользователей цветокодировку, что дало им возможность видеть полезную информацию и сосредоточиться на выборе подарков.

Изменение цвета значка «Супермагазин»
Изображение: Flowwow

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

Рейтинг карточки магазина до ребрендинга и после
Изображение: Flowwow

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

Палитра интерфейса после внедрения ребрендинга
Изображение: Flowwow

Параллельно мы работали со шрифтом. CoFo Sans, который коллеги предложили в рамках ребрендинга, не подходил нашему интерфейсу. Он был слишком мелким, а фигурные прописные буквы тяжело читались. Мы решили сохранить его в рекламных материалах, а для основного текста выбрали базовые шрифты: в iOS — San Francisco, в Android — Roboto. Они читабельные и знакомы всем пользователям, а также одинаково хорошо выглядят на разных языках.

Применение шрифтов San Francisco и Roboto в интерфейсе Flowwow
Изображение: Flowwow

Весь процесс сопровождался тестами. Я лично просмотрела более 30 сборок с изменениями на iOS и больше 20 на Android. Оценивала, как выглядят страницы с новыми элементами, и составляла пометки для каждого экрана. Это был почти ювелирный труд, а не простая замена. На него мне пришлось потратить несколько недель.

Постепенное обновление интерфейса

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

За последние несколько месяцев мы обновили навигацию и категории: отошли от старой структуры, где доминировала категория «Цветы», и сделали акцент на новом позиционировании, где мы подчёркиваем, что у нас есть все товары для любого праздника.

Навигация до ребрендинга и после
Изображение: Flowwow

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

Новые фичи, отвечающие изменённому позиционированию Flowwow
Изображение: Flowwow

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

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

Таблицы с изменениями для тестирования
Изображение: Flowwow

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

Карта приложения Flowwow
Изображение: Flowwow

Эффективная коммуникация с разработчиками. Разработчики — костяк этого процесса. Мы понимали, что их время — самый ценный ресурс, который важно сберечь по максимуму. Им часто приходилось находить индивидуальный подход для переноса того или иного элемента. Это случалось, когда прописанные чёткие условия замены оказывались нежизнеспособными в реальности. Так, например, при работе над блоком с начинками кондитерских изделий мы подбирали цвета, которые передавали смысл и хорошо смотрелись. Если бы мы заменяли цвета согласно таблице, то получили бы нечитаемый вариант. Поэтому при постановке задач мы договорились исключить из коммуникации эмоции и субъективные оценки, чтобы упростить работу разработчика хотя бы на этом этапе.

О том, как мы во Flowwow сотрудничаем с разработчиками, можно прочитать в моей статье:

Применение цветовой гаммы в приложении Flowwow
Изображение: Flowwow

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

Но, что ещё важнее, дизайн-система в коде — это инвестиция в будущее. Ребрендинг не бывает раз и навсегда. Выходят новые гайдлайны платформ, обновления от ОС, и компании с продуманными дизайн-системами адаптируются к ним куда быстрее и легче.

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

Практический курс: «Профессия UX/UI-дизайнер + ИИ» Узнать о курсе