Содержание пакета (2 курса)
1. Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design 4.97
Подготовка к курсу
3 урока
1.
Скачиваем материалы
↗
2.
Как проходить курс
↗
3.
Оставайтесь со мной на связи
↗
Основы Figma
11 уроков
1.
Какие размеры у сайта
↗
2.
Создаем frame сайта
↗
3.
Что такое сетка grid
↗
4.
Stretch vs Center Grid
↗
5.
Основы работы с Фигурами \ Изображениями \ Слоями
↗
6.
Основы работы с текстом
↗
7.
Заметка по платным функциям.
↗
8.
Группировка слоев и немного про режим презентации
↗
9.
Режим презентации и пара горячих клавиш
↗
10.
Как сохранять и передавать файлы Figma
↗
11.
Разница UX и UI
↗
Работа с цветом
7 уроков
1.
Подбор цвета из изображений
↗
2.
ПРАКТИКА #1 - Подберите цвет из изображения
↗
3.
Что такое HSB. Точная настройка цвета
↗
4.
Инструменты подбора цвета для проекта
↗
5.
Как работать с градиентом
↗
6.
Правило пропорций цвета 60/30/10
↗
7.
ПРАКТИКА #2 - Подберите цвета для сайта
↗
Работа с изображениями
14 уроков
1.
Разница растровой и векторной графики
↗
2.
Выбирайте качественные изображения
↗
3.
Как затемнять изображения
↗
4.
Как тонировать изображения
↗
5.
ПРАКТИКА #3 - Затонируйте изображение
↗
6.
Техника экстремальной обрезки
↗
7.
ПРАКТИКА #4 - Экстримальная обрезка
↗
8.
Техника мягкой обрезки
↗
9.
ПРАКТИКА #5 - Мягкая обрезка
↗
10.
Про иконки
↗
11.
Как создать свою иконку
↗
12.
Как работать с обводкой
↗
13.
Функции ИИ для изображений в Figma (платная Figma)
↗
14.
Используйте сторонние нейросети для изображений
↗
Основы AutoLayOut
2 урока
1.
Основы работы с AutoLayout
↗
2.
ПРАКТИКА #6 - AutoLayOut
↗
Продвинутая работа с фигурами
7 уроков
1.
Как работает инструмент "pen tool"
↗
2.
Продвинутая работа с Pen Tool
↗
3.
ПРАКТИКА #7 - "Pen tool"
↗
4.
Как создавать паттерны
↗
5.
Текст по контуру и кисти
↗
6.
Разница фреймов и групп
↗
7.
Делаем следующую секцию сайта
↗
Отступы в веб дизайне
3 урока
1.
Правила отступов в веб дизайне
↗
2.
ПРАКТИКА #8 - Отступы в веб дизайне
↗
3.
Подводим итоги про отступы
↗
Эффекты и стили
3 урока
1.
Как работают стили
↗
2.
Создаем следующую секцию сайта
↗
3.
Как работают эффекты
↗
Маски и плагины
7 уроков
1.
Как работают маски
↗
2.
Дополнительная практика по маскам
↗
3.
Делаем следующую секцию
↗
4.
Как работают плагины
↗
5.
Что такое Figma Community
↗
6.
Создаем Footer Сайта
↗
7.
Доделываем сайт
↗
Работа со шрифтами
7 уроков
1.
Важность шрифтов
↗
2.
Типы шрифтов
↗
3.
Где брать новые шрифты
↗
4.
Как подбирать шрифты
↗
5.
ПРАКТИКА #9 - Подберите шрифты
↗
6.
Настройки шрифта
↗
7.
ПРАКТИКА #10 - Настройка шрифта
↗
Подготовка к новому проекту
6 уроков
1.
Как создать обложку проекта
↗
2.
Бриф с заказчиком
↗
3.
ПРАКТИКА #11 - Travel Project
↗
4.
Как создавать mood board
↗
5.
Что такое Wireframe сайта
↗
6.
Обзор функций ИИ в Figma (платная Figma)
↗
Дизайн система
6 уроков
1.
Нужен ли дизайнеру Photoshop
↗
2.
Как приобрести лицензионный фотошоп из России
↗
3.
Что такое дизайн система
↗
4.
Делаем лист стилей
↗
5.
Исправляю небольшую проблему со стилями
↗
6.
ПРАКТИКА #12 - Создайте свою дизайн систему
↗
Компоненты и варианты в figma
5 уроков
1.
Делаем следующую секцию сайта
↗
2.
Как работают компоненты
↗
3.
Как работают варианты
↗
4.
Подводим итоги Варианты
↗
5.
ПРАКТИКА #13 - Создайте собственные варианты
↗
Углублённая работа с AutoLayOut
9 уроков
1.
Создаем следующую секцию сайта
↗
2.
Как работает GRID AutoLayOut
↗
3.
AutoLayOut Pro версия
↗
4.
Создаем следующую секцию сайта
↗
5.
Делаем страницу блога
↗
6.
Создаем карточку блога
↗
7.
Как работают Min width / Max Width
↗
8.
Создаем варианты карточки блога
↗
9.
ПРАКТИКА #14 - Создайте дизайн сайта
↗
Адаптивный дизайн
7 уроков
1.
Основы constraints
↗
2.
Как работают constraints с grid layout
↗
3.
ПРАКТИКА #15 - Constraints
↗
4.
Что такое адаптивный дизайн
↗
5.
Что такое DPI и PPI
↗
6.
Адаптируем первую страницу сайта
↗
7.
ПРАКТИКА #16 - Адаптируйте сайт
↗
Ускорение работы
1 урок
1.
Полезные горячие клавиши
↗
Прототипирование
13 уроков
1.
Предисловие к блоку
↗
2.
Режим презентация макета
↗
3.
Углубленные настройки прототипов
↗
4.
Базовая анимация в figma
↗
5.
Как работают кривые Безье
↗
6.
Работа open overlay & scroll to
↗
7.
Как работает swap overlay
↗
8.
Как работает After Delay
↗
9.
Как работает Smart Animate
↗
10.
Анимируем меню сайта
↗
11.
Прототипирование компонетов
↗
12.
Reset Position & Component state
↗
13.
Заключение блока прототипирование
↗
Платная или Бесплатная Figma?
1 урок
1.
Отличия платной и бесплатной figma
↗
Экспорт
2 урока
1.
Экспорт изображений
↗
2.
Как работать в команде
↗
AI & Buzz & Sites & Slides
5 уроков
1.
Обзор Figma Make
↗
2.
Обзор Figma Site
↗
3.
Обзор Figma Buzz
↗
4.
Обзор Figma Slides
↗
5.
Обзор Figma Jam
↗
Бонус! Работа в Photoshop
9 уроков
1.
Рекламная пауза
↗
2.
Подготовка программы
↗
3.
Работа со слоями в Photoshop
↗
4.
Расширяем границы изображений
↗
5.
Удаляем ненужное из фото
↗
6.
Как вырезать человека из одного фото и вставить его в другое
↗
7.
Как работают маски в фотошоп
↗
8.
Экспорт файлов из фотошоп
↗
9.
Что дальше?
↗
Что дальше?
2 урока
1.
Моя книга по UX-Исследования
↗
2.
До свидания!
↗
Получите ваш сертификат
1 урок
1.
Тест для получения сертификата об окончании курса
↗
2. Веб дизайн в Figma. Профессиональное прототипирование и анимация 4.97
Подготовка
3 урока
1.
О чем этот курс
↗
2.
Скачиваем материалы для курса
↗
3.
Оставайтесь со мной на связи
↗
Введение в прототипирование (Новая версия курса)
3 урока
1.
Создаем первую анимацию
↗
2.
Настройки вкладки Prototype
↗
3.
Основные настройки анимирования
↗
Motion design.
15 уроков
1.
Об обновлении интерфейса (Смотреть опционально)
↗
2.
О чем этот блок
↗
3.
Создаем первую анимацию
↗
4.
Как работают анимации в Figma
↗
5.
Что такое кривые Безье
↗
6.
Анимируем мобильное приложение "Фото-сток"
↗
7.
Практика. Создайте собственную анимацию в проекте "Фото-сток".
↗
8.
Пример преподавателя. Создаем анимацию в проекте "Фото-сток".
↗
9.
Как создать Parallax Effect
↗
10.
Создаем анимацию гамбургера
↗
11.
Создаем анимацию загрузки страницы
↗
12.
Как работают Flows в прототипах. Организация страниц в проекте.
↗
13.
Как создать анимацию "темной" и "светлой" темы через кнопку
↗
14.
Как создать обложку проекту
↗
15.
Практика. Создайте свой Parallax Effect
↗
Базовые настройки прототипов (Новая версия курса)
6 уроков
1.
Как работает настройка скроллинга
↗
2.
Как работают Fixed & Sticky
↗
3.
Анимируем приложение
↗
4.
Подробно про настройку open overlay
↗
5.
Поведение анимации во времени (Кривые)
↗
6.
Создаем анимацию nav menu
↗
Использование "вариантов" в анимациях
15 уроков
1.
О чем этот блок
↗
2.
Что такое "Варианты в figma"
↗
3.
Как использовать "варианты" в анимациях
↗
4.
Кнопка быстрого доступа к "вариантам"
↗
5.
Как тестировать ваш макет на мобильном девайсе
↗
6.
Как работает spinner. Анимируем текст
↗
7.
Как создать анимацию как на сайте apple
↗
8.
Как запустить видео файл в figma
↗
9.
Как использовать GIF в своих проектах. Сток анимированных иконок
↗
10.
Практика. Создайте анимацию "360 градусов"
↗
11.
Пример преподавателя. Как создать анимацию "360 градусов "
↗
12.
Обновление 2023. Как работают переменные.
↗
13.
Обновления 2023. Обновления Auto Layout
↗
14.
Обновления 2023. Прототипирование + переменные
↗
15.
Обновления 2023. Куда делась вкладка Inspect!?
↗
Компоненты и варианты в прототипировании (Новая версия курса)
6 уроков
1.
Как работают компоненты
↗
2.
Как работают варианты
↗
3.
Как работает swap instance
↗
4.
Знакомство с переменными
↗
5.
Особенности вариантов в прототипировании
↗
6.
Прототипирование варинтами меню
↗
Создание анимаций через плагин Motion Plugin
3 урока
1.
Как работает плагин Motion Plugin
↗
2.
Используем плагин вместе с масками
↗
3.
Экспорт анимации из плагина
↗
Компоненты в анимировании (Новая версия курса)
6 уроков
1.
Создаем прелоадер приложения
↗
2.
Прелоадер с помощью вариантов
↗
3.
Создаем пралакс эффект часть 1
↗
4.
Создаем пралакс эффект часть 2
↗
5.
Два действия на один триггер
↗
6.
Делаем еще один параллакс эффект
↗
Современные стили. Градиент / Стекло / 3D
11 уроков
1.
Как создать анимацию градиента
↗
2.
Как работают режимы наложения
↗
3.
Создаем эффект "Paper Cut" с градиентом
↗
4.
Как создать эффект "стекла"
↗
5.
Как сделать эффект "стекла" более объемным
↗
6.
Как создавать собственные стеклянные иконки
↗
7.
Как превратить обычную иконку в стеклянную
↗
8.
Практика. Создайте собственный эффект стекла
↗
9.
Как создавать эффект 3D из обычных элементов
↗
10.
Как создать иконку в стиле 3D
↗
11.
Создаем 3D элементы на стартовой странице сайта
↗
Главные правила UX - пользовательского опыта
13 уроков
1.
О чем этот блок
↗
2.
Что такое дизайн
↗
3.
Главное правило. Не заставляйте людей думать
↗
4.
Как люди на самом деле используют браузер
↗
5.
Привычки пользователей и как извлекать из них выгоду
↗
6.
Выбор без размышлений
↗
7.
Сокращайте текст
↗
8.
Практика. Сделайте простым и удобным
↗
9.
Пример преподавателя. Сделайте простым и удобным
↗
10.
Используйте навигацию на сайте
↗
11.
Все мы разные
↗
12.
Проводите тестирование
↗
13.
Заключение. Постулаты хорошего веб дизайна
↗
Видео и 3D-анимация (Новая версия курса)
3 урока
1.
Разница между платной и бесплатной версиями Figma
↗
2.
Покадровое прототипирование видео
↗
3.
3D Анимация
↗
Что дальше?
2 урока
1.
Моя книга по UX-Исследованиям
↗
2.
До новых встреч!
↗
Профессиональное использование переменных (Новая версия курса)
4 урока
1.
Создаем переменные цвета
↗
2.
Что такое токены и alias
↗
3.
Создаем токены для всех свойств
↗
4.
Тёмная и светлая тема в один клик
↗
Прототипирование переменных (Новая версия курса)
8 уроков
1.
Как оплатить Figma из России
↗
2.
Как работает режим Set Variable
↗
3.
Прототипирование табов с помощью переменных
↗
4.
Изменение нескольких переменных одновременно
↗
5.
Как работает условное ветвление (IF/ELSE)
↗
6.
Финальная практика
↗
7.
Пример преподавателя часть 1
↗
8.
Пример преподавателя часть 2
↗
Получите ваш сертификат
1 урок
1.
Тест для получения сертификата об окончании курса
↗
Бонус: дополнительные анимации (Новая версия курса)
6 уроков
1.
Анимация градиента
↗
2.
Как работают режимы наложения
↗
3.
Как работает Paper Cut Effect
↗
4.
Как создать эффект 3D
↗
5.
Создаем объемную иконку Figma
↗
6.
Создаем 3D элементы
↗