[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. Что дальше?

• До свидания!