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

Привет!

Меня зовут Дима и это курс по веб дизайну в Figma, с нуля до результата!

Если вы давно искали что то интересное по веб дизайну, добро пожаловать!)

Этот курс для абсолютных новичков в дизайне, по этому вам не нужно обладать какими либо знаниями для прохождения данного курса!

Вместе, вы и я, пройдем путь - от установки программы Figma до уровня UI дизайнера, который уверенно может брать заказы на фриланс и гордиться своей работой!

Мы начнем с самых основ и вместе, шаг за шагом изучим все необходимые инструменты Figma, так, что в конце курса, вы будете чувствовать себя профессионалом!

Мы станем профи в подборе цвета, научимся сочетать на нашем сайте любую картинку с фоном и конечно же научимся подбирать красивые комплементарные цвета для любых элементов на нашем сайте, как настоящие профи колористы!

Изучим множество трюков по работе с изображениями, такими как экстримальная обрезка, мягкая обрезка, работа с контрастностью фото и тем какое изображение лучше выбрать для вашего сайта! И конечно узнаем много мест, где вы сможете найти идеальное фото, для вашей работы!

Конечно, мы изучим все что необходимо знать о работе со шрифтами, начиная от мест где вы найдете лучшие шрифты до их установки! И конечно в конце курса, у вас исчезнет вопрос, какой же шрифт лучше подобрать для вашего сайта!

Мы научимся использовать пустое пространство в свою пользу, работать с контрастом, профессионально накладывать изображения друг на друга, изучим тонкости и правила в веб дизайне и много многое другое!

Этот курс направлен в первую очередь на развитие навыков User Interfaces дизайнера, но конечно, в курсе мы коснемся обеих сторон профессии как UX – User Expirience так и UI - User Interfaces

В этом курсе сделан большой акцент на практику! В каждом, небольшом уроке, без лишней болтовни, мы будем шаг за шагом создавать

2 красивых, уникальных проекта, которые, вы сможете использовать в своем портфолио – web дизайнера.

Поэтому вы можете забыть про скучные уроки, где просто перечисляют какой инструмент, как называется!

И конечно, мы узнаем как адаптировать их под разные, мобильные версии сайта, как анимировать каждый элемент макета и даже научимся создавать красивые слайдеры и красивую анимацию счетчика прямо в figma! Поверьте, скучно не будет!

Дополнительно, мы поговорим о том, как договариваться с заказчиком, как развиваться в дизайне, где искать идеи, как создавать оригинальные творческие работы, как наработать свой стиль и узнаем множество мест, где дизайнеры и художники находят вдохновение!

Ну и куда же без бонусов и приятных плюшек!)

Вы конечно же, не станете профи, без минимальных знаний по обработке изображений! И именно по этому, бонусом, в этом курсе, будет блок, где мы научимся всем необходимым знаниям по работе в photoshop.

Мы научимся вырезать человека из одного изображения и помещать его в другое, сможем удалять ненужное из изображений, увеличивать фон наших изображений и узнаем пару эффективных трюков по работе в photoshop!

И если у вас еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него, в течении 30 дней, без каких либо вопросов!

Загляните ко мне в инстаграм, там вы найдете всю необходимую информацию о моих курсах и спец предложениях!

Присоединяйтесь ко мне и мы вместе начнем создавать, прекрасный дизайн, в figma!

До встречи на уроках!

Общая продолжительность 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. Что дальше?

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

01 Введение
01 Вступление.mp4 [71m 958k 29]
02 Немного технических вопросов.mp4 [63m 412k 270]
03 -.url [56]
03 Google.url [108]
03 Скачиваем Figma и материалы для работы с курсом.mp4 [28m 440k 350]
04 Оставайтесь со мной на связи.html [529]
external-links.txt [145]

MACOSX

__MACOSX
._Материалы Веб дизайн [220]

Материалы Веб дизайн
._.DS_Store [120]

