UX | UI дизайнер

Модуль 1. UX 

Занятие 1. Знакомство. Введение в юзабилити.

• Знакомство с преподавателями курса. Краткое содержание курса. Цели, итоги, домашние задания, работа над проектами, вопросы.
• Понятия юзабилити, UX.
• Отличие UX от UI.
• Примеры кейсов пользы UX.
• Этапы и подэтапы UX.
• User Centered Design, Task Centered Design. Основные задачи UX.
• Стандарт ISO/DIS 9241-210, описывающий методологию человекоориентированного подхода к проектированию интерфейсов.
• С чего начинается UX.
• Изучение целей и задач бизнеса.
• План беседы с представителями заказчика.
• Домашнее задание.

Занятие 2. С чего начинается UX.

• Планирование процесса проектирования.
• Дизайн как решение поставленной задачи.
• Data-driven design.
• Формирование гипотетических представлений о пользователях.
• Методика профилей пользователей.
• Практика: Формирование гипотетических представлений о пользователях.

Занятие 3. Юзабилити аналитика.

• Изучение предметной области.
• Изучение конкурентов.
• Методы сбора информации.
• Интервью, опросы, эксперименты, контент-анализ.
• Выбор метода сбора информации.
• Работа с экспертами.
• Каким результатам исследований можно верить.
• Домашнее задание.

Занятие 4. Юзабилити аналитика.

• Исследование пользователей.
• Инструменты анализа.
• Систематизация и интерпретация полученных данных.
• Карты эмпатии.
• Методика пользовательские ролей и ситуаций использования.
• Практика: Подготовка к получению данных о пользователях.
• Домашнее задание.

Занятие 5. Юзабилити аналитика.

• Методика персонажей.
• User Stories.
• Концептуальные сценарии.
• Конкретные сценарии.
• Use cases.
• Метод волшебной палочки.
• Практика: Составление персонажей и ситуаций использования.

Занятие 6. Юзабилити аналитика.

• Анализ полученных данных.
• Customer Journey Map.
• Написание сценариев взаимодействия (методика).
• Составление требований к интерфейсу.
• Практика: Написание сценариев.
• Практика: Составление требований к интерфейсу.

Занятие 7. Тонкости проектирования процессов взаимодействия.
Концептуальное проектирование.

• Подходы гуру юзабилити. Стив Круг. Якоб Нильсон. Алан Купер. Джеф Раскин.
• Концептуальное проектирование.
• Направление внимания пользователя.
• Золотые правила юзабилити.
• Кодировка цветом, акцентирование, объем внимания, закон Фиттса.
• Метод карточной сортировки.
• Юзабилити элементов cta, веб-форм, страниц товаров.
• Ясность, приветливость и обаяние интерфейса.
• Практика: Концептуальное проектирование.
• Домашнее задание.

Занятие 8. Базис проектирования процессов взаимодействия. Написание спецификации на интерфейс.

• Информационная архитектура.
• Детальное проектирование.
• Инструменты для прототипирования.
• Participatory design.
• Проектирование на основе паттернов. Библиотеки паттернов.
• Гайдлайны.
• Написание спецификации на интерфейс.
• Практика: Детальное проектирование.
• Домашнее задание.

Занятие 9. Тестирование интерфейса.

• Цель тестирования.
• Аналитика CJM.
• Юзабилити-тестирование.
• Разработка сценариев тестирования.
• Рекрутинг респондентов.
• AB тестирование. Инструменты для АВ тестирования.
• Eye – треккинг.
• Представление прототипов заказчику.
• Практика: Планирование, подготовка к юзабилити-тестированию.

Занятие 10. Повышение эффективности продукта.

• Работа с конверсией и другими показателями проектов.
• Стратегия экспериментов.
• Разбор кейсов.
• Библиотеки кейсов повышения конверсии.
• Оформление работы в своем портфолио.
• Практика: Проведение юзабилити-тестирования.
• Домашнее задание.

Занятие 11. Экспертная оценка (юзабилити-аудит).

• Эмпирическая оценка.
• Оценка по сценариям.
• Оценка по чек-листам.
• Выбор способа проверки эффективности продукта.
• Типичные ошибки интерфейсов. «Best practices». Примеры интересных решений в интерфейсах.
• Практика: Юзабилити-аудит критичных проблем интерфейса по сценариям.
• Практика: Юзабилити-аудит критичных проблем интерфейса по эмпирикам.
• Подведение итогов курса. Ответы на вопросы. Куда двигаться дальше?

