Тёмный

Создание дизайна мобильного приложения с Figma 

ITVDN
Подписаться 219 тыс.
Просмотров 153 тыс.
50% 1

🔥Промокод на скидку 15% на все курсы ITVDN- H94BCAB
UX/UI дизайн для начинающих - itvdn.com/ru/video/uxui-desig...
UX/UI базовый курс - itvdn.com/ru/video/uiux-desig...
Материалы вебинара - itvdn.com/ru/webinars/descrip...
Мобильные устройства - телефоны, планшеты, другие гаджеты - стали неотъемлемой частью нашей жизни. Разрешение их экранов могут варьироваться от 200 до 3000+ пикселей, что добавляет пикантности процессу разработки дизайна. Однако, графический редактор Figma является прекрасным средством проектирования актуальных и отзывчивых интерфейсов мобильных приложений. Он обладает всеми необходимыми удобствами и полезными инструментами для веб-дизайнера.
Автор вебинара Алла Штогрина покажет на практике, как использовать весь потенциал Figma, реализуя дизайн с нуля до уровня полноценного макета, готового к передаче разработчикам. Вас ожидает создание дизайна мобильного приложения с Figma.
Если вы еще не знакомы с программой Figma, рекомендуем посмотреть запись вебинара «Веб-дизайн с Figma. Легкий старт». В нём Алла Штогрина прошлась по основам работы с программой Figma.
План вебинара:
Особенности мобильного дизайна.
Отрисовка прототипов, подготовка набросков того, как будут выглядеть экраны в Figma.
Проектирование User Flow в Figma.
Отрисовка эскизов для wireframes в Figma.
Подбор подходящей цветовой гаммы и графических элементов в Figma.
Прототипирование в Figma.
Анимация и микровзаимодействие в Figma.
Тестирование на этапе дизайна в Figma.
Передача разработчикам.
00:00 Вступление. Знакомство с автором
1:57 План вебинара
2:46 Особенности мобильного дизайна
7:09 Проектирование User Flow
9:35 Отрисовка эскизов
10:24 Создание wireframes и прототипирование
13:10 Figma: проектирование экранов мобильного приложения
26:25 Подбор цветовой гаммы, графических элементов. Отрисовка 1-го экрана
53:29 Отрисовка 2-го экрана
1:28:55 Отрисовка 3-го экрана
1:46:36 Тестирование на этапе дизайна
1:47:57 Передача файлов разработчику с использованием Zeplin. Добавление стилей
1:54:28 Подведение итогов
1:58:32 Вопросы и ответы
Если вас интересует веб дизайн с чего начать, веб дизайн уроки, уроки веб дизайна, фигма уроки, обучение Figma, веб-дизайн Figma, фигма, на ITVDN вы найдете подборку качественных материалов, которые позволят вам овладеть данным инструментом веб-дизайна.

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 111   
@ITVDN
@ITVDN 3 года назад
🔥Промокод на скидку 15% на все курсы ITVDN- H94BCAB UX/UI дизайн для начинающих - itvdn.com/ru/video/uxui-design? UX/UI базовый курс - itvdn.com/ru/video/uiux-design-essential? Материалы вебинара - itvdn.com/ru/webinars/description/mob-app-design-figma?
@user-fb8vu6fl2f
@user-fb8vu6fl2f 3 года назад
Очень помог ваш урок, даже пересматриваю третий раз!!! Для новичка просто клад!!! Спасибо!
@drknss3021
@drknss3021 3 года назад
Очень понравился ваш предыдущий вебинар. Спасибо!)
@fotouslugy4995
@fotouslugy4995 2 года назад
Преподаватель от Бога. Всё доступно, понятно. Первый раз такое вижу, чтоб так подробно и чётко без воды. Огромная Благодарность!👍🙏
@Midi25
@Midi25 Год назад
вы наверное на канале Алексея Бычкова не были) Вот кто крутой учитель. Посетите обязательно, поймёте разницу.
@denzeroneYT
@denzeroneYT 6 месяцев назад
Ви напевно англомовних каналів не дивились є багато цікавого матеріалу. Хоча кожен обирає ютубера, який йому подобається більше@@Midi25
@user-dy4ix8bo8h
@user-dy4ix8bo8h 3 года назад
Спасибо за вебинар!!! Очень доходчиво и интересно!!!
@user-wx7mo3fj3d
@user-wx7mo3fj3d 3 года назад
Благодарю, Алла, за информацию. Всё доступно! Будем пробовать
@rustamjuraev9132
@rustamjuraev9132 3 года назад
Алла вы просто одна из самых топовых людей которые просто так рассказали и показали все, спасибо вам огромное!)
@webmaster4095
@webmaster4095 3 года назад
Алле Штогриной спасибо! Для начинающих с Figma хороший материал
@magneat
@magneat 3 года назад
шикарный урок. спасибо большое!
@marinamochovska567
@marinamochovska567 Год назад
Огромнейшее спасибо преподавателю Алле за подробную,структурированную ценную для начинающих Дизайнеров инфу.Очень повезло,что наша курси на просторах нета.
@denzeroneYT
@denzeroneYT 6 месяцев назад
Курсів вистачає, якщо щось не знайшли - англійською гугліть там теж достатньо контенту.
@glebatee855
@glebatee855 2 года назад
Меня одного раздражает нажатия кнопки ENTER в этом видео?)
@youtubertj
@youtubertj 2 года назад
Не только enter
@saltanenko_svet
@saltanenko_svet Год назад
Ну спасибо, теперь я это слышу....
@koneri85
@koneri85 3 года назад
worm - это червяк на английском) heder - что то новенькое) это придирки, конечно, но со звуковой частью совсем беда. Что то под нос себе говорит, ни фига не слышно. Зато очень хорошо слышны клацания мышей и кнопки "Энтер"!
@cubagw
@cubagw 2 года назад
а как тебе цвет braun)))
@makitra_tut
@makitra_tut 2 года назад
Я прям не смогла досмотреть из за этого клацанья 🤦
@GarryLider
@GarryLider 2 месяца назад
Колонку воткнул - нормально.
@user-km1fq2lg5w
@user-km1fq2lg5w 2 года назад
прекрасно рассказано, все по полочкам)))
@GolikVitaliy
@GolikVitaliy 3 года назад
Спасибо большое за урок! Очень очень все доходчиво, рад что нашел Вас )) только начинаю дизайнить ))
@user-os7pw7pl9q
@user-os7pw7pl9q 2 года назад
как успехи?
@kirkir4627
@kirkir4627 2 года назад
храни вас Господь это то самое нужное видео для таких чайников в фигме как я
@user-wj6ue7nt5g
@user-wj6ue7nt5g 3 года назад
Алла, спасибо Вам огромное! Полностью посмотрел Ваше видео, во всем разобрался и записался на курсы веб-дизайна! Буду осваивать новую профессию!
@aleksandrmuhincom
@aleksandrmuhincom 2 года назад
Класс, спасибо! 🔥
@ivanshvab2711
@ivanshvab2711 3 года назад
спасибо тебе, досмотрел до конца
@yuka1941
@yuka1941 3 года назад
Спасибо, интересно
@antoniogrizlev6693
@antoniogrizlev6693 2 года назад
Оооогонь! Спасибо за видео!
@laskabosco6810
@laskabosco6810 2 года назад
Огромное вам спасибо:)
@5665ruslan
@5665ruslan 3 года назад
Спасибо, показали все что надо и очень доступно
@talukov
@talukov Год назад
Спасибо за уроки! Скажите пожалуйста, при создании прототипа необязательно использовать гайды? Например, при отрисовке прототипа smart house вы располагали элементы на экране как задумали... А как же требования по размерам кнопок или их формам... и т.д., что указывают в Google Material и для IOS? На этом этапе можно не учитывать эти гайды и можно отправлять разработчикам на таком этапе тоже? Спасибо.
@abubakr9656
@abubakr9656 3 года назад
Здравствуйте мне очень понравился но почему полностью не показали толка кухня показали остальные можно
@mii4676
@mii4676 2 года назад
здравствуйте, а как поставить верхнюю панель телефона где изображена battery, wifi, время
@kokidko5689
@kokidko5689 3 года назад
Люди, а как потом к примеру в android studio из этого сделать функционирующее приложение с кнопками и тд?
@no_lt
@no_lt 2 года назад
В универе задали сделать прототип моб приложения, сижу смотрю готовлюсь
@olexandrkrychylskiy4223
@olexandrkrychylskiy4223 3 года назад
Дуже круто!
@Citizen_LG
@Citizen_LG Год назад
А допустим, можно нарисовать кубик, который можно крутить? по типу например как кубик в автокаде или 3дс максе. Т.е. в место кубика, например кресло, которое можно покрутить и посмотреть со всех сторон?
@vitaliishostak4155
@vitaliishostak4155 3 года назад
А например есть телефоны с разным розришеныем или планшет, а мы под одно разрешение рисуем то как его адаптировать я не могу понять? Как потом ррзработчик ето переносить будет? Просто на свое усмотрение для мелких экранов будет уменшать блоки? А для тех что больше то как?
@LeyaAlma
@LeyaAlma Год назад
Здравствуйте. Можно ли попрактиковаться на вашем уроки и использовать ваши материалы с урока для партфолио?
@lupa4047
@lupa4047 3 года назад
Я ВАС ОЧЕНЬ БЛАГОДАРЮЮЮЮ! ВЫ ОЧЕНЬ ХОРОШО ОБЬЯСНЯЕТЕ
@onetwo3170
@onetwo3170 2 года назад
Спасибо. Я как новичок просмотрел все с интересом. На сегодняшний день сколько стоит собрать в Фигме дизайн и макет примерно такого приложения? Хотяб примерно +/-. Для себя любопытно……
@minakobongiovi3457
@minakobongiovi3457 Год назад
Учитывать как это откроется с компа?
@qwertyqwert4273
@qwertyqwert4273 3 года назад
Не понял, как вы создали палитру?
@lubavazabava2159
@lubavazabava2159 2 года назад
Тоже не поняла , взяла и появилась :(
@akhmedrakhimov3361
@akhmedrakhimov3361 3 года назад
Здравствуйте а как с вами можно связаться? Поговорить отрассценке приложение?
@PR1XODOVA
@PR1XODOVA 2 года назад
очень классно обьясняете ! только не понятно одно, почему при нажатие на стрелочку нету перехода на 2 страницу
@user-km8ls5oc3z
@user-km8ls5oc3z Год назад
Я заключила стрелочку во фрейм и теперь все работает))
@user-zh8oc3md7x
@user-zh8oc3md7x 2 года назад
Забавно что на превьюшке показан один дизайн, а по факту в уроке немного другое
@ar4i665
@ar4i665 3 года назад
Добрый день подскажите для каждого устройства нужно делать свой дизайн( имею ввиду что разрешений экрана куча) или верстальщик уже будет подганять?
@agentr227
@agentr227 3 года назад
в андроид студио есть папочки с макетами для каждого экрана. Андроид разработчик просто уменьшит все объекты да и вся разница. А вот как переместить в андроид студио вот всю эту красоту- это уже вопрос.
@tonymetadony7261
@tonymetadony7261 3 года назад
для айфона желательно проектировать в фрейме размером айфона 7, так верстальщику будет проще
@user-nn2ok9dh6t
@user-nn2ok9dh6t Год назад
А стили обязательно добавлять?
@KALYUTA_
@KALYUTA_ 2 года назад
Где взять top bar ????????
@Black_Gecko
@Black_Gecko Год назад
Доброго. Я так и не понял откуда взяли иконки домика и остальные иконки. В самой Figma есть или png заранее скаченные?
@denzeroneYT
@denzeroneYT 6 месяцев назад
Flaticon та і в фігма є розширення, які генерують іконки які потрібні.
@user-ff7su5ro3o
@user-ff7su5ro3o 3 года назад
У вас есть курсы по UI/UX design?
@ITVDN
@ITVDN 3 года назад
Здравствуйте, да, у нас есть новые курсы по UX/UI дизайну - UX/UI дизайн для начинающих - itvdn.com/ru/video/uxui-design? UX/UI базовый курс - itvdn.com/ru/video/uiux-design-essential?
@KentMajor
@KentMajor 2 года назад
Где это сказано, что в ios 10px сетка? 😬
@user-ju8sv7nc2l
@user-ju8sv7nc2l 2 года назад
ДОБРЫЙ ДЕНЬ,У МЕНЯ ВОПРОС-Дело в том что разновидностей шрифта SF Pro великое множество,какой шрифт используете вы?
@denzeroneYT
@denzeroneYT 6 месяцев назад
Бред, он один оригинал, на сайте Apple є
@Julia.Strelets
@Julia.Strelets 2 года назад
Безумно полезный и интересный эфир! Спасибо! Но остался 1 вопрос, где вы бирете иконки? Вы так быстро их вставляете, что я даже не могу понять как вы это сделали?
@PR1XODOVA
@PR1XODOVA 2 года назад
тоже не поняла
@talukov
@talukov Год назад
Извините, позволю предложить свой вариант, пока автор не ответил) Думаю, что заранее скачены с того же Flaticon и где то рядом находились) И во время урока просто копировала и вставляла... Я так не могла понять откуда топбар для ios так быстро вставился))
@denzeroneYT
@denzeroneYT 6 месяцев назад
Хм, в відео показали деякі ресурси.. чим ви дивились? 30:00 :)
@denzeroneYT
@denzeroneYT 6 месяцев назад
43:00
@art_video_design
@art_video_design 3 года назад
В какой конструктор это отправить, чтобы создать приложение, чтобы залить в плей маркет и аппстор?
@tilsr2556
@tilsr2556 2 года назад
не получится. для этого надо иметь рабочий аккаунт. Все приложения сверяются вдольт и поперек
@denzeroneYT
@denzeroneYT 6 месяцев назад
Цим займається вже розробник, експортуєш, він закидує в Android Studio і там працює. Тільки після цього можна, крім цього потрібно $10, щоб викласти застосунок
@kseniyaalive3772
@kseniyaalive3772 2 года назад
А зачем в зеплине давать разработчику? Инспектор пейдж чем не подходит?
@skmail8884
@skmail8884 3 года назад
18:07 , когда я нажимаю по центру, у меня из 2 квадратиков остается один, тк они оба смещаются в центр. ______________________________ Вопрос решен, если кому-то полезно, то помимо выделения НАДО нажать ctrl+G - для создания группы
@ekaterinas6615
@ekaterinas6615 3 года назад
жаль невнятно произносит название источников и программ, и нет дублирования в описании к видео
@user-qi7th9vk2k
@user-qi7th9vk2k 3 года назад
@Double Language Channel Animation каких разработчиков? Т.е сфера разработки? Я веб-разработчик
@user-qi7th9vk2k
@user-qi7th9vk2k 3 года назад
@Double Language Channel Animationкак-то не хочется в команду ПО разработчиков, будучи Веб. Пожалуй откажусь
@thegilfany
@thegilfany 2 года назад
@Double Language Channel Animation много собрал?
@kompyuter8106
@kompyuter8106 2 года назад
xotin yorvordingiz lekin
@anikserigatikov3350
@anikserigatikov3350 2 года назад
Учите hot keys, больно смотреть на то что можно сделать в два клика, вы растягиваете на целое приключение.
@thegilfany
@thegilfany 2 года назад
Вообще не говори, я сидел и плакал как происходит копирование квадратиков через зажатые кнопки и перетаскивание мышкой, я плакал и молился, чтобы пришло осознание человеку занимающемся 10 лет дизайном начать использовать хоткеи..)
@Anastasia_Kobalt
@Anastasia_Kobalt 2 года назад
Не понравилось, что ведущая стрима еле языком шевелит, как будто заснет сейчас. Приходилось прислушиваться, даже на большой громкости. Это бесит дико! И второе - откуда-то вылезают заранее подготовленные элементы типа top bar, и непонятно, самим надо изготовить или взять где-то. Хоть комментируйте, что вы подразумеваете.
@storm3arkh
@storm3arkh Год назад
с акцентом хравфики и охраничениям нужно, конечно, что-то делать....
@5111
@5111 2 года назад
программист был в шоке
@denzeroneYT
@denzeroneYT 6 месяцев назад
До чого тут програміст? Відео для дизайнерів, програміст пізніше підключається, коли вже експортується проєкт
@user-gi7vs9qt1p
@user-gi7vs9qt1p 3 года назад
когда бьете по пробелу, звук очень резкий
@ITVDN
@ITVDN 3 года назад
Просим прощения за неудобства, сообщили автору о данной проблеме.
@user-gi6ty9wv4m
@user-gi6ty9wv4m 2 года назад
У вас такой опыт работы и вы не знаете, что нужно объединять во фреймы, а не в группы? Я молчу про другие ошибки. И это вы передаете в массы, а потом новичкам приходится переучиваться. Да еще вы и от образовательного центра (( Я бы к вам не пошла учиться.
@makitra_tut
@makitra_tut 2 года назад
Я вообще в шоке от этого урока
@thegilfany
@thegilfany 2 года назад
@@makitra_tut Вообще не говори, я сидел и плакал как происходит копирование квадратиков через зажатые кнопки и перетаскивание мышкой, я плакал и молился, чтобы пришло осознание человеку занимающемся 10 лет дизайном начать использовать хоткеи..)
@murodnomozov4350
@murodnomozov4350 3 года назад
привет Мурод
@NA4K0
@NA4K0 3 года назад
qonday
@denzeroneYT
@denzeroneYT 6 месяцев назад
гений, со второго аккаунта написал? ахаха@@NA4K0
@andybud3885
@andybud3885 3 года назад
начинающий диз, поэтому выполнение этого заняло у меня несколько дней, спасибо за тутор
@Aetosamoe
@Aetosamoe 2 года назад
все хорошо, но слушать невозможно🥲
@youtubertj
@youtubertj 2 года назад
урок хороший, но звук ужасный. Много лишного шума, звук клавиатуры звук мышки очень мешает...
@ludmilabishop4656
@ludmilabishop4656 2 года назад
Правильно "create", а не "creat"
@johnsmiler9254
@johnsmiler9254 2 года назад
Можно покрупнее, плохо видно!
@user-kj8cf6ku6y
@user-kj8cf6ku6y 2 года назад
+
@koneri85
@koneri85 3 года назад
2 часа вода вода вода, а когда дошли до главного - как это всё экспортировать в проект, решили не показывать.. Супер))
@Ermalz
@Ermalz 3 года назад
Там есть кнопка экспорт. А там уже разработчик вроде как должен все сам сделать.
@parvizkultaev1296
@parvizkultaev1296 2 года назад
jj
@user-rd5ij8kd4u
@user-rd5ij8kd4u 3 года назад
Вам бы речь подтянуть
@user-qt1xc3ci7x
@user-qt1xc3ci7x 3 года назад
От слишком громкого клацанья клавиш и мышки голова разболелась. А вот девушку совсем не слышно, два часа бубнит что-то себе под нос, половину слов вообще не разобрать (((
@CHITUS
@CHITUS 2 года назад
Спасибо большое за урок! Очень очень все доходчиво, рад что нашел Вас )) только начинаю дизайнить ))
@ak1o_loh
@ak1o_loh 2 года назад
Я тоже, удачи тебе
@denzeroneYT
@denzeroneYT 6 месяцев назад
Ну і як успіхи?
Далее
Making money online with ChatGPT and Canva
13:53
Просмотров 467 тыс.
Connect React to Firebase (Firestore)
15:42
Просмотров 7 тыс.