Веб Дизайн в Figma 2024. Основы Ui Ux дизайна на практике

Course Curriculum

Chapter 1: Введение

Lecture 1: Введение

Lecture 2: Организационный Урок

Chapter 2: Знакомство с Figma. Простые инструменты

Lecture 1: О чем этот модуль

Lecture 2: Скорость видео

Lecture 3: Скачать Figma и зарегистрироваться в программе

Lecture 4: Обзор интерфейса программы

Lecture 5: Команды в Figma

Lecture 6: Сохранение и передача файла

Lecture 7: Горячие клавиши

Lecture 8: Move tool, Scale tool

Lecture 9: Выравнивание объектов

Lecture 10: Прямоугольник

Lecture 11: Математика в Figma

Lecture 12: Работа с цветом в Figma

Lecture 13: Инструмент "Овал". + ДЗ

Lecture 14: Практика. Решение задачи по инструменту Arc

Lecture 15: Полигон + Звезда

Lecture 16: Обводка

Lecture 17: Линия

Lecture 18: Заливка + градинет

Lecture 19: Практика. Заливка, градиент, обводка

Lecture 20: Изображения

Lecture 21: Эффекты

Lecture 22: Маска

Lecture 23: Экспорт

Lecture 24: Перо

Lecture 25: Инструмент "Текст"

Lecture 26: Про PNG

Lecture 27: Группа

Lecture 28: Frame

Lecture 29: Секция

Lecture 30: Булевы группы

Lecture 31: Эффекты наложения

Lecture 32: Экспорт

Lecture 33: Направляющие и линейка

Lecture 34: Selection colors

Lecture 35: Комьюнити

Lecture 36: Плагины

Lecture 37: Практика. Контрольные проекты

Lecture 38: Решение задачи На работу с текстом и цветом

Lecture 39: Решение задачи На работу с маской и плагинами

Lecture 40: Решение задачи На работу с маской и эффектами наложения

Chapter 3: Продвинутые инструменты Figma

Lecture 1: Стили. Цвет

Lecture 2: Практика. Стили. Текст

Lecture 3: Стили. Эффекты

Lecture 4: Constraints (Ограничения/привязки) Часть 1

Lecture 5: Constraints (Ограничения/привязки) Часть 2

Lecture 6: Сетки. Часть 1

Lecture 7: Практика. Работа с сетками и привязками

Lecture 8: Практика. Работа с сетками и привязками Урок 2

Lecture 9: Практика. Работа с сетками и привязками Урок 3

Lecture 10: Auto Layout Урок 1

Lecture 11: Auto Layout базовые настройки

Lecture 12: Auto Layout Примеры использования

Lecture 13: Практика Auto Layout. Сложный пример работы

Lecture 14: Практика Auto Layout Делаем адаптив

Lecture 15: Практика Auto Layout Адаптив блока с карточками

Lecture 16: Компоненты

Lecture 17: Компоненты. Удобная организация

Lecture 18: Компоненты. Свойства компонентов

Lecture 19: Компоненты. Варианты компонентов

Lecture 20: Переменные

Lecture 21: Переменные. Зона видимости

Lecture 22: ПРАКТИКА Переменные. Организация переменных

Lecture 23: Продвинутая Figma

Lecture 24: Обратная связь

Chapter 4: Практика работы в Figma

Lecture 1: Основа атомарного дизайна

Lecture 2: Анализ проекта

Lecture 3: Создание токенов. Текст

Lecture 4: Создание токенов. Цвет

Lecture 5: Создание атомов. Иконки

Lecture 6: Создание молекул

Lecture 7: Создание организмов. Хедер

Lecture 8: ПРАКТИКА Создание организмов. Сайд Бар

Lecture 9: Создание организмов. Виджет Юзера

Lecture 10: ПРАКТИКА Создание организмов. Виджет Группа

Lecture 11: Создание виджета. Пост

Lecture 12: ПРАКТИКА Создание организмов Виджет Пост 2

Lecture 13: Последний урок модуля

Lecture 14: откуда черпать вдохновение

Chapter 5: Теория веб дизайна

Lecture 1: Типографика

Lecture 2: Типографика практика + ДЗ

Lecture 3: Сетки и направляющие в дизайне

Lecture 4: Теория цвета

Lecture 5: Где брать картинки для веб дизайна

Lecture 6: Как подбирать картинки для проектов

Lecture 7: Выравнивание объектов

Lecture 8: Правило внутреннего и внешнего

Lecture 9: Иерархия в веб дизайне

Chapter 6: Практика. Создание дизайн концепции сайта(Шот)

Lecture 1: Что такое дизайн концепт

Lecture 2: Практика создания дизайн концепта сайта

Chapter 7: Практика. Создание Лендинга. Бюджет 250$

Lecture 1: Техническое задание проекта(ТЗ)