Привет, с вами AZ Agency. Рассказываем, как мы нарисовали приложение для выдуманного банка и сделали с ним кейс на Behance. А там нас нашла клиентка из Индии и предложила нам заказ — уже на реальное приложение, которое помогает составлять образы.
Об AZ
AZ Agency — это международная digital-студия. Разрабатываем брендинг, делаем UX/UI-дизайн, создаём сайты и приложения.
За три года работы отрисовали 50+ проектов. Получили 40+ наград — среди которых 20 МОТ, 28 CSSDA, 3 AWWWARDS и 2 UI BEHANCE ribbon. А наша CEO Настя обучила дизайну 1000+ учеников. О работе, команде и проектах рассказываем в нашем телеграм-канале.
Банк — выдумали, приложение — нарисовали, ленту — получили
Взяли и с нуля придумали приложение современного банка типа Revolut или Wise. И что вы нам сделаете?
Назвали его SEF — от английского safe или русского «сейф». В фирстиле оттолкнулись от нейминга и построили айдентику на метафоре безопасности — системе из блоков и кубиков.
В качестве акцента решили не использовать конкретные образы, а нагенерить что-то абстрактное, но с прозрачными отсылками к банковской тематике. Покрутили варианты в Midjourney — и получили 3D-модели, похожие на монетки.
В результате наш выдуманный кейс получил реальную ленту Behance. А оттуда к нам пришло сразу несколько лидов — с одним из них мы поймали мэтч и начали работать.
Про клиента и задачу
Клиентка — индийская инста-инфлюенсер и блогер. Пишет и снимает видео про лайфстайл, путешествия и фэшн. А к нам пришла за дизайном приложения по подбору образов — Stylzen.
Суть такая: пользователь фотографирует вещи из своего гардероба, загружает в приложение, а нейросеть подбирает из них аутфиты. Итог — готовые луки на любой случай: хоть в офис, хоть на красную дорожку.
Клиентка пришла с максимально конкретной идеей. До нас она уже работала не с одним дизайнером, но результат ей не нравился. В наследство от предыдущих подрядчиков нам достались наработки и комментарии клиентки: что пошло не так и где дизайнеры не попали в её ожидания.
Референсов у нас не было: на рынке есть похожие приложения, но клиентке они не нравились, так что мы должны были сделать не так.
Зато был список согласованных юзер-флоу с проработанным UX. Клиентка уже придумала всё до последнего клика. По сути мы работали с готовым приложением, оставалось только создать UI.
Разработали брендинг без привязки к феминности
Чтобы перейти к дизайну, нам нужен был брендинг. От предыдущих исполнителей к нам ничего не перешло — клиентке не понравился ни один из вариантов. Поэтому мы создавали лого и продумывали фирменные цвета и шрифты с нуля.
Приложение унисекс, поэтому заказчице важно было соблюсти гендерный баланс без перекоса в феминность. Наш логотип получился максимально нейтральным, почти абстрактным, но с подходящей метафорой. Мы взяли две половинки футболки и сложили их в символ, похожий на инь-янь.
В итоге у нас получился образ, который символизирует единство двух полов, а ещё похож на букву S, с которой начинается название приложения — Stylzen.
В качестве фирменных шрифтов мы выбрали Melodrama variable, Ephesis и Inter. А цвета подобрали сразу для двух тем — светлой и тёмной. Для первой использовали белый, голубой, оранжевый, чёрный и фиолетовый. А для второй — чёрный, белый, жёлтый, голубой и зелёный.
Создали дизайн-концепцию с акцентом на стеклянные текстуры
В качестве ключевой метафоры мы выбрали зеркальность. Смысл максимально прозрачный: когда подбираем луки — мы смотримся в зеркало. Сначала мы проиллюстрировали идею с помощью мудборда. Получили «ок» от клиентки — и перешли к дизайн-концепции.
И добавили на фон пунктир — чёрный для белой темы и белый — для тёмной. Его клиентка увидела у нас на сайте и попросила сделать ей такой же. В контенте приложения по подбору образов пунктир выглядит как стежки из ниток.
Отрисовали все экраны приложения под уже существующие флоу
Напоминаем: у клиентки было чёткое тз и частично разработанное приложение, на которое оставалось натянуть UI. С одной стороны, это существенно упростило задачу: не нужно было продумывать UX. С другой, наложило ограничения: нам пришлось учитывать всё масштабное легаси. Но мы справились — и вот какие сценарии у нас в итоге получились:
- Квиз
Тут пользователь указывает информацию о себе: возраст, рост, вес, тип фигуры и даже форму плеч. А ещё рассказывает, куда ходит и чей стиль в одежде нравится. Например, Блэр Уолдорф, принцессы Дианы, Lil Nas X или героя «Острых козырьков». Также можно самому загрузить в приложение свои фэшн-иконы и референсы. На основе этих ответов AI и генерит образы
Важно было не отвлекать пользователей от одежды, поэтому персонажей для квиза мы сделали в ч/б. Справились без иллюстратора — изображения нагенерили с помощью AI.
Стеклянные текстуры здесь тоже есть — за них отвечают волосы персонажей. Такими элементами мы объединяли ч/б иллюстрации с ярким 3D — и сделали дизайн более целостным.
- Гардероб
Это флоу, где пользователь раскладывает свой гардероб и фотографирует каждую вещь. Затем сортирует всё по категориям и маркирует по цветам и стилям.
Штаны, юбки, жакеты, рубашки для обложек категорий — всё нагенерили с эффектом стекла.
- Подбор аутфитов
Нейросеть собирает образы из гардероба пользователя или с вещами из базы, которая в неё загружены. Каждый аутфит можно отредактировать вручную. Например, если нравится топ, который подобрала нейросеть, а юбку хочется заменить на свою.
В этом флоу пользователь выбирает, для какого случая нужен лук, например на свидание, бизнес-встречу или вечеринку. А нейросеть предлагает 10 вариантов. Пока запрос обрабатывается, на экране — всё те же ч/б персонажи в одежды с текстурами стекла.
Оценить сгенерированные луки можно как в приложениях для знакомств. Свайп вправо — лайк, свайп влево — дизлайк, свайп вверх — суперлайк. Понравившиеся аутфиты сохраняются, неподходящие — нет. Со временем нейросеть учится и предлагает более релевантные образы.
Иконки для реакций выбрали минималистичные: дизлайк — крестик, лайк — сердечко, суперлайк — множество сердечек.
- Аутфиты на основе загруженной в AI базы
Для pinterest-эффекта в приложении есть инструмент Style inspiration. Тут нейросеть генерит луки без вещей пользователя — на основе одежды, которая загружена в неё разработчиками. Аутфиты можно сохранить, а можно отредактировать, заменив сгенерированный элемент одежды своим.
- Сохранённые аутфиты
Тут у нас три стопочки с одеждой: луки из гардероба, от нейросети и отредактированные пользователем. С классическими функциями — отредактировать, удалить, добавить новое.
Передали макеты разрабам
Тут могла быть классическая история о спорах дизайнеров и разработчиков. Но в случае со Stylzen это нам пришлось подстраиваться под разработку, а не наоборот. Мы учли все комментарии и ограничения, сейчас приложение на этапе вёрстки — и никаких вопросов к нам пока не было.
Результаты
Начали работать над Stylzen в августе, а закончить планируем в ноябре. Итого: на всё про всё у нас ушло 3 месяца. Отрисовали все экраны для 4 больших флоу: квиза, добавления одежды, подбора луков и сохранёнок. Нагенерили 700+ элементов одежды, отрисовали 120+ экранов для тёмной темы и столько же — для светлой. И всё за 350+ часов, чтобы однажды кто-то собрал идеальный аутфит.
-
Начали работать над Stylzen в августе, а закончить планируем в ноябре. Итого: на всё про всё у нас ушло 3 месяца
-
Отрисовали все экраны для 4 больших флоу: квиза, добавления одежды, подбора луков и сохранёнок.
- Нагенерили 700+ элементов одежды, отрисовали 120+ экранов для тёмной темы и столько же — для светлой.
- И всё за 350+ часов, чтобы однажды кто-то собрал идеальный аутфит.
Вот так выдуманный финтех привел нас к дизайну реального аппа. Мы смогли смэтчиться с требовательной клиенткой, разработать дизайн для почти готового, но голого приложения и сильно прокачаться в работе с AI.
А главное — придумали изящную ключевую метафору: стеклянные переливающиеся текстуры отсылают к зеркалу, перед которым мы подбираем одежду. И смогли выдержать все приложение в единой концепции.
