Веб-дизайн в Figma 2024. Основы UI/UX дизайна на практике.

- Скорость видео
- Скачать Figma и зарегистрироваться в программе
- Структура файлов
- Обзор интерфейса программы
- Сохранение и передача файла
- Горячие клавиши
- Move tool, Scale tool
- Выравнивание объектов
- Прямоугольник
- Полигон + Звезда
- Обводка
- Заливка + градинет
- Изображения
- Эффекты
- Маска
- Перо
- Инструмент "Текст"
- Группа
- Frame
- Булевы группы
- Экспорт
- Комьюнити
- Плагины
- Selection colors
- Команды в Figma
- Линия
- Математика в Figma
- Работа с цветом
- ПРАКТИКА Овал
- Решение задачи по инструменту ARC
- ПРАКТИКА Заливка градиент обводка
- Про PNG
- Секция
- Режимы наложения
- Направляющие и Линейка
- ПРАКТИКА. Контрольные проекты
- Решение задачи на работу с текстом
- Решение задачи на работу с маской
- Решение задачи на работу с эффектами наложения
- О чем этот модуль

- Стили. Цвет
- Constraints (Ограничения/привязки) Часть 1
- Constraints (Ограничения/привязки) Часть 2
- Сетки. Часть 1
- ПРАКТИКА. Работа с сетками и привязками Часть 1
- Auto Layout
- Auto Layout. Базовые настройки
- Auto Layout. Примеры использования
- Компоненты
- Компоненты. Удобная организация
- Компоненты. Свойства компонентов
- Компоненты. Варианты компонентов
- Переменные
- Переменные. Зона видимости
- ПРАКТИКА. Стили Текст
- Стили. Эффект
- ПРАКТИКА. Работа с сетками и привязками Часть 2
- ПРАКТИКА. Работа с сетками и привязками Часть 3
- ПРАКТИКА. Auto Layout Сложный пример работы
- ПРАКТИКА. Auto Layout делаем адаптив
- ПРАКТИКА. Auto Layout Адаптив блока с карточками
- ПРАКТИКА Переменные. Организация переменныех

- Основа атомарного дизайна
- Анализ проекта
- Создание токенов. Текст
- Создание атомов. Иконки
- Создание токенов. Цвет
- Создание молекул
- Создание организмов. Хедер
- ПРАКТИКА Создание организмов. Сайд Бар
- Создание организмов. Виджет Юзера
- ПРАКТИКА Создание организмов. Виджет Группа
- Создание виджета. Пост
- ПРАКТИКА Создание организмов Виджет Пост 2
- Последний урок модуля

- Типографика
- Типографика + дз
- Тест по типографике
- Сетки и направляющие
- Теория цвета
- Где брать картинки для веб дизайна
- Как подбирать картинки для проектов
- Выравнивание объектов
- Правило внутреннего и внешнего
- Иерархия в веб дизайне

- Что такое дизайн концепт
- Практика создания дизайн концепта сайта

- Техническое задание проекта(ТЗ)
- UX Часть нашего проекта
- Подробнее о брифах
- Порядок выполнения проекта
- Определение целевой аудитории
- Аналитика конкурентов
- Создание прототипа сайта. Теория
- Создание прототипа сайта. Практика
- Создание концепта сайта
- Создаем блоки с информацией
- Создаем блок тарифов, форму связи и футер
- Работа со слоями. Доработка дизайна.
- Адаптив дизайна под планшет
- Создание мобильной версии дизайна
- Создание модальных окон + ДЗ
- Готовим работу к верстке. Стайл Гайд + ДЗ
- Этапы работы над проектом на фрилансе
- Создание личного кабинета

- Получение ТЗ
- Создание концепта интернет магазина
- Создание основных блоков главной страницы
- Создание рекламного баннера и формы подписки
- Создание футера
- Проверка дизайна главной
- Страница выдачи товара
- Создание страницы товара. Карточка товара
- Создание модального окна
- Создание корзины
- Создаем страницу оплаты

- Введение в прототипирование в Figma
- Создание кликабельного макета

- Адаптация главной
- Адаптив страницы выдачи товаров
- Адаптив карточки товара + ДЗ
- Адаптив корзины
- Адаптив страницы оплаты
- Создаем открытое меню в мобильной версии сайта
- Проверка на ошибки

- Создание стайл гайда

- Обзор кейсов
- Оформление кейса по лендингу
- Презентация кейса

- Где и как искать работу Веб дизайнеру
- Не очевидные способы способы дохода для веб дизайнера