Объемный онлайн-курс старшего дизайнера IBM про дизайн интерфейсов для всех участников продуктовой команды. Этот курс — гарантия успешной карьеры в UX/UI-среде. Сложившаяся культура цифрового потребления требует от бизнеса продуктов, в которых важна простота и удобство в повседневном использовании. Однако за этой простотой стоит кропотливый труд продуктовых команд, которые прорабатывают десятки решений, учитывая реальные процессы в бизнесе и свои технические возможности.
Дизайнер в подобных командах является связующим звеном, который создает визуальные артефакты, понятные как бизнесу, так и другим участникам процесса вывода продукта на рынок. Именно поэтому сейчас требуются специалисты, не отмахивающиеся от технических деталей в своей работе – те, которые которые могут объяснить всем, как будет работать их интерфейс.
Вы научитесь создавать рабочие интерфейсы для современных требований рынка и реальных технологий, а не просто рисовать красивые картинки на dribbble.
Курс подойдет как дизайнерам-новичкам, которые только погружаются в профессию, так и специалистам, которые хотят систематизировать свои знания по созданию продуктов в веб-среде. Мы не будем глубоко погружаться в графическую составляющую дизайна, которая важна для промо-сайтов или лендингов, а сфокусируемся на функциональных интерфейсах с проработкой практических решений в макетах и особенностей взаимодействия.
Советуем пройти этот курс менеджерам, аналитикам и всем участникам продуктовых команд, которые хотят расширить свои компетенции в создании интерфейсов или найти общий язык с дизайнерами.
Мы рассмотрим основные этапы работы дизайнера в рамках трех основных блоков курса. Вы пройдете путь от глобальной информационной архитектуры и проектирования взаимодействия до практических решений при работе над интерфейсом в макетах.
Выбрав в самом начале один из проектов, вы получите не просто реальный кейс в портфолио с интерактивным прототипом, проработанными макетами и вишенкой в виде UI-анимации. Лучшие студенты смогут пройти собеседование в компаниях-партнерах, которые предоставят брифы.
Блок 1. Начало работы
Лекция 1. Принятие поставленной задачи
Кто ставит задачи и как с этим жить. Шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. Синхронизация понимания задачи сторонами.
Лекция 2. Работа с техническими и бизнес-требованиями
Анализ материалов и главные вопросы, проверка на прочность. Поиск решений в сложных примерах с громоздкой бизнес-логикой или слишком жесткими техническими ограничениями.
Лекция 3. Выбор рабочей среды
Краткий обзор современных инструментов проектирования взаимодействия, дизайна, анимации и коммуникации в команде. Их выбор в зависимости от процессов в компании и этапов работы над проектом. Структура рабочего пространства для хранения данных.
Обзор популярных инструментов.
Преимущества и недостатки личной и командной работы в определенной среде. Ускорители работы и плагины. Особенности передачи материалов в разработку, бизнесу или на тесты.
Лекция 4. Обзор продуктов Adobe: Photoshop, Indesign, Adobe XD
Лекция 5. Sketch
Лекция 6. Figma
Лекция 7. Axure
Лекция 8. Invision, Flinto
Блок 2. Информационная архитектура и взаимодействие
Лекция 9. Основы проектирования
Подходы и стандарты в области человеко-компьютерного взаимодействия. Критерии оценки качества взаимодействия и интерфейса.
Лекция 10. Customer Journey maps и User Stories
Работа с глобальными сценариями и шагами взаимодействия, рекомендации по применению, декомпозиция. Проработка негативных сценариев взаимодействия с интерфейсом. Инструменты.
Лекция 11. Функциональное проектирование
От общего к частному: информационная архитектура, выделение основных компонентов, их функций и логики работы. Примеры влияние контента на архитектуру.
Лекция 12. Прототипирование
Цифровое и бумажное прототипирование: принципы, детализация, инструменты. Быстрое тестирование результатов и критерии оценки.
Лекция 13. Вовлечение пользователя
Психология внимания и восприятия, гештальт. Открытые возможности или контроль пользователя, формирование привычки и информационная перегрузка. Геймификация и сторителлинг.
Лекция 14. Расширение рамок
Методики генерации идей, количественный и качественный подходы. Их оценка и критерии. Доработка прототипа.
Блок 3. Практические решения
Лекция 15. Принципы макета
Выбор основных параметров фронтэнда: рабочее разрешение экрана, адаптивность, сетка, модульность и др. Особенности поведения и реализации web интерфейсов и почему это все важно дизайнеру.
Лекция 16. Композиция и верстка
Основные принципы, вспоминаем гештальт. Привычные шаблоны позиционирования информации на странице (F, I, бургер и др) и блочность.
Лекция 17. Сетка и ритм
Принципы построения сеток, модульность и ритм. Особенности применения в веб и готовые решения из фреймворков Bootstrap, Foundation.
Лекция 18. Работа с текстом
Типографика, особенности набора и верстки. Работа с информационным посылом "call to action" и редактура.
Лекция 19. Вебинар атомарный дизайн
Методология от простого к сложному, особенности применения.
Лекция 20. Элементы интерфейса
Особенности применения и верстки атомарных контролов и элементов веб интерфейса. Поведение и стандартные состояния в веб.
Лекция 21. Формы
Работа с вводом данных и контролем результата, валидация и обработка ошибок. Особенности применения и верстки полей ввода, выпадающих списков, переключателей и др.
Лекция 22. Табличные данные
Анализ данных, верстка таблиц. Особенности проектирования сортировки и фильтрации, адаптивность.
Лекция 23. Вебинар: дизайн системы и фреймворки
Подходы к работе над интерфейсом: придумать свое, взять готовый UI-kit или играть по правилам целого фреймворка. Использование привычных или уникальных элементов интерфейса.
Лекция 24. Модульность
Создание сложных UI-компонентов (модулей) и их стандартизация для переиспользования в разных частях проекта.
Лекция 25. Адаптивность
Обзор подходов к адаптивности, технические особенности в веб. Подготовка макетов и работа с графическими ресурсами.
Лекция 26. UI-анимация
Основные принципы и сферы использования. Виды реализации: слоями, нодами, кодом. Обзор современных инструментов для создания анимации: какие из них удобны и понятны для разработчиков.
Лекция 27. Вебинар: модули в дизайн-системах
Как не плодить лишние сущности, но выделять новые модули и вносить доработки в дизайн-систему. Ответы на вопросы.
Лекция 28. Передача материалов
Подготовка макетов для разработки, экспорт графических ресурсов, описание функционала и коммуникация с разработчиками.
Лекция 29. Масштабирование и работа в команде
Синхронизация и обновление макетов между несколькими дизайнерами, актуализация дизайн-системы. Обзор облачных символов Sketch, Craft и контроля версий Abstract.
Лекция 30. Дизайн-кейс
Подготовка кейса в портфолио, особенности и ошибки. Обзор площадок для публикации: Behance. Tilda и Readymag.
Выбор рабочей среды остается за вами. Можете работать в привычных продуктах Adobe или открыть для себя что-то новое в Sketch (Mac) или Figma (Win/Mac). Главное – иметь нормально работающий компьютер и доступ в интернет.
Попова Анастасия — старший UX-дизайнер IBM Interactive Experience, методолог фреймворка по поиску и разработке клиенто-ориентированных решений IBM Design Thinking. Преподаватель на курсах «UX/UI дизайн» в Британской Высшей Школе Дизайна.
За 8 лет в дизайне прошла путь от дизайнера в потоковой веб-студии, контрактного фрилансера и стартапера до продуктового дизайнера, сфокусированного на проектах в финансовой индустрии. Участвовала в создании ряда крупных цифровых банковских продуктов российского рынка для компаний Сбербанк, Росбанк, Пробизнесбанк и др. Один из которых получил награду Red Dot в номинации «Дизайн интерфейсов» с формулировкой «За высокое качество дизайна». Работала над интерактивными инсталляциями для фестивалей Политех и Midsummer Night Dream. Исследует возможности цифрового и физического взаимодействия в личных проектах.
Вы систематизируете свои знания и добавите качественный кейс в портфолио, совершите качественный рост и получите в профессиональной среде преимущество думающего и вникающего в детали сертифицированного специалиста.