Материалы Веб дизайн
.DS_Store [6k 148]
Бриф - Блог про путешествия.docx [15k 580]
Инструмент кривизны.jpg [104k 482]
Ссылки на интересные сайты.docx [28k 859]

01-Сайт портфолио
Кто я.jpg [114k 908]
Маски-1.jpg [438k 464]
Маски-2.jpg [771k 53]
Маски-3.jpg [286k 485]
Мои работы-1.jpg [160k 655]
Мои работы-2.jpg [246k 593]
Мои работы-3.jpg [419k 99]
Мои работы-4.jpg [252k 630]
Пример SVG.svg [846]
Связь со мной.jpg [273k 998]
Шапка сайта.png [2m 427k 976]

Иконки
!!!.svg [1k 101]
Dribbble - Negative.svg [1k 631]
Facebook - Negative.svg [471]
Instagram - Negative.svg [3k 109]
YouTube - Negative.svg [1k 98]

02-Сайт - Блог для путешествий
logo.svg [3k 17]
Блог Турция.jpg [346k 739]
Гид.jpg [511k 813]
Главный экран турция.jpg [933k 685]
Горы и компас для белого фона.jpg [633k 226]
Горы и компас отраженные.jpg [632k 502]
Значек видео.svg [619]
Картинка для видео.jpg [544k 157]
Локация.svg [1k 272]
Погода.svg [2k 386]
Третья часть главной страници с Турцией.jpg [1m 853k 833]
Фото для всплывашки.jpg [202k 413]
Фотограф.jpg [499k 717]
Царапки.png [302k 446]

Иконки
Blue.png [1k 954]
Normal.png [998]
person_24px.png [399]
photo_24px.png [812]

Материалы для Таиланда
Блог Таиланд.jpg [543k 510]
Главный экран Таиланд .jpg [698k 588]
Таиланд для видео.jpg [581k 143]
Третья часть Таиланд.jpg [2m 424k 980]
Фото для всплавашки.jpg [202k 413]

Скрин шоты страниц для ДЗ
Скрин шот общей страницы блога.jpg [282k 460]
Скрин шот страницы Блога.jpg [178k 61]

Фото для страницы блога
Блог-1.jpg [544k 157]
Блог-2.jpg [581k 143]
Блог-3.jpg [439k 528]
Блог-4.jpg [415k 71]
Блог-5.jpg [1m 109k 436]
Блог-6.jpg [285k 272]
Блог-7.jpg [390k 999]
Блог-8.jpg [365k 907]
Блог-9.jpg [183k 639]

03-Фотошоп
Выделение и удаление объектов-01.jpg [792k 289]
Выделение и удаление объектов-02.jpg [827k 415]
Выделение и удаление-03.jpg [269k 651]
Дом из примера баннера.jpg [1m 127k 377]
Копирование элементов-01.jpg [221k 71]
Копирование элементов-02.jpg [439k 236]
Маски-01.jpg [849k 766]
Расширение изображений-1.jpg [412k 613]
Расширение изображений-2.jpg [792k 289]
Расширение изображений-3.jpg [221k 71]
Расширение изображений-4.jpg [791k 541]
Слои-1.jpg [460k 754]
Слои-2.jpeg [375k 528]
Слои-3.jpeg [199k 253]

Шрифты
Montserrat.zip [2m 44k 652]
Philosopher.zip [200k 442]
Playfair_Display.zip [1m 662k 133]

02 Основы работы в Figma
01 Создаем первый макет, узнаем размеры сайта.mp4 [81m 663k 738]
02 Что такое Grid система. Работа с направляющими сетками.mp4 [52m 697k 59]
03 Немного про Wareframe или каркас сайта.mp4 [96m 95k 355]
04 Основы работы с изображениями.mp4 [68m 923k 854]
05 Базовая работа с текстом.mp4 [22m 380k 515]
06 Работа с иерархией элементов в документе.mp4 [74m 817k 984]
07 Что такое UX и UI.mp4 [56m 537k 556]

