Веб дизайн в Figma. Продвинутый уровень
О чём курс
О чём курс
Вы создадите макеты сайтов в редакторе Figma по правилам современного веб-дизайна и фундаментальным принципам построения интерфейсов: от типографики и работы с сетками до применения инструментов искусственного интеллекта для генерации и обработки графики.
Для кого
Материал рассчитан на:
- начинающих веб-дизайнеров;
- специалистов, которые уже освоили базовый функционал Figma, но стремятся улучшить визуальное качество своих работ;
- веб-разработчиков, желающих освоить принципы создания эстетичных и структурированных интерфейсов.
Для комфортного прохождения курса требуются базовые навыки работы в Figma.
Что внутри
Обучающая программа сочетает теоретические блоки и практические задания. В рамках курса рассматриваются:
- правила работы с текстом, типы шрифтов, глифы и консистентность типографики;
- построение сеток, направляющих, настройка отступов и работа с пустым пространством;
- уровни визуальной иерархии и расстановка акцентов в интерфейсе;
- подбор цветовых палитр, системные цвета, градиенты и цветовые ассоциации;
- техники работы с тенями, границами и скруглением элементов;
- основы мобильного дизайна и адаптация десктопных макетов;
- использование нейросетей Midjourney и Adobe Firefly для поиска идей, генерации, расширения границ и редактирования изображений.
Что даёт
Слушатели учатся логически анализировать интерфейсные решения, находить визуальные ошибки и развивать насмотренность при работе с референсами. На основе изученных правил создаются два проекта для портфолио: пошаговая разработка сайта с нуля от первого экрана до подвала, а также комплексный редизайн существующего проекта.
Программа обучения
- Введение
- О чем курс
- Скачайте материалы к курсу
- Это мультиязычный курс
- Как проходить курс
- Как задавать вопросы
- Типографика
- Консистентность — это самое главное
- Самый первый UX\UI в мире
- Правильные настройки текста в веб-дизайне
- Типы шрифтов
- Как выбрать шрифт для проекта
- Как креативно форматировать текст
- Как форматировать текст в Figma
- Практика #1 — Отформатируйте текст красиво
- Что такое глифы
- Подводим итоги раздела
- Насмотренность и вдохновение
- Дилемма дизайнера
- Ресурсы для насмотренности
- Плагины для насмотренности
- Стили сайтов в веб-дизайне
- Используйте нейросети для насмотренности
- Сетки и направляющие
- Типы сеток
- Создайте неудобную сетку
- Анализируйте чужие сетки
- Итоги — Типографика и сетки
- Практика # 2 — Разместите контент в сетке
- Практика # 2 — Выполненная ч. 1
- Практика # 2 — Выполненная ч. 2
- Первый проект
- Задача и описание проекта
- Дополнение. Где брать фото
- Создаем модульную сетку
- Создаем Hero Section, часть 1
- Создаем Hero Section, часть 2
- Создаем вторую секцию сайта
- Создаем третью секцию сайта
- Делаем первый баннер
- Создаем четвертую секцию сайта
- Делаем второй баннер
- Делаем пятую секцию
- Создаем шестую секцию
- Создаем footer сайта
- Меняем шрифт и делаем навигационное меню
- Завершаем сайт
- Отступы
- Правило прямого угла
- Какие отступы использовать?
- Использование пустого пространства в дизайне
- Визуальная иерархия
- Что такое визуальная иерархия
- Уровни визуальной иерархии
- Какой элемент важнее
- Как использовать серый цвет
- Делайте наоборот. Уберите акценты с ненужного
- Практика # 3 — Настройте визуальную иерархию
- Практика #3 — Выполненная ч. 1
- Практика #3 — Выполненная ч. 2
- Границы и скругление элементов
- Каким должно быть скругление углов
- Консистентное скругление углов
- Цвет
- Проблема подхода 60·30·10
- Как создавать цветовую шкалу
- Создаем шкалу на практике
- Правило 60·30·10 и шкала цвета
- Необязательно использовать только 3 цвета
- Используйте системные цвета
- Используйте холодный или теплы серый
- Цветовые ассоциации
- Как использовать градиент в дизайне
- Пара советов по работе с цветом
- ИИ Цвет
- Практика # 4 — Примените цвет к макету
- Практика # 4 — Выполненная ч.1
- Практика # 4 — Выполненная ч.2
- Изображения
- Как размещать текст на изображениях
- Какие изображения использовать
- Как работать с иконками
- Как использовать скриншоты в дизайне
- Искусственный интеллект в изображениях
- Про ИИ-изображения
- Функционал и цены на ИИ
- Удаление заднего фона с помощью ИИ
- Удаление объектов с помощью ИИ
- Расширение границ изображений с помощью ИИ
- Увеличение разрешения изображения с помощью ИИ
- Редактирование изображений с помощью ИИ
- Гармонизация изображений с помощью ИИ
- Генерация изображений
- Дополнительные возможности ИИ
- Тени
- О тенях
- Техники и приемы работы с тенями
- Практика # 5 — Применяем эффекты теней правильно
- Мобильный дизайн
- Особенности мобильного дизайна
- Размер текста на мобильных устройствах
- Размеры и выравнивание элементов
- Практика # 6 — Адаптируйте первый проект
- Практика # 6 — Выполненная ч. 1
- Практика # 6 — Выполненная ч. 2
- Практика # 6 — Выполненная ч. 3
- Визуальные приемы в дизайне
- О визуальных приёмах
- Полезные ресурсы для веб-дизайнеров
- Второй проект – Редизайн сайта
- Обзор и задачи проекта
- Подготовка и поиск референсов
- Создаём Hero Section
- Создаем навигационное меню
- Создаем декоративные линии
- Создаем вторую секцию сайта, ч. 1
- Создаем вторую секцию сайта, ч. 2
- Создаем третью секцию сайта
- Создаем четвертую секцию сайта
- Создаем форму для сайта
- Создаем footer для сайта
- Завершаем сайт
- Заключение
- Тест для получения сертификата
Теги курса
Другие материалы автора 12
ДФ Дмитрий Фокеев Все материалыОтзывов пока нет. Будьте первым!
Это не розничная цена — это ваш взнос в складчину. Мы собираем группу участников и делим между ними стоимость официального доступа: каждый платит только свою долю, а получает весь материал. Чем больше участников, тем меньше взнос. После того как сумма собрана, мы оформляем официальный доступ и раздаём материалы всем, кто участвовал.
Нажмите кнопку «Получить доступ» на этой странице и следуйте инструкциям. Вас переведёт на форму оплаты — доступны все современные способы (карта, СБП, электронные кошельки). После оплаты на почту придёт письмо со ссылкой и инструкциями для доступа к материалам. Если ссылка не открывается, загляните в раздел «Помощь» или напишите в поддержку.
Да, конечно. Все материалы — видео, PDF, дополнительные файлы — можно скачать к себе на компьютер и пользоваться ими сколько угодно, без ограничений по времени. Ссылки остаются активными в вашей библиотеке «Мои складчины».