Как я участвовал в IOS Widget Challenge и что из этого вышло

Привет! Я Влад Калашников, Senior Product Designer в стартапе Re:Luna, до этого работал в МТС и Pinkman. Недавно я писал в своем телеграм-канале идею о том, как можно развивать UI продуктовому дизайнеру. Если коротко, то можно начинать с дизайна маленьких частей интерфейса и постепенно увеличивать их размер. Например: кнопка, карточка, секция, страница. Преимущество такого подхода в том, что изначально на это не тратится много времени и это позволяет уделять внимание небольшим деталям. Мне кажется, что это один из критериев хорошего UI.

И вот удачным совпадением стало то, что Вова Красильников (автор канала Secret Design) запустил челлендж по дизайну iOS-виджетов, что совпало с моим постом, и я решил попробовать себя в нем. Нужно было на протяжении месяца каждый день делать по одному виджету на заданную тему. Я иногда забивал на технические ограничения, так как хотелось больше сделать упор на UI. Далее можно посмотреть каждый виджет и мои заметки по его созданию.

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

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

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

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

Ну, тут все просто: виджет в стилистике MP3-плееров. Сделал две версии: 2x2 и 4x2.

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

Тут решил попробовать интересное цветовое сочетание для графика

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

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

Но был нюанс, о котором я узнал чуть позже — существуют города, у которых разница не только по часам, но и по минутам. Например, Непал, у которого GMT+5:45, или Иран с GMT+3:30. И я решил проработать этот и другие кейсы в дизайне, который вы можете видеть в прикрепленных изображениях.

Я решил сделать виджет с отображением погоды на Марсе с перспективы камня. При создании решил добавить бабл с текстом, который будет отображать настроение камня. Кстати, в итоге мне это напомнило сцену из «Все, везде и сразу»

В этом виджете решил сделать дизайн в стилистике Nothing OS

Сделал два варианта. В первом решил обрезать текст, когда он будет крутиться, а во втором решил поиграться с радиальным градиентом

Вдохновлялся K-VRC из мультантологии «Любовь, смерть и роботы», если еще не смотрели, то очень советую

Тут мне хотелось сделать что-то необычное и решил отобразить диаграмму, которая вписывается в форму виджета

Тут просто вынес наиболее популярные, на мой взгляд, действия

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

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

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

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

В этом виджете я старался совместить стилистику дуолинго с минимализмом

Пользователь может выбрать несколько типов виджета. Также виджет меняет цвет в зависимости от последней статистики

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

Отображает количество пыльцы в воздухе. Вдохновлялся приложением Apple для отметок настроения. Сделал фигуры в форме цветков, также они меняются в зависимости от уровня пыльцы

Тут просто приятный дизайн и еще заблюрил фильмы на фоне, чтобы показать, что они недоступны

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

Тут решил сделать дизайн на фоне ночного неба, что пересекается с астрологией

Решил сделать этот виджет для книжного магазина. Штрихкод для того, чтобы быстро начислить/списать бонусы. Также иконки для покупок до подарка сделал в таком формате, чтобы было понятно, что это именно покупки до подарка, а не просто подарок или покупки. Также сделал дивайдер 3х блоков в виде книги

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

В этом виджете пытался сделать все достаточно просто и минималистично

Сделал виджет в стиле дизайна внешней коммуникации фигмы. В виджете можно сохранить шрифт или посмотреть следующий

Мне очень понравилось участвовать в челлендже, потому что:

・В первую очередь это позволило мне подтянуть UI

・Познакомиться с классными дизайнерами, которые также участвовали в челлендже

・Начать наконец постить свои работы в соц. сети

・Мне даже поступило несколько предложений пообщаться на счет работы

Я думаю, что это прикольная идея — дизайнить что-то каждый день, так как это позволяет оставаться в тонусе, а продуктовому дизайнеру, как мне кажется, это нужно.

У меня уже появились идеи для следующих челленджей, которые я бы точно хотел провести в этом году:

・Циферблаты для умных часов, всегда хотел попробовать себя в этом

・Приложения для Apple Watch

・Иконки мобильных приложений

・ 3D, а то я уже немного подзабыл и год не заходил в C4D

・AI, хочется уже наконец разобраться с генерацией изображений и попробовать ReCraft и Midjourney

・Микроанимации

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

・Конструктор гардероба в Figma

・Навык презентации для дизайнера

・Как я участвовал в хакатоне TON