(UX & UI) UX & UI Designer

• В результате курса у Вас минимум будет:
• 3 прототипа: Лендинг / Веб-сервис / Интернет-магазин / Мобильное приложение
• 3 дизайн-проекта по разработанным прототипам
• 1-2 свёрстанных и работающих проекта в альфа-бетта версии

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

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

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

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

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

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

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

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

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

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

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

• Краткое знакомство с проектами участников, результатами 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. Презентации проектов заказчику

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