Основы дизайна веб-приложений
Цель курса
Обучить основам веб- и интерфейс-дизайна: от UX-исследований и прототипирования до создания UI и интеграции AI-инструментов. Участники смогут разработать собственный веб-прототип и презентовать его команде.
Формат обучения:
- Онлайн / офлайн / гибрид
- Практические кейсы, воркшопы, интерактивные сессии
- Поддержка участников во время обучения в закрытом чате
- Групповое обучение: 7600 грн/час. Группа до 12 участников
- Индивидуальное наставничество: 2 500 грн/час
Что получит выпускник курса?
Проблема, которую решает курс
Многие проекты имеют неудобные или неэстетичные интерфейсы из-за отсутствия знаний о 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
Теория:
- Как готовить макет к передаче.
Практика:
- Презентация финального проекта.
- Отзывы, фидбек, советы по портфолио.
Часто задаваемые вопросы
1
Многие проекты имеют неудобные или неэстетические интерфейсы из-за отсутствия знаний об UX/UI. Курс дает практические методики, помогающие создавать понятные и привлекательные веб-решения, совмещая UX-исследования, прототипирование и интеграцию AI-инструментов.
2
Вы научитесь работать с Figma, создавать wireframes, UI-киты и разрабатывать мобильные (responsive) версии макетов. Программа включает работу с композицией, типографией и цветом, а в финале вы разработаете собственный веб-прототип и научитесь его презентовать.
3
Программа рассчитана на 5 недель и состоит из 9 интенсивных занятий в онлайн-формате. Обучение делает максимальный акцент на практике: вас ждут воркшопы, разбор практических кейсов, интерактивные сессии и постоянная поддержка в закрытом чате.
4
Выпускники получают навыки подготовки макетов к передаче и смогут создать страницу для собственного портфолио на сервисах Behance или Dribble. Чтобы присоединиться к курсу и научиться создавать современные интерфейсы, просто нажмите кнопку «Подать заявку» на этой странице.
