Веб дизайн в Figma 2022 - с нуля до результата, основы UX/UI. Дмитрий Фокеев, Udemy

Привет!Меня зовут Дима и это курс по веб дизайну в Figma, с нуля до результата!Если вы давно искали что то интересное по веб дизайну, добро пожаловать!)Этот курс для абсолютных новичков в дизайне, по этому вам не нужно обладать какими либо знаниями для прохождения данного курса!Вместе, вы и я, пройдем путь - от установки программы Figma до уровня UI дизайнера, который уверенно может брать заказы на фриланс и гордиться своей работой!Мы начнем с самых основ и вместе, шаг за шагом изучим все необходимые инструменты Figma, так, что в конце курса, вы будете чувствовать себя профессионалом!Мы станем профи в подборе цвета, научимся сочетать на нашем сайте любую картинку с фоном и конечно же научимся подбирать красивые комплементарные цвета для любых элементов на нашем сайте, как настоящие профи колористы!Изучим множество трюков по работе с изображениями, такими как экстримальная обрезка, мягкая обрезка, работа с контрастностью фото и тем какое изображение лучше выбрать для вашего сайта! И конечно узнаем много мест, где вы сможете найти идеальное фото, для вашей работы!Конечно, мы изучим все что необходимо знать о работе со шрифтами, начиная от мест где вы найдете лучшие шрифты до их установки! И конечно в конце курса, у вас исчезнет вопрос, какой же шрифт лучше подобрать для вашего сайта!Мы научимся использовать пустое пространство в свою пользу, работать с контрастом, профессионально накладывать изображения друг на друга, изучим тонкости и правила в веб дизайне и много многое другое!Этот курс направлен в первую очередь на развитие навыков User Interfaces дизайнера, но конечно, в курсе мы коснемся обеих сторон профессии как UX – User Expirience так и UI - User InterfacesВ этом курсе сделан большой акцент на практику! В каждом, небольшом уроке, без лишней болтовни, мы будем шаг за шагом создавать2 красивых, уникальных проекта, которые, вы сможете использовать в своем портфолио – web дизайнера.Поэтому вы можете забыть про скучные уроки, где просто перечисляют какой инструмент, как называется!И конечно, мы узнаем как адаптировать их под разные, мобильные версии сайта, как анимировать каждый элемент макета и даже научимся создавать красивые слайдеры и красивую анимацию счетчика прямо в figma! Поверьте, скучно не будет!Дополнительно, мы поговорим о том, как договариваться с заказчиком, как развиваться в дизайне, где искать идеи, как создавать оригинальные творческие работы, как наработать свой стиль и узнаем множество мест, где дизайнеры и художники находят вдохновение!Ну и куда же без бонусов и приятных плюшек!)Вы конечно же, не станете профи, без минимальных знаний по обработке изображений! И именно по этому, бонусом, в этом курсе, будет блок, где мы научимся всем необходимым знаниям по работе в photoshop.Мы научимся вырезать человека из одного изображения и помещать его в другое, сможем удалять ненужное из изображений, увеличивать фон наших изображений и узнаем пару эффективных трюков по работе в photoshop!И если у вас еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него, в течении 30 дней, без каких либо вопросов!Загляните ко мне в инстаграм, там вы найдете всю необходимую информацию о моих курсах и спец предложениях!Присоединяйтесь ко мне и мы вместе начнем создавать, прекрасный дизайн, в figma!До встречи на уроках!Для кого этот курс:Для начинающих дизайнеров, верстальщиков, веб-программистов, творческих людей!Для тех кто любит изучать новое!Чему вы научитесь:Вы изучите все инструменты FigmaВы изучите современные техники и приемы дизайнаВы научитесь азам PhotoshopВы узнаете больше про профессии UX UI дизайнерВы научитесь работать с изображениями в FigmaВы научитесь подбирать правильные цвета для ваших сайтовВы научитесь подбирать правильные шрифты для ваших сайтовВы узнаете как работать с контрастом на веб страницахВы научитесь управлять пустым пространством на веб страницахВы научитесь сочетать элементы на веб страницахВы узнаете что такое адаптивный дизайнВы научитесь адаптировать под любое мобильное устройство, любой сайтВы поймете как договариваться с заказчикомВы узнаете как составлять бриф с заказчикомВы научитесь создавать WireframesВы узнаете как ускорить вашу работу в FigmaВы научитесь техникам обрезки изображенийВы научитесь удалять ненужные элементы из изображений в PhotoshopВы научитесь расширять границы изображений в PhotoshopВы научитесь вырезать человека из одного изображения и вставлять в другоеТребования:Просто работающий компьютерПрограмма курса:Общая продолжительность 13 ч 42 мин01. ВведениеВступлениеНемного технических вопросовСкачиваем Figma и материалы для работы с курсомОставайтесь со мной на связи02. Основы работы в FigmaСоздаем первый макет, узнаем размеры сайтаЧто такое Grid система. Работа с направляющими сеткамиНемного про "Wareframe" или "каркас сайта"Основы работы с изображениямиБазовая работа с текстомРабота с иерархией элементов в документеЧто такое UX и UI03. Работа с цветомКак заимствовать цвет из изображенийПрактика: как подбирать цвет из изображенийУглубленная работа с цветом + HSBДополнительные ресурсы работы с цветом + углубленная работа с фигурамиКак использовать градиентГде искать вдохновение и как заимствовать цвета у других дизайнеров04. Работа с изображениямиКак увеличить контрастность фотоКак на практике тонировать и затемнять фотоТехника экстремальной обрезки изображенийТехника мягкой обрезки изображенийПрактика по мягкой обрезкеУдаляйте лишний фонПодбирайте классные фотоКак работать с иконкамиКак создать собственную иконкуСоздаем кнопку и работаем с эффектамиРазбираемся с форматами изображений05. Работа с текстомУглубленная работа с текстомПочему шрифты это важноГлавные типы шрифтовГде искать шрифты - 1Где искать шрифты - 2Рыбный текст + установка плагиновПрактика по поиску шрифтовКак использовать в дизайне настройку шрифтовСоздаем лист со стилями сайтаТЕХНИЧЕСКОЕ ВИДЕО: Продолжаем создавать макет06. Маски / Линии / Перо и КарандашКак работать с масками слояКак работать с линиямиПрактика по работе с перомДоделываем сайт портфолио07. Дизайнерские трюкиТрюки с наложением элементов друг на другаОдинаковые элементы на страницеТрюки с повторениямиТрюки с контрастомТрюки с пустым пространствомКак развиваться в дизайне08. Новый проект - ПодготовкаПара слов и продолжаем!Бриф с заказчикомСоздаем Mood BoardКак делиться проектомЧто такое Figma JamНедавние обновления Figma JamСоздаем Wireframe нового проекта ч.1Создаем Wireframe нового проекта ч.2Создаем Wireframe нового проекта ч.3Создайте wireframe09. Введение в адаптивный дизайнConstraints + gridРазличие между фреймами и группамиПрименяем Constraints к макету портфолиоПрактика: Constraints на макете портфолио10. Дополнительные возможности FigmaКак работать с компонентамиКак работать с Auto lay out11. Стилизуем макетПредисловие к блокуСтилизуем макет ч.1Стилизуем макет ч.2Подбираем шрифтыСтилизуем макет ч.3Стилизуем макет ч.4Практика: Стилизуем оставшиеся 2 страницы сайта12. Адаптивный дизайнТеория адаптивного дизайнаАдаптивный дизайн под планшет ч.1Адаптивный дизайн блога ч.213. Ускорение рабочих процессовГорячие клавишиКак создать компоненты с помощью плагиновБыстрый адаптивПолезные плагиныПрактика: Ускоряемся в создании мобильной версии сайта14. ПрототипированиеОсновы прототипированияУглубленные настройки прототипированияАнимируем подсказкуАнимируем мобильную версию менюАнимируем кнопкиАнимируем ручной слайдерАнимируем автоматический слайдерАнимируем красивый счетчик с помощью "смарт анимации"Как взаимодействуют прототипы с компонентамиVariants в компонентах15. БиблиотекиРазница между платной и бесплатной версией программы FigmaКак работать с Библиотеками16. ЭкспортЭкспорт файлов из FigmaПередача в разработку17. Работа в PhotoshopПодготовка программыРабота со слоями в PhotoshopРасширяем границы изображенийУдаляем ненужное из фотоКак вырезать человека из одного фото и вставить его в другоеКак работают маски в фотошопЭкспорт файлов из фотошопЧто дальше?18. Что дальше?До свидания!