Факультет дизайна интерфейсов (UX/UI)

Вводный вебинар

— Что такое UX и UI
— Как будет проходить обучение
— Ответы на вопросы

1 урок

История и основные принципы дизайна

— Дизайн в СССР – насмотренность или плагиат
— Осмысленный дизайн
— Главные правила дизайна: как они работают
— Основные трудности дизайнера

5 уроков

Miro

— Основные принципы и приемы работы

2 урока

Аccessibility

— Цифровое неравенство
— WCAG
— Дальтонизм
— Контрастность
— Дислексия

2 урока

Командная работа

— Весь процесс работы над дизайн-задачей: от исследования до прототипа. Хакатон

3 урока

Типографика и композиция в вебе. Расширенный курс

— Введение: основы композиции
— Баланс, симметрия и вес в композиции
— Основные законы композиции
— Воркшоп по композиции
— Шрифт: история и анатомия
— Шрифт в дизайне
— Воркшоп по типографике: теория на практике
— Сборка единой картины

8 уроков

Figma: от проектирования к прототипированию

— Введение. Установка и обзор интерфейса
— Работа с инструментами
— Работа с графикой
— Работа с фреймами. Констрейны. Модульные сетки
— Auto Layout
— Компоненты
— Прототипирование
— Организация рабочего пространства. Настройка стилей
— Воркшоп: работа в команде

9 уроков

Adobe Illustrator для UX и веб-дизайнеров

— Быстрый старт
— Разбор домашних работ и итоги челленджа
— Сложные формы и построения
— Магия эффектов
— Работа с файлами и текстом
— Бонусы

9 уроков

Рефлексия. Работа с портфолио

— Анализ пройденного. Переоценка учебных целей
— Принципы оформления портфолио

2 урока

Введение в дизайн цифровых продуктов

— Знакомство с цифровым продуктом
— Дизайн-ревью
— Проектирование веб-интерфейсов для десктопа
— Особенности мобильных интерфейсов и платформ
— Взаимодействие с разработкой
— Искусство презентации + дизайн-ревью
— Итоговый просмотр

11 уроков

Основы вёрстки для UI-дизайнера

— Вводное занятие
— Разбор макета для вёрстки
— Основы языка разметки документов HTML
— Консультация
— Основы языка оформления стилей документа CSS
— Макеты
— Консультация
— Формирование блочной модели
— Позиционирование элементов основы адаптивного сайта
— Консультация
— Адаптив
— Подготовка сайта для размещения в интернете

15 уроков

Онлайн-конструкторы сайтов: Tilda

— Вводная лекция. Знакомство с конструкторами
— Создание лендинга из готовых блоков
— Zero block. Как собрать уникальный дизайн в Tilda
— Навигация и настройки сайта
— Адаптивный дизайн в TildaАнимацияИтоговый разбор работ

12 уроков

Рефлексия. Работа с портфолио

— Анализ пройденного. Переоценка учебных целей
— Принципы оформления портфолио

2 урока

Адаптивный дизайн + веб-приложение

— Что такое веб-дизайн. Почему сайт должен быть адаптивным
— Сетка под разные типы устройств
— Как работать со шрифтом и цветом
— Адаптация контента: текст, таблицы, каталоги, списки, картинки, иконки
— Интерактивные элементы: ссылки, кнопки, меню, всплывающие подсказки
— Как подготовить макет для передачи в разработку
— Как оживить интерфейс: анимация и жесты
— Рефлексия по курсу

8 уроков

Мобильное приложение

— Дизайн интерфейса мобильного приложения: лучшие практики
— Гайдлайны iOS и Android
— Дизайн-ревью
— Первая консультация по диплому
— Вторая консультация по диплому
— Дизайн-процесс: повторение
— Подготовка к публикации в магазинах приложений
— Третья консультация по диплому
— Финальная консультация по диплому

8 уроков

Десктоп приложение

— Отличия десктоп от веб-приложений
— Гайды настольных ОС (дизайн-системы)
— Технические ограничения
— Принципы работы приложения без доступа в интернет

4 урока

Adobe After Effects. Базовый

— Введение в интерфейс After Effects и базовые инструменты анимации слоев
— Импорт из Figma в After Effects. Анимация с помощью масок
— Анимация текста
— Анимация интерфейса. Принципы анимации Google Material Design и рекомендации Apple Human Interface
— 12 принципов анимации Диснея: как они работают в веб- и UI/UX-дизайне
— Подготовка кейса. Основы создания ролика
— Финальный вебинар, презентация итоговых работ

8 уроков

Менеджмент проекта

— Методологии
— Проект и менеджер проекта
— Анализ и планирование
— Коммуникация дизайнера с другими ролями
— Самоорганизация и рефлексия

4 урока

Adobe Photoshop. Основы. Интерактивный курс

— Маски. Трансформация и деформация
— Редактирование портрета
— Фильтры. Неоновая вывеска
— Gif-анимацияПростые 3D-объекты

13 уроков

Рефлексия. Работа с портфолио

— Анализ пройденного. Переоценка учебных целей
— Принципы оформления портфолио

2 урока

Брифинг + игра в бриф

— Подготовка к встрече с заказчиком. Проработка стратегий и возможных вопросов
— Встреча с заказчиком. Бриф

2 урока

Исследования

— Предыстория UX
— Виды исследований
— Desk research
— Работа с гипотезами
— Метод интервью
— Фантастические респонденты и обзор полученных данных
— Исследование аудитории: специфика
— Воркшопы и дизайн-мышление
— Презентация студентов. Часть 1
— Презентация студентов. Часть 2
— Урок по UX-исследованиям. Часть 1
— Урок по UX-исследованиям. Часть 2

12 уроков

Метрики

— Продуктовые метрики
— Финансовые метрики
— Пользовательские метрики

3 урока

Формирование низкодетализированного прототипа

— Продуктовый дизайн и гипотезы
— Основные методологии и артефакты работы с гипотезами
— Как создать хороший User Flow
— Как проверять гипотезы на прототипах
— Промежуточный просмотр прототипов на основе гипотез
— Создание дизайн-брифа для команды на основе гипотез
— Создание бэклога

7 уроков

Промежуточная защита

— Встреча с заказчиком: презентация результатов исследования и низкодетализированного прототипа, основанного на проверенных гипотезах
— Обратная связь от заказчика

1 урок

InVision. Интерактивный курс

— Введение
— Интерфейс и дизайн
— Прототипирование и анимация
— InvisionApp
— Заключение
— Вебинарное занятие

11 уроков

Поиск работы

— Составление резюме
— Подготовка к интервью
— Поиск вакансий
— Оформление портфолио

2 урока

Формирование финального прототипа

— Работа над высокодетализированным прототипом
— Обратная связь

3 урока

Защита

— Презентация полного процесса работы над проектом, от исследований до формирования прототипа
— Презентация готового кликабельного прототипа в Figma

1 урок