Программа курса UI/UX Design. План лекций и практических занятий
Модуль 1. UX Design
Лекция 1. Введение в UX
Лекция 2. Исследование целевой аудитории ее потребностей
Лекция 3. Виды и подходы прототипирования
Лекция 4. Элементы интерфейса Web/Mobile
Лекция 5. Тестирование интерфейса
Модуль 2. UI Design
Лекция 6. Введение. Что такое продуктовый дизайн. Отличия от процессов студий и аутсорса.
Лекция 7. Photoshop/Illustrator
Лекция 8. Цвет и шрифт
Лекция 9. Адаптивный и отзывчивый дизайн
Лекция 10. Иконки
Модуль 3. Mobile Apps design и презентация
Лекция 11. Особенности дизайна Mobile Apps
Лекция 12. Презентация проекта.
Модуль 1. UX Design
Лекция 1. Введение в UX
Понятие UX/UI/GUI
Эвристики Нильсена. Законы Фиттса и Хика на практике.
Понимание Usability
Доступность продукта для всех
Законы и принципы Usability
• Понимание Human-Centered Design
• Этапы разработки продукта
• Виды UX-исследований
Введение в проект
• Брифинг
• Определение целей и задач проекта
• Анализ бизнеса и конкурентов
ДЗ: Выбор тем проектов, сделать анализ конкурентного преимущества, определить задачи проекта.
Лекция 2. Исследование целевой аудитории ее потребностей
Определение и сегментирование ЦА
• Определение проблем ЦА и их решения
• Определение и описание персон
• Пользовательские истории (User Story) и визуализация (StoryBoard)
Формирование структуры проекта
• Сценарии использования (User Scenarios)
• Customer Journey Map, User Flow
• Информационная архитектура
Как выбрать — что показывать, что спрятать, а что выбрать за самого пользователя? Как дать меньше контроля людям и повысить необходимые метрики?
• Разработка Функциональной карты в программе (XMind)
ДЗ: Определить ЦА, провести интервью, написать сценарий, CJM, флоу.
Лекция 3. Виды и подходы прототипирования
Скетчи
• Варфреймы
• Мокапы
• Интерактивные прототипы
Законы и принципы построения интерфейсов
• Визуальная иерархия сайта
• Закон близости в гештальт-психологии
• Расстановка приоритетов и акцентов на страницах
• F- и Z- паттерны
ДЗ: Доделываем предыдущую домашку. Начинаем делать бумажные прототипы для своего сайта.
Лекция 4. Элементы интерфейса Web/Mobile
Навигация, Элементы форм и их состояния, Информационные элементы, Мультимедиа, Иконки.. Landing page составляющие
Инструменты для прототипирования
• Marvel
• Invision
• Axure
ДЗ: Делаем бумажный прототип для LandingPage, и кликабельны для своего проекта.
Лекция 5. Тестирование интерфейса
Как узнать реальные проблемы пользователей. Выдвигаем и проверяем гипотезы. Проводим качественное тестирование на настоящих пользователях. A/B тесты. Анализ результатов. Исправление решений.
• Количественные исследования
• Качественные исследования
• Составление сценариев для тестирования
• Подбор целевой аудитории
• Ведение тестирования
• Исправление ошибок согласно полученным данным
• Аналитика
Data Mining и аналитика для веба/мобильного приложения
Сплит-тесты (KPI из GA). UX метрики в мобильном вебе.
Повышение эффективности проекта после запуска
• Составление гипотез на основе собранных данных
• Внедрение и отслеживание изменений
ДЗ: Новый общий проект (корпоративный сайт). Доделываем все прототипы.
Модуль 2. UI Design
Лекция 6. Введение. Что такое продуктовый дизайн. Отличия от процессов студий и аутсорса.
История Web-дизайна
• Скевоморфизм
• Плоский дизайн (Flat)
• Material design (Google)
• Fluent Design (Microsoft)
• IBM Design Language
Композиция
• Золотое сечение
• Числа Фибоначчи
• Правило третей
• Контраст и нюанс
• Доминанта
• Иерархия объектов
• Закон близости объектов
• Ритм, статика и динамика
• Правильная расстановка акцентов
• Визуальная иерархия
• Форма и контрформа
• Перспектива и пространство
ДЗ: Дизайн для LandingPage.
Лекция 7. Photoshop/Illustrator
Настройки графических редакторов для создания макетов для Web
ДЗ: Делаем дизайн нового проекта (корпоративный сайт).
Лекция 8. Цвет и шрифт
Теория цвета. Подбираем правильные цвета для сайта
• Работа с цветовым кругом (Монохромные, комплиментарные и близкие цвета)
• Инструменты по подбору цвета
Шрифт
• Web-типографика
• Визуальные элементы статьи
• Подбор шрифтов и шрифтовые пары
• Инструменты подбора Web-шрифтов
ДЗ: Прототип и верстка странички блога. Дизайн для своего проекта.
Лекция 9. Адаптивный и отзывчивый дизайн
• Mobile first/Desktop first подходы
• Мобильные версии сайта, Адаптивный дизайн
• Подготовка макетов для адаптивных/отзывчивых сайтов
• Правила подготовки макетов и изображений для Retina дисплеев
Модульные сетки и адаптивность
• 12 колоночная сетка Bootstrap
• Mobile First / Desktop First подходы
• Мобильные сайты
• Адаптивные сайты
• 8pt сетка
ДЗ: Дизайн для своего проекта. Доделываем все домашки.
Лекция 10. Иконки
• Стили и виды иконок
• Форматы и стандартные размеры иконок
• Сервисы по подбору иконок
Подготовка и передача макета
• Разметка, нарезка, инструменты автоматизации процесса.
• Создание Style guide. UI KIT.
• Программы
ДЗ: Дизайн для своего проекта. Доделываем все домашки.
Модуль 3. Mobile Apps design и презентация
Лекция 11. Особенности дизайна Mobile Apps
Особенности мобильных UX стратегий для Mobile Apps.
• Паттерны взаимодействия ключевых платформ (Android, Apple).
• Гайды iOS и Google Material Design.
ДЗ: Прототипы и дизайн мобильной версии для своего проекта. Доделываем все домашки.
