Stepik Веб дизайн в Figma — Продвинутый уровень | Самостоятельный курс
О курсе
Подробнее
Эта версия курса без поддержки автора.
Эта версия курса предназначена для самостоятельного изучения. В ней есть заранее подготовленные ответы к домашним заданиям, но нет подробной проверки работ и моей личной обратной связи.
Если вы ищете этот же курс с поддержкой и обратной связью, загляните в мой профиль
Я рад пригласить вас на курс «Веб-дизайн в Figma. Продвинутый уровень» — большой практический курс, посвящённый современному веб-дизайну, визуальному стилю и правилам, по которым создают сайты профессионалы.
Здесь мы говорим не о кнопках Figma — а о современных правилах дизайна.
О том, как сделать работу сильной визуально, логически продуманной, структурированной и современной.
Полное погружение в правила веб-дизайна
Вы разберёте десятки правил и подходов, которые используют профессиональные веб-дизайнеры:
типографика и текстовая иерархия,
сетки и направляющие,
композиция и модульность,
работа с цветом, контрастом и акцентами,
отступы, ритм и визуальный порядок в макете,
тени, скругления, эффекты и консистентность.
и многое другое
Вы научитесь понимать, почему макет выглядит хорошо или плохо, и логически объяснять, что нужно исправить.
Современные техники и визуальное мышление
В курсе мы разбираем:
как развивать насмотренность,
как работать с референсами,
как создавать оригинальные концепции сайтов,
как переносить идею в визуальную структуру,
как не скатываться в шаблоны и делать действительно креативные решения.
Нейросети в веб дизайне
Помимо правил дизайна вы узнаете: как применять Midjourney и Adobe Firefly в веб-дизайне, как использовать AI для генерации стилей, идей и визуальных решений, где нейросети помогают, а где могут навредить.
Поговорим про ИИ честно, без хайпа, с пониманием того, где они действительно помогают, а где — нет.
В курс входит:
100+ видеоуроков по конкретным правилам дизайна;
интерактивная методичка на 300+ слайдов со всеми правилами, примерами и схемами;
рабочая тетрадь студента с практическими заданиями;
упражнения, демонстрации, полноценные разборы.
2 больших проекта у много практики
Каждую тему мы закрепляем практикой — вы не просто смотрите уроки, вы нарабатываете опыт на реальных задачах.
Вместе вместе мы создадим 2 больших проекта для портфолио:
— Креативный сайт для реального заказчика, выполненный в современном визуальном стиле.
— Редизайн существующего сайта, где вы
Гарантия качества
И, конечно, действует гарантия 30 дней.
Если курс вам не подойдёт — вы сможете вернуть 100% стоимости без каких-либо вопросов.
До встречи на уроках!
Требования
Что нужно для старта
- Необходимы базовые знания программы Figma (Знание программы Figma)
Результат
Что вы получите
- Научитесь создавать современные и стильные макеты сайтов
- Изучите десятки правил современного веб-дизайна
- Научитесь применять правила веб-дизайна на практике в реальных задачах
- Научитесь строить сетки и направляющие для структуры макета
- Научитесь настраивать отступы, ритм и визуальный порядок в макете
- Изучите методы работы с типографикой
- Изучите правила композиции в веб-дизайне
- Научитесь создавать аккуратные и модульные композиции
- Изучите методы работы с цветом: палитры, контраст, акценты
- Научитесь использовать тени, скругления и эффекты корректно и профессионально
- Изучите правила консистентного дизайна
- Научитесь анализировать дизайн логически и находить ошибки
- Научитесь развивать насмотренность и работать с референсами
- Научитесь создавать оригинальные концепции сайтов с нуля
- Научитесь применять ИИ Midjourney и Adobe Firefly в веб-дизайне
- Создадите 2 проекта для портфолио
Аудитория
Для кого этот курс
- Для начинающих веб-дизайнеров
- Для тех, кто изучил основы программы Figma, но хочет улучшить дизайн своих работ
- Для веб-разработчиков
Содержание
16 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- О чем курс
- Скачайте материалы к курсу
- Это мультиязычный курс
- Как проходить курс
- Как задавать вопросы
- Оставайтесь со мной на связи!
02Типографика
- Консистентность — это самое главное
- Самый первый UX\UI в мире
- Правильные настройки текста в веб-дизайне
- Типы шрифтов
- Как выбрать шрифт для проекта
- Как креативно форматировать текст
- Как форматировать текст в Figma
- Практика #1 — Отформатируйте текст красиво
- Что такое глифы
- Подводим итоги раздела
03Насмотренность и вдохновение
- Дилема дизайнера
- Ресурсы для насмотренности
- Плагины для насмотренности
- Стили сайтов в веб-дизайне
- Используйте нейросети для насмотренности
04Сетки и направляющие
- Типы сеток
- Создайте неудобную сетку
- Анализируйте чужие сетки
- Итоги — Типографика и сетки
- Практика # 2 — Разместите контент в сетке
- Практика # 2 — Выполненная ч. 1
- Практика # 2 — Выполненная ч. 2
05Первый проект
- Задача и описание проекта
- Дополнение. Где брать фото
- Создаем модульную сетку
- Создаем Hero Section, часть 1
- Создаем Hero Section, часть 2
- Создаем вторую секцию сайта
- Создаем третью секцию сайта
- Делаем первый баннер
- Создаем четвертую секцию сайта
- Делаем второй баннер
- Делаем пятую секцию
- Создаем шестую секцию
- Создаем footer сайта
- Меняем шрифт и делаем навигационное меню
- Завершаем сайт
06Отступы
- Правило прямого угла
- Какие отступы использовать?
- Использование пустого пространства в дизайне
07Визуальная иерархия
- Что такое визуальная иерархия
- Уровни визуальной иерархии
- Какой элемент важнее
- Как использовать серый цвет
- Делайте наоборот. Уберите акценты с ненужного
- Практика # 3 — Настройте визуальную иерархию
- Практика #3 — Выполненная ч. 1
- Практика #3 — Выполненная ч. 2
08Границы и скругление элементов
- Каким должено быть скругление углов
- Консистентное скругление углов
09Цвет
- Проблема подхода 60·30·10
- Как создавать цветовую шкалу
- Создаем шкалу на практике
- Правило 60·30·10 и шкала цвета
- Необязательно использовать только 3 цвета
- Используйте системные цвета
- Используйте холодный или теплый серый
- Цветовые ассоциации
- Как использовать градиент в дизайне
- Пара советов по работе с цветом
- ИИ Цвет
- Практика # 4 — Примените цвет к макету
- Практика # 4 — Выполненная ч.1
- Практика # 4 — Выполненная ч.2
10Изображения
- Как размещать текст на изображениях
- Какие изображения использовать
- Как работать с иконками
- Как использовать скриншоты в дизайне
11Искусственный интеллект в изображениях
- Про ИИ-изображения
- Функционал и цены на ИИ
- Удаление заднего фона с помощью ИИ
- Удаление объектов с помощью ИИ
- Расширение границ изображений с помощью ИИ
- Увеличение разрешения изображения с помощью ИИ
- Редактирование изображений с помощью ИИ
- Гармонизация изображений с помощью ИИ
- Генерация изображений
- Дополнительные возможности ИИ
12Тени
- О тенях
- Техники и приемы работы с тенями
- Практика # 5 — Применяем эффекты теней правильно
13Мобильный дизайн
- Особенности мобильного дизайна
- Размер текста на мобильных устройствах
- Размеры и выравнивание элементов
- Практика # 6 — Адаптируйте первый проект
- Практика # 6 — Выполненная ч. 1
- Практика # 6 — Выполненная ч. 2
- Практика # 6 — Выполненная ч. 3
14Визуальные приемы в дизайне
- О визуальных приёмах
- Полезные ресурсы для веб-дизайнеров
15Второй проект – Редизайн сайта
- Обзор и задачи проекта
- Подготовка и поиск референсов
- Создаём Hero Section
- Создаем навигационное меню
- Создаем декоративные линии
- Создаем вторую секцию сайта, ч. 1
- Создаем вторую секцию сайта, ч. 2
- Создаем третью секцию сайта
- Создаем четвертую секцию сайта
- Создаем форму для сайта
- Создаем footer для сайта
- Завершаем сайт
16Заключение
- Моя книга по UX-Исследованиям
- Тест для получения сертификата
01Введение
- О чем курс
- Скачайте материалы к курсу
- Это мультиязычный курс
- Как проходить курс
- Как задавать вопросы
- Оставайтесь со мной на связи!
02Типографика
- Консистентность — это самое главное
- Самый первый UX\UI в мире
- Правильные настройки текста в веб-дизайне
- Типы шрифтов
- Как выбрать шрифт для проекта
- Как креативно форматировать текст
- Как форматировать текст в Figma
- Практика #1 — Отформатируйте текст красиво
- Что такое глифы
- Подводим итоги раздела
03Насмотренность и вдохновение
- Дилема дизайнера
- Ресурсы для насмотренности
- Плагины для насмотренности
- Стили сайтов в веб-дизайне
- Используйте нейросети для насмотренности
04Сетки и направляющие
- Типы сеток
- Создайте неудобную сетку
- Анализируйте чужие сетки
- Итоги — Типографика и сетки
- Практика # 2 — Разместите контент в сетке
- Практика # 2 — Выполненная ч. 1
- Практика # 2 — Выполненная ч. 2
05Первый проект
- Задача и описание проекта
- Дополнение. Где брать фото
- Создаем модульную сетку
- Создаем Hero Section, часть 1
- Создаем Hero Section, часть 2
- Создаем вторую секцию сайта
- Создаем третью секцию сайта
- Делаем первый баннер
- Создаем четвертую секцию сайта
- Делаем второй баннер
- Делаем пятую секцию
- Создаем шестую секцию
- Создаем footer сайта
- Меняем шрифт и делаем навигационное меню
- Завершаем сайт
06Отступы
- Правило прямого угла
- Какие отступы использовать?
- Использование пустого пространства в дизайне
07Визуальная иерархия
- Что такое визуальная иерархия
- Уровни визуальной иерархии
- Какой элемент важнее
- Как использовать серый цвет
- Делайте наоборот. Уберите акценты с ненужного
- Практика # 3 — Настройте визуальную иерархию
- Практика #3 — Выполненная ч. 1
- Практика #3 — Выполненная ч. 2
08Границы и скругление элементов
- Каким должено быть скругление углов
- Консистентное скругление углов
09Цвет
- Проблема подхода 60·30·10
- Как создавать цветовую шкалу
- Создаем шкалу на практике
- Правило 60·30·10 и шкала цвета
- Необязательно использовать только 3 цвета
- Используйте системные цвета
- Используйте холодный или теплый серый
- Цветовые ассоциации
- Как использовать градиент в дизайне
- Пара советов по работе с цветом
- ИИ Цвет
- Практика # 4 — Примените цвет к макету
- Практика # 4 — Выполненная ч.1
- Практика # 4 — Выполненная ч.2
10Изображения
- Как размещать текст на изображениях
- Какие изображения использовать
- Как работать с иконками
- Как использовать скриншоты в дизайне
11Искусственный интеллект в изображениях
- Про ИИ-изображения
- Функционал и цены на ИИ
- Удаление заднего фона с помощью ИИ
- Удаление объектов с помощью ИИ
- Расширение границ изображений с помощью ИИ
- Увеличение разрешения изображения с помощью ИИ
- Редактирование изображений с помощью ИИ
- Гармонизация изображений с помощью ИИ
- Генерация изображений
- Дополнительные возможности ИИ
12Тени
- О тенях
- Техники и приемы работы с тенями
- Практика # 5 — Применяем эффекты теней правильно
13Мобильный дизайн
- Особенности мобильного дизайна
- Размер текста на мобильных устройствах
- Размеры и выравнивание элементов
- Практика # 6 — Адаптируйте первый проект
- Практика # 6 — Выполненная ч. 1
- Практика # 6 — Выполненная ч. 2
- Практика # 6 — Выполненная ч. 3
14Визуальные приемы в дизайне
- О визуальных приёмах
- Полезные ресурсы для веб-дизайнеров
15Второй проект – Редизайн сайта
- Обзор и задачи проекта
- Подготовка и поиск референсов
- Создаём Hero Section
- Создаем навигационное меню
- Создаем декоративные линии
- Создаем вторую секцию сайта, ч. 1
- Создаем вторую секцию сайта, ч. 2
- Создаем третью секцию сайта
- Создаем четвертую секцию сайта
- Создаем форму для сайта
- Создаем footer для сайта
- Завершаем сайт
16Заключение
- Моя книга по UX-Исследованиям
- Тест для получения сертификата
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Веб дизайн в Figma — Продвинутый уровень | Самостоятельный курс» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
