Курс на Stepik
Обложка курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» на Stepik
8 490 ₽

Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора ★ 5.000

Открыть на
STEPIK.ORG

Освойте правила современного веб-дизайна и создавайте профессиональные макеты в Figma. (Бонус: использование нейросетей в дизайне) Курс с проверкой всех домашних заданий и двух проектов автором.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Учеников на курсе 27
Сертификаты, выданные на курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Сертификатов выдано 2
Отзывы о курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Отзывов получено 2
Рейтинг курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Рейтинг курса 5.000
Уроки в курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Количество уроков 111
Тесты в курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Количество квизов 1
Время прохождения курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Время прохождения курса —
Стоимость курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Стоимость курса 8 490 ₽ —
Обновления курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Обновления курса — —
Дата публикации курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Дата публикации курса — ———
Последнее обновление курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора»Последнее обновление — ———
Сложность normal — ———

Содержание курса

Разделы в курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» 16 разделов Уроки в курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» 111 уроков Тесты в курсе «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» 1 тест Время прохождения курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» 13 ч. Последнее обновление курса «Веб дизайн в Figma — Продвинутый уровень | С поддержкой автора» обн. 17 мая 2026

Введение

7 уроков
1. Этот курс с поддержкой автора ↗
2. О чем курс ↗
3. Скачайте материалы к курсу ↗
4. Это мультиязычный курс ↗
5. Как проходить курс ↗
6. Как задавать вопросы ↗
7. Оставайтесь со мной на связи! ↗

Типографика

10 уроков
1. Консистентность — это самое главное ↗
2. Самый первый UX\UI в мире ↗
3. Правильные настройки текста в веб-дизайне ↗
4. Типы шрифтов ↗
5. Как выбрать шрифт для проекта ↗
6. Как креативно форматировать текст ↗
7. Как форматировать текст в Figma ↗
8. Практика #1 — Отформатируйте текст красиво ↗
9. Что такое глифы ↗
10. Подводим итоги раздела ↗

Насмотренность и вдохновение

5 уроков
1. Дилема дизайнера ↗
2. Ресурсы для насмотренности ↗
3. Плагины для насмотренности ↗
4. Стили сайтов в веб-дизайне ↗
5. Используйте нейросети для насмотренности ↗

Сетки и направляющие

7 уроков
1. Типы сеток ↗
2. Создайте неудобную сетку ↗
3. Анализируйте чужие сетки ↗
4. Итоги — Типографика и сетки ↗
5. Практика # 2 — Разместите контент в сетке ↗
6. Практика # 2 — Выполненная ч. 1 ↗
7. Практика # 2 — Выполненная ч. 2 ↗

Первый проект

15 уроков
1. Задача и описание проекта ↗
2. Дополнение. Где брать фото ↗
3. Создаем модульную сетку ↗
4. Создаем Hero Section, часть 1 ↗
5. Создаем Hero Section, часть 2 ↗
6. Создаем вторую секцию сайта ↗
7. Создаем третью секцию сайта ↗
8. Делаем первый баннер ↗
9. Создаем четвертую секцию сайта ↗
10. Делаем второй баннер ↗
11. Делаем пятую секцию ↗
12. Создаем шестую секцию ↗
13. Создаем footer сайта ↗
14. Меняем шрифт и делаем навигационное меню ↗
15. Завершаем сайт ↗

Отступы

3 урока
1. Правило прямого угла ↗
2. Какие отступы использовать? ↗
3. Использование пустого пространства в дизайне ↗

Визуальная иерархия

8 уроков
1. Что такое визуальная иерархия ↗
2. Уровни визуальной иерархии ↗
3. Какой элемент важнее ↗
4. Как использовать серый цвет ↗
5. Делайте наоборот. Уберите акценты с ненужного ↗
6. Практика # 3 — Настройте визуальную иерархию ↗
7. Практика #3 — Выполненная ч. 1 ↗
8. Практика #3 — Выполненная ч. 2 ↗

Границы и скругление элементов

2 урока
1. Каким должено быть скругление углов ↗
2. Консистентное скругление углов ↗

Цвет

14 уроков
1. Проблема подхода 60·30·10 ↗
2. Как создавать цветовую шкалу ↗
3. Создаем шкалу на практике ↗
4. Правило 60·30·10 и шкала цвета ↗
5. Необязательно использовать только 3 цвета ↗
6. Используйте системные цвета ↗
7. Используйте холодный или теплы серый ↗
8. Цветовые ассоциации ↗
9. Как использовать градиент в дизайне ↗
10. Пара советов по работе с цветом ↗
11. ИИ Цвет ↗
12. Практика # 4 — Примените цвет к макету ↗
13. Практика # 4 — Выполненная ч.1 ↗
14. Практика # 4 — Выполненная ч.2 ↗

Изображения

4 урока
1. Как размещать текст на изображениях ↗
2. Какие изображения использовать ↗
3. Как работать с иконками ↗
4. Как использовать скриншоты в дизайне ↗

Искусственный интеллект в изображениях

10 уроков
1. Про ИИ-изображения ↗
2. Функционал и цены на ИИ ↗
3. Удаление заднего фона с помощью ИИ ↗
4. Удаление объектов с помощью ИИ ↗
5. Расширение границ изображений с помощью ИИ ↗
6. Увеличение разрешения изображения с помощью ИИ ↗
7. Редактирование изображений с помощью ИИ ↗
8. Гармонизация изображений с помощью ИИ ↗
9. Генерация изображений ↗
10. Дополнительные возможности ИИ ↗

Тени

3 урока
1. О тенях ↗
2. Техники и приемы работы с тенями ↗
3. Практика # 5 — Применяем эффекты теней правильно ↗

Мобильный дизайн

7 уроков
1. Особенности мобильного дизайна ↗
2. Размер текста на мобильных устройствах ↗
3. Размеры и выравнивание элементов ↗
4. Практика # 6 — Адаптируйте первый проект ↗
5. Практика # 6 — Выполненная ч. 1 ↗
6. Практика # 6 — Выполненная ч. 2 ↗
7. Практика # 6 — Выполненная ч. 3 ↗

Визуальные приемы в дизайне

2 урока
1. О визуальных приёмах ↗
2. Полезные ресурсы для веб-дизайнеров ↗

Второй проект – Редизайн сайта

12 уроков
1. Обзор и задачи проекта ↗
2. Подготовка и поиск референсов ↗
3. Создаём Hero Section ↗
4. Создаем навигационное меню ↗
5. Создаем декоративные линии ↗
6. Создаем вторую секцию сайта, ч. 1 ↗
7. Создаем вторую секцию сайта, ч. 2 ↗
8. Создаем третью секцию сайта ↗
9. Создаем четвертую секцию сайта ↗
10. Создаем форму для сайта ↗
11. Создаем footer для сайта ↗
12. Завершаем сайт ↗

Заключение

2 урока
1. Моя книга по UX-Исследованиям ↗
2. Тест для получения сертификата ↗