03 Работа с цветом
01 Как заимствовать цвет из изображений.mp4 [16m 866k 809]
02 -.url [137]
02 Практика как подбирать цвет из изображений.mp4 [74m 725k 105]
03 Углубленная работа с цветом + HSB.mp4 [82m 378k 752]
04 Дополнительные ресурсы работы с цветом + углубленная работа с фигурами.mp4 [79m 999k 441]
05 Как использовать градиент.mp4 [60m 558k 174]
06 Где искать вдохновение и как заимствовать цвета у других дизайнеров.mp4 [52m 542k 568]
external-links.txt [124]

04 Работа с изображениями
01 Как увеличить контрастность фото.mp4 [38m 226k 945]
02 -.url [131]
02 Как на практике тонировать и затемнять фото.mp4 [51m 329k 427]
03 Техника экстремальной обрезки изображений.mp4 [31m 480k 518]
04 Техника мягкой обрезки изображений.mp4 [16m 61k 342]
05 -.url [142]
05 Практика по мягкой обрезке.mp4 [44m 533k 401]
06 Удаляйте лишний фон.mp4 [21m 459k 533]
07 Подбирайте классные фото.mp4 [80m 670k 728]
08 -.url [42]
08 Как работать с иконками.mp4 [101m 539k 711]
09 Как создать собственную иконку.mp4 [48m 341k 936]
10 Создаем кнопку и работаем с эффектами.mp4 [61m 645k 574]
11 Разбираемся с форматами изображений.mp4 [72m 866k 347]
external-links.txt [285]

05 Работа с текстом
01 Углубленная работа с текстом.mp4 [89m 716k 614]
02 Почему шрифты это важно.mp4 [38m 580k 467]
03 Главные типы шрифтов.mp4 [42m 639k 851]
04 .png [78k 853]
04 Где искать шрифты - 1.mp4 [117m 352k 20]
05 Где искать шрифты - 2.mp4 [68m 584k 236]
06 Рыбный текст + установка плагинов.mp4 [68m 519k 720]
07 -.url [235]
07 Практика по поиску шрифтов.mp4 [47m 62k 164]
08 Как использовать в дизайне настройку шрифтов.mp4 [102m 96k 647]
09 -.url [101]
09 Создаем лист со стилями сайта.mp4 [59m 292k 419]
10 ТЕХНИЧЕСКОЕ ВИДЕО Продолжаем создавать макет.mp4 [155m 110k 804]
external-links.txt [310]

06 Маски Линии Перо и Карандаш
01 Как работать с масками слоя.mp4 [71m 649k 553]
02 Как работать с линиями.mp4 [62m 703k 366]
03 Практика по работе с пером.mp4 [91m 41k 423]
04 Доделываем сайт портфолио.mp4 [82m 847k 871]

07 Дизайнерские трюки
01 Трюки с наложением элементов друг на друга.mp4 [27m 445k 421]
02 Одинаковые элементы на странице.mp4 [29m 101k 160]
03 Трюки с повторениями.mp4 [16m 102k 811]
04 Трюки с контрастом.mp4 [12m 697k 202]
05 Трюки с пустым пространством.mp4 [20m 256k 33]
06 Как развиваться в дизайне.mp4 [34m 739k 847]

08 Новый проект - Подготовка
01 Пара слов и продолжаем!.mp4 [26m 307k 582]
02 Бриф с заказчиком.mp4 [54m 687k 788]
03 Создаем Mood Board.mp4 [93m 676k 814]
04 Как делиться проектом.mp4 [46m 142k 453]
05 Что такое Figma Jam.mp4 [146m 774k 354]
06 Недавние обновления Figma Jam.mp4 [91m 238k 160]
07 Создаем Wireframe нового проекта ч.1.mp4 [156m 406k 779]
08 Создаем Wireframe нового проекта ч.2.mp4 [53m 977k 963]
09 Создаем Wireframe нового проекта ч.3.mp4 [65m 515k 825]
10 Создайте wireframe.mp4 [11m 509k 456]

