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

Полностью обновленный курс

Курс бестселлер Веб дизайн в Figma 2024 - с нуля до результата, основы UX/UI стал лучше, больше, современней и учитывает все последние обновления программы Figma.

В этом курсе, вы найдете все для успешного старта карьеры в UX/UI.
Быстрый старт в профессию веб дизайнер.

Чему вы научитесь

Изучите все инструменты Figma
Изучите современные техники и приемы дизайна
Научитесь азам работы в Photoshop
Узнаете больше про профессии UX UI дизайнер
Узнаете что такое web design на практике
Научитесь работать с изображениями в Figma
Научитесь подбирать правильные цвета для ваших сайтов
Научитесь подбирать правильные шрифты для ваших сайтов
Узнаете как работать с контрастом на веб страницах
Научитесь сочетать элементы на веб страницах
Узнаете что такое адаптивный дизайн
Научитесь адаптировать под любое мобильное устройство, любой сайт
Узнаете как анимировать макеты
Изучите места где можно черпать вдохновение для своих работ
Знаете где найти идеальное изображение, иконки и иллюстрации для ваших сайтов
Вы поймете как договариваться с потенциальным заказчиком
Вы узнаете как составлять бриф с потенциальным заказчиком
Изучите базу по работе в Photoshop

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

Этот курс для абсолютных новичков

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

Выбор цветов для проекта будет простым и понятным

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

Множество фишек по привлекательному дизайну внутри

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

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

Простая и понятная работа со шрифтами

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

Разберемся в странных темах UX/UI

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

Практика на протяжении всего курса

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

Необходимые навыки адаптивного дизайна

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

Поговорим об общении с потенциальным заказчиком и о развитии в дизайне

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

База по Photoshop для уникальных макетов

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

Гарантия возврата денег

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

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

До встречи на уроках!
Для кого этот курс

Для начинающих дизайнеров, верстальщиков, веб-программистов, творческих людей. Для тех кто хочет начать карьеру в веб дизайне.
Начальные требования

Работающий компьютер и желание узнавать новое!

Дмитрий Фокеев
Профессионально обучаю работе с графическими редакторами Adobe, преподаю дизайн и веб разработку.

Программа курса:

Подготовка к курсу

Скачиваем материалы
Как проходить курс
Оставайтесь со мной на связи

Основы Figma

Какие размеры у сайта
Создаем frame сайта
Что такое сетка grid
Основы работы с Фигурами Изображениями Слоями
Основы работы с текстом
Группировка слоев и немного про режим презентации
Как сохранять и передавать файлы Figma
Разница UX и UI

Работа с цветом

Подбор цвета из изображений
ПРАКТИКА. Подберите цвет из изображения
Что такое HSB. Точная настройка цвета
Инструменты подбора цвета для проекта
Как работать с градиентом
Правило пропорций цвета 60/30/10

Работа с изображениями

Разница растровой и векторной графики
Выбирайте качественные изображения
Как тонировать изображения
Техника экстремальной обрезки
Техника мягкой обрезки
Работа с иконками
Как создать свою иконку
Как изменять фигуры

Основы AutoLayOut

Основы работы с AutoLayout
ПРАКТИКА. AutoLayOut

Продвинутая работа с фигурами

Как работает инструмент "pen tool"
ПРАКТИКА. "Pen tool"
Делаем следующую секцию сайта
Разница фреймов и групп

Отступы в веб дизайне

Правила отступов в веб дизайне
ПРАКТИКА. Отступы в веб дизайне
4px grid vs 8px grid

Эффекты и стили

Как работают эффекты
Как работают стили

Маски и плагины

Как работают маски
Дополнительная практика по маскам
Фигура с изображением
Как работают плагины
Доделываем сайт

Работа со шрифтами

Важность шрифтов
Типы шрифтов
Где брать новые шрифты
Как подбирать шрифты
ПРАКТИКА. Подберите шрифты
Настройки шрифта
ПРАКТИКА. Настройка шрифта

Подготовка к новому проекту

Как создавать страницы в проекте
Бриф с заказчиком
Как создавать mood board
Что такое Wireframe сайта
ПРАКТИКА. Создайте собственный mood board и wireframe

Дизайн система

Нужен ли дизайнеру Photoshop
Как приобрести лицензионный фотошоп из России
Что такое дизайн система
Делаем лист стилей для типографики
Доделываем карту стилей
ПРАКТИКА. Создайте свою дизайн систему

Компоненты и варианты в figma

Делаем следующую секцию сайта
Как работают компоненты
Организация и хранение компонентов
Как работают варианты
ПРАКТИКА. Создайте собственные варианты

Углублённая работа с AutoLayOut

Как создать подкатегории стилей
Создаем следующую секцию сайта
Как создавать многоуровневый AutoLayOut
Используйте готовые элементы из других макетов
AutoLayOut Pro версия
Делаем страницу блога
Как работают Min width / Max Width
Как работает абсолютное позиционирование
Доделываем сайт
ПРАКТИКА. Создайте дизайн сайта

Адаптивный дизайн

Основы constraints
Как работают constraints с grid
ПРАКТИКА. Constraints
Что такое адаптивный дизайн
Что такое DPI и PPI
Адаптируем первую страницу сайта
ПРАКТИКА. Адаптируйте сайт

Ускорение работы

Полезные горячие клавиши
Полезные плагины

Прототипирование

Режим презентация макета
Углубленные настройки прототипов
Базовая анимация в figma
Как работают кривые Безье
Работа open overlay & scroll to
Как работает swap overlay
Как работает After Delay
Как работает Smart Animate
Анимируем меню сайта
Прототипирование компонетов
Reset Position & Component state
Заключение блока прототипирование

Платная или Бесплатная Figma?

Отличия платной и бесплатной figma

Экспорт

Экспорт изображений
Как работать в команде

Бонус! Дизайнерские трюки

Трюки с наложением элементов друг на друга
Одинаковые элементы на странице
Трюки с повторениями
Трюки с контрастом
Трюки с пустым пространством
Как развиваться в дизайне

Бонус. Figma Jam

Что такое Figma Jam
Обновления Figma Jam

Бонус! Работа в Photoshop

Рекламная пауза
Подготовка программы
Работа со слоями в Photoshop
Расширяем границы изображений
Удаляем ненужное из фото
Как вырезать человека из одного фото и вставить его в другое
Как работают маски в фотошоп
Экспорт файлов из фотошоп
Что дальше?