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

​Привет!
Меня зовут Дима и это курс по веб дизайну в 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 и UI
03. Работа с цветом
Как заимствовать цвет из изображений
Практика: как подбирать цвет из изображений
Углубленная работа с цветом + HSB
Дополнительные ресурсы работы с цветом + углубленная работа с фигурами
Как использовать градиент
Где искать вдохновение и как заимствовать цвета у других дизайнеров
04. Работа с изображениями
Как увеличить контрастность фото
Как на практике тонировать и затемнять фото
Техника экстремальной обрезки изображений
Техника мягкой обрезки изображений
Практика по мягкой обрезке
Удаляйте лишний фон
Подбирайте классные фото
Как работать с иконками
Как создать собственную иконку
Создаем кнопку и работаем с эффектами
Разбираемся с форматами изображений
05. Работа с текстом
Углубленная работа с текстом
Почему шрифты это важно
Главные типы шрифтов
Где искать шрифты — 1
Где искать шрифты — 2
Рыбный текст + установка плагинов
Практика по поиску шрифтов
Как использовать в дизайне настройку шрифтов
Создаем лист со стилями сайта
ТЕХНИЧЕСКОЕ ВИДЕО: Продолжаем создавать макет
06. Маски / Линии / Перо и Карандаш
Как работать с масками слоя
Как работать с линиями
Практика по работе с пером
Доделываем сайт портфолио
07. Дизайнерские трюки
Трюки с наложением элементов друг на друга
Одинаковые элементы на странице
Трюки с повторениями
Трюки с контрастом
Трюки с пустым пространством
Как развиваться в дизайне
08. Новый проект — Подготовка
Пара слов и продолжаем!
Бриф с заказчиком
Создаем Mood Board
Как делиться проектом
Что такое Figma Jam
Недавние обновления Figma Jam
Создаем Wireframe нового проекта ч.1
Создаем Wireframe нового проекта ч.2
Создаем Wireframe нового проекта ч.3
Создайте wireframe
09. Введение в адаптивный дизайн
Constraints + grid
Различие между фреймами и группами
Применяем Constraints к макету портфолио
Практика: Constraints на макете портфолио
10. Дополнительные возможности Figma
Как работать с компонентами
Как работать с Auto lay out
11. Стилизуем макет
Предисловие к блоку
Стилизуем макет ч.1
Стилизуем макет ч.2
Подбираем шрифты
Стилизуем макет ч.3
Стилизуем макет ч.4
Практика: Стилизуем оставшиеся 2 страницы сайта
12. Адаптивный дизайн
Теория адаптивного дизайна
Адаптивный дизайн под планшет ч.1
Адаптивный дизайн блога ч.2
13. Ускорение рабочих процессов
Горячие клавиши
Как создать компоненты с помощью плагинов
Быстрый адаптив
Полезные плагины
Практика: Ускоряемся в создании мобильной версии сайта
14. Прототипирование
Основы прототипирования
Углубленные настройки прототипирования
Анимируем подсказку
Анимируем мобильную версию меню
Анимируем кнопки
Анимируем ручной слайдер
Анимируем автоматический слайдер
Анимируем красивый счетчик с помощью «смарт анимации»
Как взаимодействуют прототипы с компонентами
Variants в компонентах
15. Библиотеки
Разница между платной и бесплатной версией программы Figma
Как работать с Библиотеками
16. Экспорт
Экспорт файлов из Figma
Передача в разработку
17. Работа в Photoshop
Подготовка программы
Работа со слоями в Photoshop
Расширяем границы изображений
Удаляем ненужное из фото
Как вырезать человека из одного фото и вставить его в другое
Как работают маски в фотошоп
Экспорт файлов из фотошоп
Что дальше?
18. Что дальше?
До свидания!