объемный онлайн-курс старшего дизайнера ibm про дизайн интерфейсов для всех участников продуктовой команды. этот курс — гарантия успешной карьеры в ux/ui-среде. сложившаяся культура цифрового потребления требует от бизнеса продуктов, в которых важна простота и удобство в повседневном использовании. однако за этой простотой стоит кропотливый труд продуктовых команд, которые прорабатывают десятки решений, учитывая реальные процессы в бизнесе и свои технические возможности.

дизайнер в подобных командах является связующим звеном — создает визуальные артефакты, понятные как бизнесу, так и другим участникам процесса вывода продукта на рынок. именно поэтому сейчас требуются специалисты, не отмахивающиеся от технических деталей в своей работе и способные объяснить всем, как будет работать интерфейс.

в рамках трех блоков курса мы рассмотрим основные этапы работы дизайнера. вы пройдете путь от создания глобальной информационной архитектуры и проектирования взаимодействия до практических решений при работе над интерфейсом в макетах.

выбрав в самом начале проект, над которым будете работать в течение курса, вы получите не просто реальный кейс с интерактивным прототипом, проработанными макетами и вишенкой в виде ui-анимации в портфолио — лучшие студенты будут приглашены на собеседования в компании, которые предоставят брифы и выступят в качестве партнеров образовательной программы.

в графическую составляющую дизайна, которая важна для промо-сайтов или лендингов глубоко погружаться мы не будем, а сфокусируемся на функциональных интерфейсах с проработкой практических решений в макетах и особенностях взаимодействия.

• 30
  уроков
• 8
  недель
• 60
  минут в день

Кому подойдет курс

дизайнерам-новичкам, которые только погружаются в профессию, а также специалистам, которые хотят систематизировать свои знания по созданию продуктов в веб-среде. менеджерам, аналитикам и всем участникам продуктовых команд, которые хотят расширить свои компетенции в создании интерфейсов или найти общий язык с дизайнерами.

Чему вы научитесь

• откроете для себя современные инструменты работы и варианты их выбора в разных ролях: фрилансер, дизайнер в студии или продуктовый дизайнер в команде.
• проработаете не только успешные сценарии взаимодействия с интерфейсом, но и не менее важные варианты: когда что-то пошло не так с данными или с действиями пользователя.
• сможете ответить на вопросы по функциональным модулям в макетах: как будет происходить вывод данных и работа с ними, сортировка, как будут обрабатываться ошибки и др.
• научитесь применять различные элементы интерфейса и объяснять их интерактивное поведение, не всегда очевидное коллегам.
• ускорите работу с использованием готовых дизайн-систем и разберетесь с фронтэнд фреймворками bootstrap, foundation.
• начнете передавать в разработку макеты, за которые вас будут вспоминать только приятными словами.

Расписание

начало работы

1. принятие поставленной задачи кто ставит задачи и как с этим жить. шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. синхронизация понимания задачи сторонами.
2. работа с техническими и бизнес-требованиями анализ материалов и главные вопросы, проверка на прочность. поиск решений в сложных примерах с громоздкой бизнес-логикой или слишком жесткими техническими ограничениями.
3. выбор рабочей среды краткий обзор современных инструментов проектирования взаимодействия, дизайна, анимации и коммуникации в команде. их выбор в зависимости от процессов в компании и этапов работы над проектом. структура рабочего пространства для хранения данных.
4. обзор продуктов adobe photoshop, indesign, adobe xd. преимущества и недостатки личной и командной работы в определенной среде. ускорители работы и плагины. особенности передачи материалов в разработку, бизнесу или на тесты.
5. sketch
6. figma
7. axure
8. invision, flinto

информационная архитектура и взаимодействие

9. основы проектирования подходы и стандарты в области человеко-компьютерного взаимодействия. критерии оценки качества взаимодействия и интерфейса.
10. customer journey maps и user stories работа с глобальными сценариями и шагами взаимодействия, рекомендации по применению, декомпозиция. проработка негативных сценариев взаимодействия с интерфейсом. инструменты.
11. функциональное проектирование от общего к частному: информационная архитектура, выделение основных компонентов, их функций и логики работы. примеры влияние контента на архитектуру.
12. прототипирование цифровое и бумажное прототипирование: принципы, детализация, инструменты. быстрое тестирование результатов и критерии оценки.
13. вовлечение пользователя психология внимания и восприятия, гештальт. открытые возможности или контроль пользователя, формирование привычки и информационная перегрузка. геймификация и сторителлинг.
14. расширение рамок методики генерации идей, количественный и качественный подходы. их оценка и критерии. доработка прототипа.

практические решения

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). Главное — иметь нормально работающий компьютер и доступ в интернет.

как проходит обучение

обучение проходит в группе фейсбука и включает в себя домашние задания и их разбор на групповых вебинарах. курс предполагает свободный, но организованный график. нужно смотреть лекции, задавать вопросы в фейсбуке — для студентов и преподавателя будет организована закрытая группа, выполнять домашние задания — их будет проверять преподаватель, комментировать и давать советы по улучшению работы. после прохождения курса вам выдается сертификат.

Что в итоге

Вы систематизируете свои знания и добавите качественный кейс в портфолио, совершите качественный рост и получите в профессиональной среде преимущество думающего и вникающего в детали сертифицированного специалиста.

успешная карьера и трудоустройство

лучших студентов рекомендуем главным дизайн-студиям, крупным компаниям и на отдельные проекты.