Дизайн мобильных приложений в Figma. UX/UI дизайн приложений
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- В этом уроке сделаем классный шот в портфолио по UX/UI дизайну мобильных приложений для Dribbble или Behance. Это приложение мы дизайнили на одном из марафоном по дизайну приложений. Чтобы не пропустить следующие - залетай по ссылкам внизу.
🔹 Ссылки из видео:
- Марафоны в ТГ: t.me/study_kvo
- Марафоны в ВК: study_kvo
- Саня Кво в Инсте: / sanya_kvo
- Исходники из урока: design-figma.ru/md/youtube_files
- Курс по UX/UI дизайну: sanya-kvo.ru/uxui
🔹 Навигация по видео:
00:00 - Начало урока
00:25 - Как скопировать исходники
02:20 - Дизайн фильтров категорий через Auto Layout
06:16 - Дизайн карточки
10:28 - Наполнение остальных карточек
12:27 - Дизайн навигации Tab Bar
13:50 - Применение эффекта Background Blur
15:16 - Дизайн второго экрана приложения
16:40 - Дизайн блока с видео через Auto Layout
18:36 - Дизайн тегов через Auto Layout
22:40 - Кнопка
22:55 - Лайфхак с изменением непрозрачности слоя
22:37 - Финальный финал
Кстати, не смотря на то, что мы дизайним два экрана, даже на них можно обкатать работу со стилями в Figme, Auto Layout и компоненты. Чтобы не удлинять урок, работу с компонентами разберём в отдельных видео:
- Компоненты часть 1: • Компоненты в Фигме. Вл...
- Компоненты часть 2: • Компоненты в Фигме. Ча...
#figma #ux #ui
![คุณอาเรียโต๊ะข้างๆ พูดรัสเซียหวานใส่ซะหัวใจจะวาย ตอนที่ 4 [ซับไทย] 【Ani-One Thailand】](http://i.ytimg.com/vi/_vK_cden2f8/mqdefault.jpg)
Как я рад что ты вернулся к этому. Следующие несколько часов пройдут очень интересно и полезно 🔥
❤️❤️
Пол дня сижу- не могу оторваться. Браво! Только по делу, вообще без воды. Но, лично мне ну чуть-чуть по медленнее))) Я не тормоз, но как новичку тяжеловато вникать. А так с удовольствием смотрю, вникаю, записываю, плагины устанавливаю!! Спасибо Вам за Ваш труд!!
🙌🙌
Огромное спасибо за урок!
Было очень полезно. Хотелось бы больше таких видео🔥
Они очень помогают в развитии навыков
🙌🙌
Спасибо большое за такой полезный урок!❤
Спасибо, это было не только полезно, но и залипательно. Зашла взять какой-то пример для вдохновения в варфреймах, в итоге прошла все этапы лёгкого и удобного дизайна. 😁
Огонь 🔥🤌
огонь! спасибо за разбор и доступ к материалам!
Дерзайте ❤️
Спасибо большое за видео! Отметила для себя много полезных фишек)
Спасибо большое за качественный урок. У меня все получилось пошагово сделать. Желаю большого развития вашему каналу!
Спасибо 🙌🙌
Спасибо за разбор!🔥🔥🔥
Отличный темп, без воды и это супер, молоток. Карточку я бы сделал с автолаяутом чтобы высота была автоматическая и еще один автолауют чтобы между карточками был одинаковый отступ на автомате
Спасибо за урок! Работка в Фирме, все понятно) Но смотрела на скорости 0,75 )
🔹 Ссылки из видео:
- Марафоны в ТГ: t.me/study_kvo
- Марафоны в ВК: vk.com/study_kvo
- Саня Кво в Инсте: instagram.com/sanya_kvo
- Исходники из урока: design-figma.ru/md/youtube_files
- Курс по UX/UI дизайну: sanya-kvo.ru/uxui
Спасибо Саня!!! От души😁 Потренила, очень помогает отрабатывать скорость, чёткость и мышление. То есть, я прежде чем делать уже прокомментировала себе где и какие техники используются и потом просто проверяла права ли я) ну и респект за такую идею в целом!!!
Катя ❤️❤️❤️
Спасибо за урок🔥 С радостью замечаю, что в процессе всё реже приходится ставить видео на паузу 😃
Это же супер!
то чувство, когда ставишь на паузу через каждые 40 сек :DDD
😂😂
Спасибо за урок)
Спасибо большое за урок. Очень интересно, понятно и без воды🔥🔥🔥
🔥🔥
Спасибо большое! Много нового для себя узнала)
Супер 🙌🙌
Спасибо! мне как новичку очень понравилось это лучшее что я находила!!!
🙌🙌
Потрясающий урок! Раньше я смотрела видео по Фигме из серии: что за кнопки, где и что находится, для чего нужно, но без практики в одно ухо влетело, в другое вылетело. Поняла, что это не дело, нужно просто открывать урок «Создаем что-либо в Фигме» и повторять. Скажу сразу: было нелегко. Мне понадобилось не 25 минут, чуть поболее, но все получилось) Иногда приходилось отматывать, пересматривать. Сложность еще была в том, что у меня мак и шорткаты отличаются от винды, часто тупила, что и для чего, что тоже отнимало время, но все получилось)
P. S. до этого урока в Фигме ничего не делала ВООБЩЕ.
P. S.2. Запишите, пожалуйста, еще подобные уроки)
🫶🫶
спасибо автору канала,мега позитивный и поясняет граматно:)
❤️❤️
спасибо за урок)
спасибо за урок и за сиходные материалы!
🙌🙌
блин, спасибо, ты - лучший
Спасибо 🙏
Спасибо!
Спасибо за этот крутой урок
Спасибо за этот фидбэк ❤️❤️
это безумно полезно СПАСИБО!!!!!!!!!!!!!
🫶 рад
Привет! Очень рада, что однажды наткнулась на твой канал. Объясняешь доступно и по делу) Вопрос такой: можно ли эти работы выкидывать в инсту?
Да, без проблем 🙌🙌
Подскажите, какого размера у вас сетка? Какие значения установить?
В урок один столбик с боковыми отступами по 24. В приложениях сетка - вторичный инструмент, в отличие от веба. Поэтому можно делать практически любую.
а зачем cntrl shift 4 если есть shift+G...проще ж нажимать)
cntrlC / cntrl shift R - копирование и замена картинки в autoLa
Здравствуйте, подскажите, а откуда вы эти картинки брали?
Если не ошибаюсь, с Unsplash и Pexels
А если в фигме анимация не работает, значит это глюк?
Подскажите пожалуйста: Около года назад я попробовал, и после завершения захотел выйти из вашего проекта в Figma. Вопрос в том что я нажал справа кнопку "Share" и затем из списка нашел себя и нажал "Leave". По сути я покинул, но в самой Figma в разделе "Share Files" не пропадает файл: "Study Kvo | Дизайн приложения Takee". Как можно убрать его оттуда?
Нажмите в списке проектов правой кнопкой по нужному и удалите проект в появившемся контекстном меню.
@@study_kvo В разделе "Drafts" то можно так удалить свои проекты, а этот висит в разделе "Share Files" и там нет такого пункта. Я уже все проверил. Один выход это нажать "Leave" внутри проекта как я и писал, но я уже как бы вышел, но проект не пропал. Много раз так делал с другими проектами и все удачно выходит, но именно ваш не пропадает)))
Скажите пожалуйста какой у вас размер фрейма для формата телефона?
В этом уроке 375 на 812 для iPhone X
можно использовать как референс для проекта? Не сама идея, а именно дизайн
Конечно
@@study_kvo спасибо!
Здравствуйте, почему-то не работает ссылка на исходники(
Попробуйте сейчас, сайт немного вздремнул) design-figma.ru/md/youtube_files
@@study_kvo
Теперь все работает, спасибо)
Здравствуйте. Подскажите, а разве я могу эту работу использовать в качестве портфолио. Ведь это не мною придуманный проект, а просто скопированный
Действуйте как вам будет комфортно. Я не против любого варианта. Можете что-то изменить/дополнить/убрать или сделать дополнительные экраны. Более объемная работа в портфолио будет весомее)
@@study_kvo спасибо за ответ. И спасибо за полезный урок) очень нравится вас смотреть. Всё кратко, быстро, по делу, без лишней воды. Подкасты у вас тоже огонь. Послушала за вечер на одном дыхании. Теперь с нетерпением жду новых))
Спасибо! Залетайте на ближайший марафон, там сделаем новую работу. Скоро будет анонс на канале: t.me/study_kvo
Вот за такие "ступеньки", которые добавляют динамику, разработчики и ненавидят дизайнеров:D
Так это ж и не сложно сделать)
Всё что делает их такой ступенькой это малое количество контента в самой первой карточке
Все круто ,но было бы интересно как этот дизайн вставить в макет « телефона» 😢
Используйте для этого мокапы, их полно в интернете. Можно в том же Figma community найти много разных. Есть одноименные плагины Mockups. А видеомокап вначале урока сделан через программу Roto app
@@study_kvo спасибо большое 😊
когда следующий марафон?
Ближайший будет во второй половине мая, на канале сделаем анонс заранее: t.me/study_kvo
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
🔥🔥🔥🔥🔥🔥🔥🔥
Блин матаю видео назад уже 1000000 раз
Надо на 0,25 🌝
Подскажи пожалуйста, как называется шрифт этого логотипа? 😥
Тот, которым написано takee? Это настроенный Roboto flex. У него можно регулировать и жирность и ширину букв.
@@study_kvo ааа, понял :(