Веб дизайн в Figma. Продвинутый уровень

11 участников

О чём курс

О чём курс

Вы создадите макеты сайтов в редакторе 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 для сайта
    • Завершаем сайт
  • Заключение
    • Тест для получения сертификата
Складчина создана 21 декабря 2025 г.

Теги курса

Инструменты

Другие материалы автора 12

ДФ Дмитрий Фокеев Все материалы
600 ₽ 3 290 ₽