8162
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481
Пятничная база 🚬
Делайте прототипы. Они отлично подойдут как для презентации сценария так и для понимания какие ещё состояния в интерфейсы остались не проработаны. Для этого вам не нужно делать сильно детализированный прот, просто быстро скрепили экраны и кнопки, и щупаете
Я именно так и делаю, когда проверяю дизайн. В статике глядя на макеты бывает не всё замечаешь.
Привет! Новая тема на #wed_challenge — сервис для поиска событий
В моей идее, ты вписываешь свой интерес и приложение находит события в твоём городе.
Присылайте свои варианты до следующей среды в комментарии к этому посту! После на стриме сделаю разбор 😎
Привет! Скучали? :) #wed_challenge на связи 🤠
Тема этой среды — трекер привычек!
Присылайте свои дизайны в комментарии к посту!
Для тех кто не в теме, расскажу. В этом канале есть давняя традиция по рисованию концептов на заданую тему каждую среду. Вы рисуете дизайны, кидаете в комменты, а я делаю видео разбор всех присланных работ спустя время. Хороший повод потренировать UI и просто порисовать что-то отвлечённое от работы :)
Процесс генерации изображений по текстовому запросу тоже красиво реализовали.
Такой портал в котором генерируется итоговая картинка 👍
Статья. Про дизайн тоаст сообщения
К сожалению статья затрагивает только рекомендации по внешнему виду тоаста, и не ничего не говорит про его поведение и разницу в расположении.
Основные рекомендации по дизайну тоаста из статьи.
Цвет и контраст - это одно из главных правил, не рекомендуется делать его в цвет фона, лучше делать контрастным и различимым. Так же важна форма значка и его изображение, отступы и его доступность для людей с ограниченными возможностями.
Источник
Советы по эффективной работе в Figma
Команда Figma регулярно добаляет разные полезные мелочи для улучшения процесса нашей работы и не все успевают следить за всем этим.
Дмитрий Бунин собрал набор лучших практик из своего опыта.
Что внутри
➡️ Быстрые клавиши для навигации между слоями
➡️ Теги на стилях и компонентах для поиска
➡️ Управление использованием памяти в файлах
➡️ Вложенные компоненты и структура слоёв
P.S. Zander Whitehurst делает короткие анимации с похожими советами
🔜 Перейти
Вопрос про организацию макетов в Figma
Привет, друзья! 👋
В работе возник вопрос по организации дизайнов в файле Figma для удобной работы всех участников команды. Буду рад послушать ваш опыт или почитать ссылки, как это сделать без лишней бюрократии и тонны файлов. Тк хочется сохранить легкость и удобство работы.
@ Как есть сейчас
Сразу отмечу, как выглядит наш рабочий файл сейчас. Это один файл. В нём есть отдельный Пейдж с дизайн системой. И отдельный Пейдж на один ключевой раздел, все экраны профиля, следующий Пейдж с экранами чата и так далее.
Дизайн систему я считаю нужно точно уносить в отдельный файл, так будет удобнее трекать изменения и удобно раскатывать их после.
@ Про секции
Так же хотел бы понять, как вы применяете секции Figma для организации макетов? Сейчас я использую их для каждой отдельной задачи, в которой храню весь сценарий фичи и все связанные с ней экраны.
Но в таком подходе появляется уйма дубликатов одних и тех же экранов. Например экран профиля может быть задействован в нескольких других фичах. А ещё нужно помнить, что завтра профиль мы можем обновить и тогда придется обновлять его везде.
Ну и в подходе с секциями я не понимаю как можно применять пейджи, если конечно нужно.
Вообщем хочу прежде чем начать ворочать рабочий файл, провести небольшой рисёрч на эту тему. Поделитесь пожалуйста в комментарии своими советами и мнениями 🤔
Впечатления от Vision Pro
Протестировал и пощупал AR шлем Vision Pro от Apple, хочу поделиться небольшими личными впечатлениями :)
• Качество самого продукта очень приятное, хоть и очень хрупкое по ощущениям. Именно сама маска держится на магнитном креплении, которое можно легко разомкнуть, если неправильно снимать шлем с головы. Тем самым можно его уронить.
• Вес. По ощущениям шлем чуть сбалансирование чем Oculus Quest 2, но может я давно не держал его в руках. Но с лица показалось, как будто немного свисал вниз.
• Разрешение картинки и взаимодействие с интерфейсом – кайф! В целом, тут ничего удивительного, Apple умеет делать интерфейсы хорошо и приятно.
• Управление глазами (как курсор для выбора элементов) очень хорошо считывается и происходит очень незаметно, фокусное состояние на элементах я почти не замечал. Но немного сложно нажимать элементы, которые располагаются по краям без поворота головы и когда они очень мелкие.
• Управлять щипками пальцев удобнее, чем тыкать пальцем. Руки можно держать свободно, но в рамках видимости шлема. Я сидел за столом во время теста, поэтому руки свободно лежали на столе и хорошо отрабатывали нажатия.
• Spatial Photo, огонь! Объёмные фотографии очень потрясно выглядят. У снимков появляется глубина. Это кажется меня удивило сильнее, чем 3Д элементы.
• Работать в нём долго я бы думаю не смог, день два поигрался и забил бы. Аналогично можно делать и с Oculus Quest 2 так как там андроид, да не тот опыт, но всё равно. Сидеть за мониторами и ноутом удобнее долгое время мне кажется.
• Общее впечатление с учетом того, что у меня есть Oculus Quest 2 и то, что я знаю о VP из обзоров. Дорого и бесполезно на текущем этапе. Для меня шлем это игровой девайс и поэтому я лучше выберу OQ2 и пройду ещё раз с удовольствием Super Hot. Ну и на текущем этапе, это сильный оверпрайс.
Гляжу на эти виджеты с Dynamic Island и думаю, как было бы классно, если бы Apple выпустила фитнес браслет с более узким и гибким экраном
Читать полностью…
Привет! Новая тема на #wed_challenge — таймер
Присылайте свои варианты до следующей среды в комментарии к этому посту! После на стриме сделаю разбор
Skillbox запускает бесплатный мини-курс по UI/UX дизайну! Если вы веб-дизайнер и хотите расширить свои знания в сфере дизайна интерфейсов, то этот курс для вас!
По ссылочке можно зарегистрироваться на курс и получить в подарок гайд «Figma: воркбук для начинающих»: https://epic.st/FDk8oe?erid=2VtzqvfSVQT
Что будет на этом курсе?
— Вы сделаете первый проект для портфолио, интерфейс сайта и приложения
— Узнаете почему UI/UX дизайнеры так востребованы в IT компаниях и поймёте почему им так много платят
— Обучитесь работе с Figma
— Получите большой список полезных ссылок, которые помогут быть в курсе трендов индустрии
— Узнаете, какие навыки нужно особенно прокачивать в UI/UX, чтобы быстрее расти в зарплате
— В прямом эфире сможете задать вопросы опытному дизайнеру.
Помимо этого, вас ждут бонусы: скидка 10 000 рублей на любой курс Skillbox, гайды и книги для старта в профессии, персональная карьерная консультация и год бесплатного изучения английского языка.
Запишитесь, учитесь и прокачивайтесь!
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
Вы в одном из опросов голосовали за то, чтобы давать больше времени на задачу. Увеличиваю срок до 1 мая или оставляем, все как есть?
Пишите в комменты, там еще и опрос сделаю на всякий
Ник Бабич поделился в своём твиттере шпаргалкой по онбордингам. По его мнению каждый тип онбординга должен использоваться в зависимости от ситуации.
Я добавил на картинку примечания с переводом.
Это было отлично! Спасибо, всем кто пришёл. Как вам такой формат с разбором в прямом эфире?
📹 Запись стрима с дизайн разбором на канале
Figma Config 2024
Прошла Figma Config 2024, на которой представили ИИ функции, новый продукт Figma Slides, улучшения Dev Mode и большой редизайн Figma. Постараюсь коротко пробежаться по всем обновлениям.
Figma Slides
Главным моментом всей презентации стал новый продукт Figma Slides. Это инструмент для создания красивых презентаций. Из интересных особенностей: возможность вставки интерактивных прототипов, проведения опросов и голосований. Видно, что продукт нацелен на дизайнеров.
Инструмент будет бесплатным в период беты. Релиз обещают в 2025 году, и продукт будет доступен на всех тарифах.
Подробнее о возможностях продукта по ссылке (у меня ссылка доступна только через VPN)
ИИ функции
Что будет уметь ИИ в Figma:
- Генерация, смена тона и перевод текста;
- Создание изображений и удаление фона;
- Автоматическое переименование слоев;
- Создание макетов по вашему промпту;
- Создание интерактивных прототипов и др.
ИИ функции будут доступны бесплатно в период беты. После этого их функции могут стать платными.
Подробнее о всех возможностях ИИ в этом файле.
Dev Mode
Функция Code Connect вышла из беты. Появилась поддержка React, React Native, SwiftUI, Compose. Можно помечать макеты, которые еще редактируются и которые готовы к разработке. Разработчики смогут удобно просматривать макеты, готовые к разработке.
Большой редизайн Figma
Кажется, интерфейс инструмента не менялся с момента его релиза. В будущем дизайн сильно освежат и, по моим ощущениям, он станет больше похож на Famer. В целом интерфейс станет легче и более гибким.
Подробный разбор редизайна по ссылке
Разное
Кроме этого, были ряд мелких обновлений. Появился умный режим включения auto layout (AL). Теперь можно не размечать весь компонент вручную, а просто нажать кнопку, и все настроится автоматически.
Режим просмотра прототипов сможет поддерживать ресайз. При правильной настройке AL все будет гибко меняться.
Также в Figma встроят основные UI Kit от Apple и Google.
Общее впечатление от обновлений -🔥
Жду релиза. Особенно хочется пощупать редизайн.
А что вам понравилось больше всего и чего вы ждете?
Самое неоднозначное в iOS 18, это тинт иконки приложений.
Посмотрим как будет на релизе, когда иконки корректно адаптируют, но пока это выглядит немного хуже чем на Android с их Themed Icon.
Хотя я до сих пор считаю делать иконки в один стиль не лучшая затея
Со вчерашней конфы Apple WWDC 2024 понравилось лишь то, как они реализовали рукописную математику в заметках.
Классно, что они анализируют шрифт от руки ✍️ и имитируют его в дописывании ответов
Ps: на ИИ уже как-то пофиг совсем.
Не раз сталкиваюсь с вопросом от Android разработчиков, что им хочется получать векторные анимации в нативном формате AVD (Animate Vector Drawable)
Существует ли толковый инструмент для их создания? Shapeshifter это какой-то мазохизм, а экспорт из Bodymovin не работает корректно, или я что-то делаю не так.
У кого нибудь был подобный опыт?
Новый Apple Pencil Pro создаёт цифровую тень в интерфейсе, которая похожа на инструмент, который сейчас использует художник.
Непонятно есть ли поддержка в сторонних приложениях — фото сделаны в «Заметках».
@zavtracast
Привет! Я решил не проводить стрим с дизайн разбором на этих выходных, так как посмотрел все присланные работы и понял, что они настолько хороши, что мне нечего прокомментировать :) очень рад, что на челлендж приходит так много сильных работ! Спасибо, что участвуете!
Выделю то, что мне особенно понравилось:
@Greatmatis — собрал большой прототип по редактору изображений в несколько экранов и прислал его в формате скринкаста. Я особенно оценил, как в конце видео он отправляет обработанное изображение в прототипе в мой канал и это изображение —было буквально прислано в канал 🔥
@samiyvezuchiy прислал приятный и простой таймер для Apple Watch. Нравится!
@sashareushkin нарисовал таймер в духе техники Braun, выглядит кайфово!
@Yan_Kenikh тут совсем огонь 🔥 прислал несколько мощных работ на тему таймера. Особенно понравился таймер в стиле Mario и вариант, где шрифт уменьшается по высоте когда таймер подходит к концу.
Ещё раз Спасибо, что активно участвуете и присылаете интересные работы, с каждым разом всё лучше и интереснее 🔥
👋 Канал, новый дайджест с новостями продуктов уже на канале!
🤨 В этом выпуске: навигация Кировска от Студии Лебедева, фанатский дизайн Nothing Phone 2a и запрет злых ИИ проектов на GitHub.
👍 Смореть полный выпуск без регистрации, но лучше с подпиской на YT канал
🍆
PS: Дайджест уходит на небольшой отпуск, так как скоро я выхожу в новый рабочий проект и мне нужно время на адаптацию, поэтому как вольюсь в комфортную струю, вернусь к видео.
Стрим с новым дизайн разбором будет в эти выходные! Но после так же возможно будет поставлен на небольшую паузу.
Не теряйте! 💙
Ребята из онлайн школы Uprock запустили бесплатный, практический курс по UI и UX
На бесплатном курсе будет 4 дня интенсивных заданий для вашей прокачки.
Все ваши решения будут подробно разобраны опытными менторами по мере обучения!
Помимо этого, будут полезные лекции и вебинары от арт директора. Конкурсы с денежными призами и конечно же сильное комьюнити и поддержка на протяжении всего обучения!
Записаться на бесплатный курс по дизайну, здесь
erid: 2Vtzqw3Rpwr
Доброе утро! Новый дайджест новостей уже на канале!
🧑💻В этом выпуске: новые наушники от Nothing, ИИ фичи в Adobe Premiere Pro, альтернативный стор приложений для iPhone и многое другое!
📹Смотреть полный выпуск
Увидел сейчас видео с управлением Humane AI Pin.
Не тестировал лично, сложно говорить об опыте использования, но на видео такая проекция и управление интерфейсом через неё выглядит очень неудобным.
- Весь интерфейс ездит по ладони в зависимости от движения,
- Большой риск ошибки. Выбрать не тот пункт, так как выбор пунктов зависит от наклона ладони.
- Активация выбранного пункта пальцами имеет риск ошибки выбрать не тот пункт. См. п.2.
- Ну и чёткость пунктов хромает, но тут уже сложно судить по видео. Есть ощущение, что чем дальше от проектора, тем более размытая будет картинка.
Привет! Новая тема на #wed_challenge — редактор изображения
Присылайте свои варианты до следующей среды в комментарии к этому посту!
Новый дайджест уже на канале. 📹Смотреть
В этом выпуске: Алиса ПРО, первые обзоры о Humane AI Pin и новый инструмент для дизайна и прототипирования!
Не забудь поставить лайк видосу ;)
Дорогие подписчики, хочу попробовать завтра на стриме провести свежий «Дизайн разбор». Разобрать ваши присланные работы в прямом эфире.
Поэтому, подключайтесь в субботу в 11:00 МСК — https://youtu.be/QeY0H7qzjm4