Основы веб и интерфейс-дизайна
Цель курса
Обучить основам веб- и интерфейс-дизайна: от UX-исследований и прототипирования до создания UI и интеграции AI-инструментов. Участники смогут разработать собственный веб-прототип и презентовать его команде.
Формат обучения:
- Онлайн / офлайн / гибрид
- Практические кейсы, воркшопы, интерактивные сессии
- Поддержка участников во время обучения в закрытом чате
- Групповое обучение: 6300 грн/час. Группа до 12 участников
- Индивидуальное обучение: 1700 грн/час
Что получит выпускник курса?
Проблема, которую решает курс
Многие проекты имеют неудобные или неэстетичные интерфейсы из-за отсутствия знаний о UX/UI и современных инструментах. Курс решает эту проблему, давая практические методики и навыки, которые помогают создавать понятные и привлекательные веб-решения.
Программа курса "Основы веб и интерфейс-дизайна"
1
Теория:
- Разница между UI, UX, Web и Mobile-дизайном.
- Примеры хорошего дизайна в разных стилях.
- Роль дизайнера в команде. Кто такие PM, Dev, QA.
- Обзор инструментов: Figma, Photoshop, Illustration, AI-помощники.
Практика:
- Создание аккаунта в Figma. Интерфейс.
- Сбор референсов + первый moodboard в Figma.
2
Теория:
- Сетки, блоки, отступы.
- Иерархия, баланс, контраст, белые пространства.
- Основы композиции и гештальт-принципы.
Практика:
- Построение layout-сетки в Figma.
- Упражнения по размещению элементов (заголовки, CTA, фото).
3
Теория:
- Как выбирать шрифты: разбор Google Fonts.
- Цвет: ассоциации, акценты, цветовые палитры.
Практика:
- Построение цветовой схемы для сайта, мобильного приложения.
- Создание текстовых стилей в Figma.
4
Теория:
- Кто такой пользователь и как его понять.
- Персоны, цели, сценарии использования.
- Что такое UX-исследование (простыми словами).
Практика:
- Создание простого user flow.
- Построение базового сценария на примере “Проекта”.
5
Теория:
- Что такое wireframe. Почему важно не начинать с цвета.
- Низкая детализация vs высокая.
Практика:
- Создание wireframe главной страницы в Figma.
- Работа с автолэйаутами.
6
Теория:
- Что такое UI-kit. Брендовые цвета, кнопки, формы.
- Примеры Design Systems (Material, Apple).
Практика:
- Создание собственного UI-кита.
- Добавление элементов в библиотеку Figma.
7
Теория:
- Структура landing page, мобильного приложения.
- Как сделать “удобный” дизайн?
Практика:
- Дизайн главной страницы (hi-fi макет).
- Работа с компонентами, стилями, текстами.
8
Теория:
- Что такое responsive-дизайн.
- Как работает flex/grid при адаптации макета.
- Типичные ошибки при создании мобильной версии.
Практика:
- Разработка мобильной версии главной страницы.
- Сравнение desktop/mobile: адаптация контента и UI.
9
Теория:
- Как готовить макет к передаче.
Практика:
- Презентация финального проекта.
- Отзывы, фидбек, советы по портфолио.
Курс
14 часов
9 занятий
Проводит обучение
