Освойте правила современного веб-дизайна и создавайте профессиональные макеты в Figma. (Бонус: использование нейросетей в дизайне)
Чему вы научитесь:
- Научитесь создавать современные и стильные макеты сайтов
- Изучите десятки правил современного веб-дизайна
- Научитесь применять правила веб-дизайна на практике в реальных задачах
- Научитесь строить сетки и направляющие для структуры макета
- Научитесь настраивать отступы, ритм и визуальный порядок в макете
- Изучите методы работы с типографикой
- Изучите правила композиции в веб-дизайне
- Научитесь создавать аккуратные и модульные композиции
- Изучите методы работы с цветом: палитры, контраст, акценты
- Научитесь использовать тени, скругления и эффекты корректно и профессионально
- Изучите правила консистентного дизайна
- Научитесь анализировать дизайн логически и находить ошибки
- Научитесь развивать насмотренность и работать с референсами
- Научитесь создавать оригинальные концепции сайтов с нуля
- Научитесь применять ИИ Midjourney и Adobe Firefly в веб-дизайне
- Создадите 2 проекта для портфолио
Для кого этот курс:
Для начинающих веб-дизайнеров Для тех, кто изучил основы программы Figma, но хочет улучшить дизайн своих работ Для веб-разработчиков
Начальные требования:
Необходимы базовые знания программы Figma (Знание программы Figma)
Программа:
Введение
Типографика
Насмотренность и вдохновение
Сетки и направляющие
Первый проект
Отступы
Визуальная иерархия
Границы и скругление элементов
Цвет
Изображения
Искусственный интеллект в изображениях
Тени
Мобильный дизайн
Визуальные приемы в дизайне
Второй проект – Редизайн сайта
Заключение
Программа:
Введение
- О чем курс
- Скачайте материалы к курсу
- Это мультиязычный курс
- Как проходить курс
- Как задавать вопросы
Типографика
- Консистентность — это самое главное
- Самый первый 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 для сайта
- Завершаем сайт
Заключение
- Тест для получения сертификата
