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

​

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

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

Спойлер: Содержание складчины (файлы и папки)

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]

Объем: 7,42Гб.
Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...

 

гость Присоединяйся на складчины

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

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

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

 

Уведомляем вас о начале сбора взносов.
Цена продукта: 1190 руб. Взнос с каждого участника: 259 руб.
Кол-во участников в основном списке: 1 чел.

Начало сбора взносов 22 Октябрь 2022 года

 

как выписаться из складчины? курс больше не актуален