Скачать [Stepik] Веб дизайн в Figma 2025. Продвинутый уровень [Дмитрий Фокеев]

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

Чему вы научитесь:

• Научитесь создавать современные и стильные макеты сайтов
• Изучите десятки правил современного веб-дизайна
• Научитесь применять правила веб-дизайна на практике в реальных задачах
• Научитесь строить сетки и направляющие для структуры макета
• Научитесь настраивать отступы, ритм и визуальный порядок в макете
• Изучите методы работы с типографикой
• Изучите правила композиции в веб-дизайне
• Научитесь создавать аккуратные и модульные композиции
• Изучите методы работы с цветом: палитры, контраст, акценты
• Научитесь использовать тени, скругления и эффекты корректно и профессионально
• Изучите правила консистентного дизайна
• Научитесь анализировать дизайн логически и находить ошибки
• Научитесь развивать насмотренность и работать с референсами
• Научитесь создавать оригинальные концепции сайтов с нуля
• Научитесь применять ИИ Midjourney и Adobe Firefly в веб-дизайне
• Создадите 2 проекта для портфолио

Для кого этот курс:

Для начинающих веб-дизайнеров Для тех, кто изучил основы программы Figma, но хочет улучшить дизайн своих работ Для веб-разработчиков

Начальные требования:

Необходимы базовые знания программы Figma (Знание программы Figma)

Программа:

Введение
Типографика
Насмотренность и вдохновение
Сетки и направляющие
Первый проект
Отступы
Визуальная иерархия
Границы и скругление элементов
Цвет
Изображения
Искусственный интеллект в изображениях
Тени
Мобильный дизайн
Визуальные приемы в дизайне
Второй проект – Редизайн сайта
Заключение

Программа:

Введение

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

Типографика

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

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

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

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

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

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

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

Отступы

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

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

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

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

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

Цвет

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

Изображения

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

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

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

Тени

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

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

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

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

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

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

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

Заключение

1. Тест для получения сертификата