Дизайн мобильных приложений в Figma. UX/UI дизайн приложений
Рет қаралды 32,813
В этом уроке сделаем классный шот в портфолио по 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
@wanderfull434 Жыл бұрын
Как я рад что ты вернулся к этому. Следующие несколько часов пройдут очень интересно и полезно 🔥
@study_kvo Жыл бұрын
❤️❤️
@user-xl5om9vb1j Жыл бұрын
Пол дня сижу- не могу оторваться. Браво! Только по делу, вообще без воды. Но, лично мне ну чуть-чуть по медленнее))) Я не тормоз, но как новичку тяжеловато вникать. А так с удовольствием смотрю, вникаю, записываю, плагины устанавливаю!! Спасибо Вам за Ваш труд!!
@study_kvo Жыл бұрын
🙌🙌
@Elizabeth-zr7dj Жыл бұрын
Огромное спасибо за урок! Было очень полезно. Хотелось бы больше таких видео🔥 Они очень помогают в развитии навыков
@study_kvo Жыл бұрын
🙌🙌
@vvtory6915 Жыл бұрын
Спасибо большое за такой полезный урок!❤
@leralymar 11 ай бұрын
Спасибо большое за видео! Отметила для себя много полезных фишек)
@study_kvo Жыл бұрын
🔹 Ссылки из видео: - Марафоны в ТГ: t.me/study_kvo - Марафоны в ВК: vk.com/study_kvo - Саня Кво в Инсте: instagram.com/sanya_kvo - Исходники из урока: design-figma.ru/md/youtube_files - Курс по UX/UI дизайну: sanya-kvo.ru/uxui
@vikii_ivanova Жыл бұрын
огонь! спасибо за разбор и доступ к материалам!
@study_kvo Жыл бұрын
Дерзайте ❤️
@timofeyas Жыл бұрын
Спасибо, это было не только полезно, но и залипательно. Зашла взять какой-то пример для вдохновения в варфреймах, в итоге прошла все этапы лёгкого и удобного дизайна. 😁
@study_kvo Жыл бұрын
Огонь 🔥🤌
@vladvladov3430 Жыл бұрын
Спасибо за разбор!🔥🔥🔥
@greytea1884 Жыл бұрын
Спасибо большое за качественный урок. У меня все получилось пошагово сделать. Желаю большого развития вашему каналу!
@study_kvo Жыл бұрын
Спасибо 🙌🙌
@FORSX Жыл бұрын
Отличный темп, без воды и это супер, молоток. Карточку я бы сделал с автолаяутом чтобы высота была автоматическая и еще один автолауют чтобы между карточками был одинаковый отступ на автомате
@makovaya_bulochka Жыл бұрын
Спасибо за урок)
@Vffhb2537 9 ай бұрын
Спасибо за урок! Работка в Фирме, все понятно) Но смотрела на скорости 0,75 )
@vilen_polina Жыл бұрын
Спасибо большое! Много нового для себя узнала)
@study_kvo Жыл бұрын
Супер 🙌🙌
@user-eo3mx2ko5c 2 ай бұрын
Спасибо большое за урок. Очень интересно, понятно и без воды🔥🔥🔥
@study_kvo 2 ай бұрын
🔥🔥
@deportivoatleto9698 Жыл бұрын
спасибо автору канала,мега позитивный и поясняет граматно:)
@study_kvo Жыл бұрын
❤️❤️
@user-dy5zp2ud6r Жыл бұрын
Спасибо! мне как новичку очень понравилось это лучшее что я находила!!!
@study_kvo Жыл бұрын
🙌🙌
@hollaOlga Жыл бұрын
спасибо за урок и за сиходные материалы!
@study_kvo Жыл бұрын
🙌🙌
@user-hb2tu9vp7l 6 ай бұрын
спасибо за урок)
@tretyakova_design Жыл бұрын
Спасибо Саня!!! От души😁 Потренила, очень помогает отрабатывать скорость, чёткость и мышление. То есть, я прежде чем делать уже прокомментировала себе где и какие техники используются и потом просто проверяла права ли я) ну и респект за такую идею в целом!!!
@study_kvo Жыл бұрын
Катя ❤️❤️❤️
@alisazhuravleva544 Жыл бұрын
Спасибо за урок🔥 С радостью замечаю, что в процессе всё реже приходится ставить видео на паузу 😃
@study_kvo Жыл бұрын
Это же супер!
@user-ro1rn3yn7r Жыл бұрын
то чувство, когда ставишь на паузу через каждые 40 сек :DDD
@study_kvo Жыл бұрын
😂😂
@rina_kay12 8 ай бұрын
Потрясающий урок! Раньше я смотрела видео по Фигме из серии: что за кнопки, где и что находится, для чего нужно, но без практики в одно ухо влетело, в другое вылетело. Поняла, что это не дело, нужно просто открывать урок «Создаем что-либо в Фигме» и повторять. Скажу сразу: было нелегко. Мне понадобилось не 25 минут, чуть поболее, но все получилось) Иногда приходилось отматывать, пересматривать. Сложность еще была в том, что у меня мак и шорткаты отличаются от винды, часто тупила, что и для чего, что тоже отнимало время, но все получилось) P. S. до этого урока в Фигме ничего не делала ВООБЩЕ. P. S.2. Запишите, пожалуйста, еще подобные уроки)
@study_kvo 8 ай бұрын
🫶🫶
@user-bu2rr1ik2s Жыл бұрын
блин, спасибо, ты - лучший
@study_kvo Жыл бұрын
Спасибо 🙏
@ekatetina_srm Жыл бұрын
Спасибо!
@user-uz6sr7oe6d Жыл бұрын
Спасибо за этот крутой урок
@study_kvo Жыл бұрын
Спасибо за этот фидбэк ❤️❤️
@user-pz8ps7oe2e 8 ай бұрын
это безумно полезно СПАСИБО!!!!!!!!!!!!!
@study_kvo 8 ай бұрын
🫶 рад
@user-rx5iz9px8p Жыл бұрын
Привет! Очень рада, что однажды наткнулась на твой канал. Объясняешь доступно и по делу) Вопрос такой: можно ли эти работы выкидывать в инсту?
@study_kvo Жыл бұрын
Да, без проблем 🙌🙌
@vvtory6915 Жыл бұрын
Подскажите, какого размера у вас сетка? Какие значения установить?
@study_kvo Жыл бұрын
В урок один столбик с боковыми отступами по 24. В приложениях сетка - вторичный инструмент, в отличие от веба. Поэтому можно делать практически любую.
@user-vj7ml4pz4l Жыл бұрын
Здравствуйте, подскажите, а откуда вы эти картинки брали?
@study_kvo Жыл бұрын
Если не ошибаюсь, с Unsplash и Pexels
@oonice00 Жыл бұрын
Скажите пожалуйста какой у вас размер фрейма для формата телефона?
@study_kvo 11 ай бұрын
В этом уроке 375 на 812 для iPhone X
@AchtungBaby-io7zl Жыл бұрын
а зачем cntrl shift 4 если есть shift+G...проще ж нажимать) cntrlC / cntrl shift R - копирование и замена картинки в autoLa
@lidiiiiui Жыл бұрын
можно использовать как референс для проекта? Не сама идея, а именно дизайн
@study_kvo Жыл бұрын
Конечно
@lidiiiiui Жыл бұрын
@@study_kvo спасибо!
@BigPixeL1305 4 ай бұрын
Подскажите пожалуйста: Около года назад я попробовал, и после завершения захотел выйти из вашего проекта в Figma. Вопрос в том что я нажал справа кнопку "Share" и затем из списка нашел себя и нажал "Leave". По сути я покинул, но в самой Figma в разделе "Share Files" не пропадает файл: "Study Kvo | Дизайн приложения Takee". Как можно убрать его оттуда?
@study_kvo 4 ай бұрын
Нажмите в списке проектов правой кнопкой по нужному и удалите проект в появившемся контекстном меню.
@BigPixeL1305 4 ай бұрын
@@study_kvo В разделе "Drafts" то можно так удалить свои проекты, а этот висит в разделе "Share Files" и там нет такого пункта. Я уже все проверил. Один выход это нажать "Leave" внутри проекта как я и писал, но я уже как бы вышел, но проект не пропал. Много раз так делал с другими проектами и все удачно выходит, но именно ваш не пропадает)))
@romamir Жыл бұрын
А если в фигме анимация не работает, значит это глюк?
@user-qd2qs5xx8s Жыл бұрын
когда следующий марафон?
@study_kvo Жыл бұрын
Ближайший будет во второй половине мая, на канале сделаем анонс заранее: t.me/study_kvo
@Fillrate 2 ай бұрын
Вот за такие "ступеньки", которые добавляют динамику, разработчики и ненавидят дизайнеров:D
@navi4046 Ай бұрын
Так это ж и не сложно сделать) Всё что делает их такой ступенькой это малое количество контента в самой первой карточке
@vveerrona Жыл бұрын
Все круто ,но было бы интересно как этот дизайн вставить в макет « телефона» 😢
@study_kvo Жыл бұрын
Используйте для этого мокапы, их полно в интернете. Можно в том же Figma community найти много разных. Есть одноименные плагины Mockups. А видеомокап вначале урока сделан через программу Roto app
@vveerrona Жыл бұрын
@@study_kvo спасибо большое 😊
@rtknnv Жыл бұрын
Здравствуйте. Подскажите, а разве я могу эту работу использовать в качестве портфолио. Ведь это не мною придуманный проект, а просто скопированный
@study_kvo Жыл бұрын
Действуйте как вам будет комфортно. Я не против любого варианта. Можете что-то изменить/дополнить/убрать или сделать дополнительные экраны. Более объемная работа в портфолио будет весомее)
@rtknnv Жыл бұрын
@@study_kvo спасибо за ответ. И спасибо за полезный урок) очень нравится вас смотреть. Всё кратко, быстро, по делу, без лишней воды. Подкасты у вас тоже огонь. Послушала за вечер на одном дыхании. Теперь с нетерпением жду новых))
@study_kvo Жыл бұрын
Спасибо! Залетайте на ближайший марафон, там сделаем новую работу. Скоро будет анонс на канале: t.me/study_kvo
@user-iq1sy3ec5c 5 ай бұрын
Здравствуйте, почему-то не работает ссылка на исходники(
@study_kvo 5 ай бұрын
Попробуйте сейчас, сайт немного вздремнул) design-figma.ru/md/youtube_files
@user-iq1sy3ec5c 5 ай бұрын
@@study_kvo Теперь все работает, спасибо)
@Sultan_mslm Жыл бұрын
Блин матаю видео назад уже 1000000 раз
@study_kvo Жыл бұрын
Надо на 0,25 🌝
@joker__joker_why_so_seriou2520 Жыл бұрын
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
@study_kvo Жыл бұрын
🔥🔥🔥🔥🔥🔥🔥🔥
@youth991 Жыл бұрын
Подскажи пожалуйста, как называется шрифт этого логотипа? 😥
@study_kvo Жыл бұрын
Тот, которым написано takee? Это настроенный Roboto flex. У него можно регулировать и жирность и ширину букв.
@youth991 Жыл бұрын
@@study_kvo ааа, понял :(
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 40 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 13 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 2,9 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 1,6 М.
Катя Макеева про веб-дизайн | Академия Practicult
Рет қаралды 50 М.
Polina Strogina
Рет қаралды 16 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 3 М.