Модуль 2. UI

Занятие 1. Основы визуального дизайна

• Краткое знакомство с проектами участников, результатами 1-го модуля
• Базовые элементы дизайна
• Цвет
• Дизайн-концепция
• Домашнее задание: изучить список полезных ресурсов/лекций/книг для вдохновения. Подготовить мудборд, дизайн-концепцию и цветовая схема для своего проекта

Занятие 2. Типографика

• Шрифтовые традиции
• Текст как базовый элемент вёрстки
• Виды шрифтов
• Интерлиньяж, кегль, поля, отступы и модульность
• Технические возможности программ. Какой инструмент выбрать?
• Знакомство с Figma, Sketch, Adobe XD
• Подбор шрифтовых пар
• Вёрстка своего проекта
• Домашнее задание: продолжаем работу над проектом

Занятие 3. Основы работы с макетом

• Закон Фиттса, теория близости, визуальная структура
• Примитивы вёрстки
• Принцип модульности
• Якорные объекты
• Чередование ритма
• Собираем свою страницу
• Как работать с сеткой в 12 колонок
• Домашнее задание: продолжить собирать страницу

Занятие 4. Поведение интерфейса

• Основные элементы контента
• Как показать состояние интерфейса
• Как оформить ссылки
• Как сделать хорошую кнопку
• Домашнее задание: нарисовать нужные элементы контента в разных состояниях

Занятие 5. Векторная графика в UI

• Растровая и векторная графика
• Иконки и пиктограммы
• Размеры в вебе
• Сетки и гайдлайны
• Экспорт иконок. SVG формат
• Домашнее задание: сет из 7 иконок

Занятие 6. Навигация и структура

• Виды навигации
• Информационная архитектура сайта
• Интерфейс интернет-магазина
• Удобная регистрация
• Домашнее задание: навигация по своему проекту

Занятие 7. Адаптация под Mobile

• Концепция Mobile first
• Резиновый дизайн, респонсив и адаптив
• Популярные сетки для адаптива
• Разработка сета из нескольких разрешений

Занятие 8. Передача проекта в вёрстку

• Учитываем: состояния кнопок и форм, слайдеры, всплывающие окна
• Передача графики и иконок
• Как взаимодействовать с разработчиком? Zeplin
• Домашнее задание: подготовить архив для передачи разработчику

Занятие 9. Собрать страницу без вёрстки и программирования

• Что такое визивиг-редакторы
• Readymag, Tilda, Webflow
• Примеры сайтов на Readymag
• Оживляем свой проект с помощью Readymag
• Домашнее задание: подготовить проект и презентацию заказчику

Занятия 10-11. Работа над проектами

Занятия 12. Презентации проектов заказчику

• Презентация и разбор макетов
• Подготовка портфолио 
• Как попасть на работу в компанию мечты?

 

Модуль 3. Основы фронт-енд разработки для дизайнеров

Занятие 1. Введение (Git, VS Code, HTML)

• Краткое знакомство с проектами участников, результатами модуля 1-2.
• Основы работы с системой контроля версий на примере git (установка, основные команды) + Github Desktop 
• Знакомство с VS Code
• Знакомство с HTML 
• Структура страницы
• Основные теги

Занятие 2. CSS

• Знакомство с CSS 
• Подключение, Селекторы, Свойства
• БЭМ
• Позиционирование элементов

Занятие 3. Адаптив, препроцессоры, Flexbox, CSS Grid

• Виды вёрстки (фиксированная, адаптивная, резиновая) 
• Flexbox
• CSS Grid
• Знакомимся с препроцессорами (SASS)

Занятие 4. Элементы управления

• Знакомимся с основными элементами управления
• Разбираем принципы работы самых популярных элементов на примере элементов Bootstrap

Занятие 5. Практическое занятие

• Выбираем макет для вёрстки (либо свой, либо берём на просторах интернета)
• Рассматриваем варианты экспорта (в Zeplin и в Figma)
• Разбираем все практические вопросы
• Pixel Perfect
• Разбираем возникающие вопросы

Занятие 6. Основы JavaScript

• Очень коротко о Node.js
• Переменные и типы данных
• Функции
• Работа с DOM
• События

Занятие 7. Практическое занятие

• Применяем знания, полученные на предыдущем занятии и делаем свою реализацию нескольких элементов управления
• Разбираем возникающие вопросы

Занятие 8. Финальная презентация курсовых проектов

• Презентации проектов 
• Разбираем возникающие вопросы
• Подготовка к собеседованию