Интро
Привет! Я Влад Калашников, Senior Product Designer в стартапе Re:Luna, до этого работал в МТС и Pinkman. Недавно я писал в своем телеграм-канале идею о том, как можно развивать UI продуктовому дизайнеру. Если коротко, то можно начинать с дизайна маленьких частей интерфейса и постепенно увеличивать их размер. Например: кнопка, карточка, секция, страница. Преимущество такого подхода в том, что изначально на это не тратится много времени и это позволяет уделять внимание небольшим деталям. Мне кажется, что это один из критериев хорошего UI.
И вот удачным совпадением стало то, что Вова Красильников (автор канала Secret Design) запустил челлендж по дизайну iOS-виджетов, что совпало с моим постом, и я решил попробовать себя в нем. Нужно было на протяжении месяца каждый день делать по одному виджету на заданную тему. Я иногда забивал на технические ограничения, так как хотелось больше сделать упор на UI. Далее можно посмотреть каждый виджет и мои заметки по его созданию.
1. Погода
Первый виджет мне захотелось сделать в стилистике наручных часов Casio. Также я вручную обрисовал облако с дождем, и, так как внутри было пусто, решил добавить глаза и рот, чтобы стало интереснее.
![](https://habrastorage.org/getpro/habr/upload_files/7cb/3ba/2eb/7cb3ba2eba91680c6b4acd35f9c69723.png)
2. Тамагочи
У меня сразу появилась ассоциация с чем-то пиксельным. Плюс к тому, что мне нравятся покемоны, я решил совместить эти две идеи в дизайне. Правда, позже я понял, что можно было бы пойти дальше и сделать весь интерфейс в пиксельной стилистике, как у некоторых других дизайнеров, у которых получилось очень круто.
![](https://habrastorage.org/getpro/habr/upload_files/577/b13/54b/577b1354b03d304a1a2c67bb4935cfee.png)
3. Заряд устройства
Сделал виджет для вселенной киберпанка, где многие люди пользуются кибер-имплантами. Он показывает процент заряда и сколько времени нужно для полной зарядки.
![](https://habrastorage.org/getpro/habr/upload_files/216/9f7/720/2169f772011ef3a4aedcdf5c4fd04db2.png)
4. Песочные часы
Идея в том, что сзади находится своеобразный пескопад, и постепенно виджет будет наполняться песком. Мне не хотелось использовать обычный песок, хотелось что-то более интересное, поэтому я решил использовать обои iPhone 15. Добавил градиент и размытие, и получился такой эффект.
![](https://habrastorage.org/getpro/habr/upload_files/b14/e9a/095/b14e9a095bcf215c559412a4f2f74606.png)
5. Аудиоплеер
Ну, тут все просто: виджет в стилистике MP3-плееров. Сделал две версии: 2×2 и 4×2.
![](https://habrastorage.org/getpro/habr/upload_files/7d2/b80/344/7d2b80344481bbb6408447bb4f00e0ad.png)
![](https://habrastorage.org/getpro/habr/upload_files/33f/2a0/caf/33f2a0cafabfc2d6b6e18098882da794.png)
6. Шар с предсказанием
Была идея сделать что-то таинственное и мистическое. Быстро сгенерировал картинку в Midjourney и сделал текст чуть по дуге, как будто он огибает шар.
![](https://habrastorage.org/getpro/habr/upload_files/a56/dc8/a34/a56dc8a340290acc129a474433826c97.png)
7. Анализ трат за день
Тут решил попробовать интересное цветовое сочетание для графика
![](https://habrastorage.org/getpro/habr/upload_files/9d5/1bf/8f5/9d51bf8f59307d0da10c775648bf5d50.png)
8. Отображение уровня освещения и настройка оптимального ISO уровня для фотографов
Пытался передать легкий объем виджета за счет внутренних теней и градиентов. Также виджет меняет цвет в зависимости от уровня освещения
![](https://habrastorage.org/getpro/habr/upload_files/6fe/ffc/b24/6feffcb2442529b7da73211c48033918.png)
9. Отображение времени в разных часовых поясах
Чтобы поместилось 4 города и шрифт был хорошо читаемым, я решил сделать концепцию, где в центре отображаются минуты, а по краям — сокращенное название города и час.
Но был нюанс, о котором я узнал чуть позже — существуют города, у которых разница не только по часам, но и по минутам. Например, Непал, у которого GMT+5:45, или Иран с GMT+3:30. И я решил проработать этот и другие кейсы в дизайне, который вы можете видеть в прикрепленных изображениях.
![](https://habrastorage.org/getpro/habr/upload_files/a1a/2cf/060/a1a2cf0609859b3279d1f21f355b6f7a.png)
![](https://habrastorage.org/getpro/habr/upload_files/589/685/2a1/5896852a1cffa1d0324b3f9ddb206b1d.png)
![](https://habrastorage.org/getpro/habr/upload_files/180/104/e4f/180104e4f06fe13e447a3aecbc8641d4.png)
10. Отображение погоды с помощью камня
Я решил сделать виджет с отображением погоды на Марсе с перспективы камня. При создании решил добавить бабл с текстом, который будет отображать настроение камня. Кстати, в итоге мне это напомнило сцену из «Все, везде и сразу»
![](https://habrastorage.org/getpro/habr/upload_files/055/4bf/0fd/0554bf0fd442c9b30e71e9e5c6a95dce.png)
11. Отображение шагов
В этом виджете решил сделать дизайн в стилистике Nothing OS
![](https://habrastorage.org/getpro/habr/upload_files/e5e/f65/08a/e5ef6508aaead82416e673c08e7ffe79.png)
12. Кухонный таймер
Сделал два варианта. В первом решил обрезать текст, когда он будет крутиться, а во втором решил поиграться с радиальным градиентом
![](https://habrastorage.org/getpro/habr/upload_files/8a6/d09/722/8a6d09722f21ad3e6cf82f38575f2f44.png)
![](https://habrastorage.org/getpro/habr/upload_files/c5e/1cd/852/c5e1cd85285259d2a992b37bf713fc87.png)
13. AI Ассистент
Вдохновлялся K-VRC из мультантологии «Любовь, смерть и роботы», если еще не смотрели, то очень советую
![](https://habrastorage.org/getpro/habr/upload_files/3a4/2a2/ee4/3a42a2ee4aa3680816a8a26515a8a8e3.png)
![](https://habrastorage.org/getpro/habr/upload_files/5ae/0ae/f63/5ae0aef6355721f31d388f35d0a8c1ed.png)
14. Screen Time
Тут мне хотелось сделать что-то необычное и решил отобразить диаграмму, которая вписывается в форму виджета
![](https://habrastorage.org/getpro/habr/upload_files/68f/5cf/88f/68f5cf88fa10f8b897b66f71413cac4c.png)
15. Arc Browser
Тут просто вынес наиболее популярные, на мой взгляд, действия
![](https://habrastorage.org/getpro/habr/upload_files/3e4/9ff/628/3e49ff628f224d861019f566c72d79ba.png)
16. Виджет для здоровья глаз
Тут я использовал темную тему, так как она полезнее для здоровья глаз, а цвет подобрал, который мне понравился
![](https://habrastorage.org/getpro/habr/upload_files/4a3/d3a/6df/4a3d3a6dfde0642fc2944389ed3df30e.png)
17. Виджет социального рейтинга
Аналог рейтинга, который работает в Китае. Условием было использовать только текст. Получился достаточно простым
![](https://habrastorage.org/getpro/habr/upload_files/de9/106/eef/de9106eeffc9b77bb5c0839cc095d0b5.png)
18. Найти девайс
Выполнил его в минималистичном стиле. Экран со списком девайсов слева вращается, как барабан, а на правом экране стрелка показывает, в какую сторону нужно идти
![](https://habrastorage.org/getpro/habr/upload_files/f2a/d9b/be1/f2ad9bbe168673260fa647a5b0ec7979.png)
19. Виджет для букридера
Сделал его в большом размере. Планируется, что виджет будет подстраиваться под основные цвета обложки. Также можно свайпать книги, если читаете несколько.
![](https://habrastorage.org/getpro/habr/upload_files/a31/05f/3ca/a3105f3cacdc9a6c5ae60b6b77431591.png)
20. Виджет привычек
В этом виджете я старался совместить стилистику дуолинго с минимализмом
![](https://habrastorage.org/getpro/habr/upload_files/f76/319/e22/f76319e22a3dc2240a78e844a76edd78.png)
21. Криптокошелек
Пользователь может выбрать несколько типов виджета. Также виджет меняет цвет в зависимости от последней статистики
![](https://habrastorage.org/getpro/habr/upload_files/5e1/4f4/e14/5e14f4e149aa7f9395e449d3db8d8e72.png)
![](https://habrastorage.org/getpro/habr/upload_files/9b0/f56/1af/9b0f561af93ff47e34831f01f92a3335.png)
22. Доставка
Хотелось сделать его игриво-динамичным, чтобы показать скорость. Поэтому все иконки под небольшим наклоном и предполагалось, что они анимируются. Также решил сделать несколько цветовых вариантов
![](https://habrastorage.org/getpro/habr/upload_files/19d/2ed/995/19d2ed9950e8e3b93b557fa08c0da82c.png)
![](https://habrastorage.org/getpro/habr/upload_files/122/b10/279/122b1027959a1b5add7cf128287079d2.png)
23. Виджет для аллергиков
Отображает количество пыльцы в воздухе. Вдохновлялся приложением Apple для отметок настроения. Сделал фигуры в форме цветков, также они меняются в зависимости от уровня пыльцы
![](https://habrastorage.org/getpro/habr/upload_files/f04/bbf/6ae/f04bbf6ae42f937bd20c9bebad473eb8.png)
![](https://habrastorage.org/getpro/habr/upload_files/21e/20b/62b/21e20b62bae5c32d460bcf08dae5d212.png)
24. Отображение подписки в виджете
Тут просто приятный дизайн и еще заблюрил фильмы на фоне, чтобы показать, что они недоступны
![](https://habrastorage.org/getpro/habr/upload_files/6a2/4f0/4ed/6a24f04ed62419649c24f20769b5fa71.png)
25. Дни до конца года
В дизайне этого виджета мне захотелось внести небольшое разнообразие относительно моих других виджетов и сделать его в детской стилистике. Внизу отображена небольшая динамика, как-будто отклеивается стикер
![](https://habrastorage.org/getpro/habr/upload_files/a14/378/713/a14378713c34b340a9b91b92652203be.png)
26. Астрология
Тут решил сделать дизайн на фоне ночного неба, что пересекается с астрологией
![](https://habrastorage.org/getpro/habr/upload_files/38b/ac3/118/38bac3118e9518441c0dcd9bb0cbe045.png)
27. Программа лояльности
Решил сделать этот виджет для книжного магазина. Штрихкод для того, чтобы быстро начислить/списать бонусы. Также иконки для покупок до подарка сделал в таком формате, чтобы было понятно, что это именно покупки до подарка, а не просто подарок или покупки. Также сделал дивайдер 3х блоков в виде книги
![](https://habrastorage.org/getpro/habr/upload_files/684/2ac/9ea/6842ac9eaae8626fad7dffb74b9ca8c9.png)
28. Виджет для проф камеры
Пытался сделать его максимально функциональным. Я сам далеко не фотограф, но немного поресерчил, какие функции были бы важны фотографам. Решил отобрать заряд батарей, место на картах памяти и время до золотого/синего часа
![](https://habrastorage.org/getpro/habr/upload_files/44d/1a1/634/44d1a1634faefd8e9a7f138205385e95.png)
29. Цитата дня
В этом виджете пытался сделать все достаточно просто и минималистично
![](https://habrastorage.org/getpro/habr/upload_files/d8a/744/e84/d8a744e84fbef6dcc7fa044fdb8baba7.png)
30. Виджет для Figma
Сделал виджет в стиле дизайна внешней коммуникации фигмы. В виджете можно сохранить шрифт или посмотреть следующий
![](https://habrastorage.org/getpro/habr/upload_files/e4e/73d/42f/e4e73d42f9eabf702bc5cd67b06285a5.png)
Что в итоге
Мне очень понравилось участвовать в челлендже, потому что:
-
В первую очередь это позволило мне подтянуть UI
-
Познакомиться с классными дизайнерами, которые также участвовали в челлендже
-
Начать наконец постить свои работы в соц. сети
-
Мне даже поступило несколько предложений пообщаться на счет работы
![](https://habrastorage.org/getpro/habr/upload_files/b89/b53/531/b89b53531375c85688d345175969b7f8.png)
Я думаю, что это прикольная идея — дизайнить что-то каждый день, так как это позволяет оставаться в тонусе, а продуктовому дизайнеру, как мне кажется, это нужно.
У меня уже появились идеи для следующих челленджей, которые я бы точно хотел провести в этом году:
-
Циферблаты для умных часов, всегда хотел попробовать себя в этом
-
Приложения для Apple Watch
-
Иконки мобильных приложений
-
3D, а то я уже немного подзабыл и год не заходил в C4D
-
AI, хочется уже наконец разобраться с генерацией изображений и попробовать ReCraft и Midjourney
-
Микроанимации
Что дальше
Также относительно недавно стартовал челлендж по мобилкам и я также успел сделать пару работ, которыми поделился в своем телеграм-канале. Кстати, пару месяцев назад завел свой телеграм-канал о котором давно думал, буду очень рад поддержке в виде подписки. В нем я пищу свои концепты и пишу заметки
![](https://habrastorage.org/getpro/habr/upload_files/68b/795/10a/68b79510a94ae81731b0030803d558ba.png)
ссылка на оригинал статьи https://habr.com/ru/articles/824872/
Добавить комментарий