09 Введение в адаптивный дизайн
01 Введение в constraints.mp4 [66m 718k 286]
02 Constraints + grid.mp4 [29m 839k 114]
03 Различие между фреймами и группами.mp4 [46m 673k 707]
04 Constraints.url [167]
04 Применяем Constraints к макету портфолио.mp4 [131m 700k 871]
05 Constraints.url [167]
05 Практика Constraints на макете портфолио.mp4 [17m 172k 697]
external-links.txt [331]

10 Дополнительные возможности Figma
01 Как работать с компонентами.mp4 [63m 257k 545]
02 Как работать с Auto lay out.mp4 [30m 758k 523]

11 Стилизуем макет
01 Предисловие к блоку.mp4 [33m 309k 501]
02 Стилизуем макет ч.1.mp4 [175m 580k 346]
03 Стилизуем макет ч.2.mp4 [183m 905k 618]
04 Подбираем шрифты.mp4 [54m 374k 447]
05 Стилизуем макет ч.3.mp4 [181m 913k 816]
06 Стилизуем макет ч.4.mp4 [66m 457k 195]
07 Desktop.jpg [2m 645k 385]
07 Практика Стилизуем оставшиеся 2 страницы сайта.mp4 [34m 617k 649]

12 Адаптивный дизайн
01 Теория адаптивного дизайна.mp4 [95m 547k 213]
02 Адаптивный дизайн под планшет ч.1.mp4 [419m 953k 865]
03 Адаптивный дизайн блога ч.2.mp4 [187m 893k 299]
03.jpg [2m 514k 568]

13 Ускорение рабочих процессов
01 Горячие клавиши.mp4 [145m 999k 670]
02 Как создать компоненты с помощью плагинов.mp4 [77m 597k 867]
03 Быстрый адаптив.mp4 [135m 492k 3]
04 Полезные плагины.mp4 [103m 694k 456]
05 Практика Ускоряемся в создании мобильной версии сайта.mp4 [14m 47k 650]
05.jpg [1m 170k 308]

14 Прототипирование
01 Основы прототипирования.mp4 [138m 503k 217]
02 Углубленные настройки прототипирования.mp4 [84m 451k 514]
03 Анимируем подсказку.mp4 [87m 792k 476]
04 Анимируем мобильную версию меню.mp4 [76m 193k 841]
05 Анимируем кнопки.mp4 [77m 118k 176]
06 Анимируем ручной слайдер.mp4 [144m 161k 810]
07 Анимируем автоматический слайдер.mp4 [59m 147k 974]
08 Анимируем красивый счетчик с помощью смарт анимации.mp4 [77m 766k 31]
09 Как взаимодействуют прототипы с компонентами.mp4 [35m 600k 505]
10 Variants в компонентах.mp4 [137m 809k 983]

15 Библиотеки
01 Разница между платной и бесплатной версией программы Figma.mp4 [38m 810k 907]
02 Как работать с Библиотеками.mp4 [53m 125k 982]

16 Экспорт
01 Экспорт файлов из Figma.mp4 [179m 747k 679]
02 Передача в разработку.mp4 [108m 588k 997]

17 Работа в Photoshop
01 Подготовка программы.mp4 [47m 411k 279]
02 Работа со слоями в Photoshop.mp4 [118m 685k 875]
03 Расширяем границы изображений.mp4 [139m 51k 301]
04 Удаляем ненужное из фото.mp4 [139m 285k 160]
05 Как вырезать человека из одного фото и вставить его в другое.mp4 [158m 981k 52]
06 Как работают маски в фотошоп.mp4 [79m 522k 237]
07 Экспорт файлов из фотошоп.mp4 [54m 214k 108]
08 Что дальше.mp4 [20m 582k 227]

18 Что дальше
01 До свидания!.mp4 [42m 571k 397]